Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

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

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

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?

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.

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

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.

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!

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.

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

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!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software