Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

Sem a concatenação e minificação dos scripts

Referente ao curso Gulp: automação de tarefas front-end

por Paulo Ricardo
| 79.4k xp | 6 posts

Boa tarde, Implementei o arquivo gulpfile.js tal como proposto na vídeo-aula, mas quando executo a task default, o arquivo não é minificado. Realizei um teste executando somente a task usemin e o arquivo foi minificado com sucesso. Será que esse erro tem alguma relação com a execução da task default?

Segue o código:

// GULPFILE
var gulp = require('gulp')
  ,imagemin = require('gulp-imagemin')
  ,clean = require('gulp-clean')
  ,concat = require('gulp-concat')
  ,htmlReplace = require('gulp-html-replace')
  ,uglify = require('gulp-uglify')
  ,usemin = require('gulp-usemin');

gulp.task('copy', ['clean'], function() {
    gulp.src('src/**/*')
    .pipe(gulp.dest('dist'));
});
gulp.task('build-img', function(){
    gulp.src('dist/img/*').pipe(imagemin()).pipe(gulp.dest('dist/img'));
});

// a nova tarefa clean
gulp.task('clean', function() {
     var stream = gulp.src('dist')
        .pipe(clean());
    return stream;
});
gulp.task('usemin', function() {
  return gulp.src('dist/**/*.html')
    .pipe(usemin({
      js: [uglify]
    }))
    .pipe(gulp.dest('dist'));
});
gulp.task('default', ['copy'], function(){
    gulp.start('usemin');
});
<!--HTML-->
<head>
    <!--build:jsclasses/core.min.js-->
    <script src="classes/consulta.js"></script>
    <script src="classes/paciente.js"></script>
    <!--endbuild-->
</head>
<body>  

</body>
8 respostas
por Wanderson Macêdo
| 3964.9k xp | 8086 posts
Instrutor Desenvolvedor

Oi Paulo, até onde vi, há uma discussão sobre remoção da função start do gulp. Me parece que vocês está utilizando o agrupador default de forma incorreta. Todas as tasks do default só precisam ser listadas no array. Tenta fazer isso pra ver se resolve?

por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Seu comentário do metadata não esta correto. Você colocou <!--build... tem que existir um espaço. Mas cuidado, apenas um! Se colocar dois não vai funcionar. Corrigindo:

<head>
    <!-- build:jsclasses/core.min.js -->
    <script src="classes/consulta.js"></script>
    <script src="classes/paciente.js"></script>
    <!-- endbuild -->
</head>

Veja que há espaço na abertura e fechamento. Como o metadata foi ignorada, nada foi gerado.

por Paulo Ricardo
| 79.4k xp | 6 posts

Wanderson,

Eu tentei colocar as tasks do default no array e não foi gerado o arquivo minificado utilizando esta task. Mesmo sem o espaço na metatag, ao executar a tarefa usemin isoladamente, o arquivo minificado é gerado.

Realmente não sei o que fazer :P

por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Seu metada ainda esta errado. Quando falei do espaço não vi que você fez assim também :

build:jsclasses

Cadê espaço?

build:js classes

Dê uma conferida na metadata.

Veja como faço no vídeo e na explicação.

por Paulo Ricardo
| 79.4k xp | 6 posts

Depois de realizar alguns testes, conferir de todas as formas possíveis o metadata, realizei o seguinte teste:

var gulp = require('gulp'),imagemin = require('gulp-imagemin'), clean = require('gulp-clean'),
concat = require('gulp-concat'),uglify = require('gulp-uglify'),usemin = require('gulp-usemin');

gulp.task('default', ['copy'], function(){
    setTimeout(function(){gulp.start('usemin')}, 1000);
});

gulp.task('copy', ['clean'], function() {
    gulp.src('src/**/*')
    .pipe(gulp.dest('dist'));
});

gulp.task('build-img', function(){
    gulp.src('dist/img/*').pipe(imagemin()).pipe(gulp.dest('dist/img'));
});

// a nova tarefa clean
gulp.task('clean', function() {
     var stream = gulp.src('dist/')
        .pipe(clean());
    return stream;
});
gulp.task('usemin', function() {
  return gulp.src('dist/**/*.html')
    .pipe(usemin({
      js: [uglify]
    }))
    .pipe(gulp.dest('dist'));
});

Coloquei um timeout na execução da task usemin e a concatenação foi executada normalmente. Mesmo com a task copy sendo inicializada e finalizada antes da execução do usemin, por algum motivo o arquivo index.html dentro da pasta dist não estava sendo identificado ao executar o usemin pois ao realizar a seguinte alteração:

gulp.task('usemin', function() {
  return gulp.src('src/**/*.html')
    .pipe(usemin({
      js: [uglify]
    }))
    .pipe(gulp.dest('dist'));
});

O arquivo concatenado era gerado. Este tipo de comportamento é esperado?

Vou copiar também o arquivo html que está sendo utilizado para teste:

<head>
    <!-- build:js classes/index.min.js -->
    <script src="classes/consulta.js"></script>
    <script src="classes/paciente.js"></script>
    <!-- endbuild -->
</head>
<body>  

</body>
solução!
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Veja sua task copy. Ela não esta correta. Você não usou o return. Por isso as coisas estão se atropelando. No vídeo eu mostro a importância do return, inclusive usamos no clean. O return é importante caso você queira que a task termine antes da próxima ser executada porque o padrão do gulp é fazer tudo em paralelo.

Paulo, desfaça a sua última alteração e corrija a task copy que tudo funcionará, pode ficar tranquilo.

por Paulo Ricardo
| 79.4k xp | 6 posts

Putz! Passou totalmente despercebido! Funcionou sem problema nenhum! Valeu professor! Agora posso continuar o curso tranquilo hehehehe

por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Eu foquei muito no metadata e não vi que faltava o return.

Mas o ponto positivo é ver que o metadata com erro é ignorado e que o return faz com que a task executada termine antes da próxima ser executada.

Sucesso e bom estudo Paulo!