2

Este é meu Gulpfile atual e como estou utilizando-o muito, gostaria de criar um GULP WATCH que realizasse os uglify sempre que os arquivos fossem alterados.

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var pump = require('pump');

gulp.task('compress', function (cb) {
  console.log("Compressing the Source");
  pump([
        gulp.src('source/*.js'),
        uglify(),
        gulp.dest('assets/js')
    ]
  );
  console.log("Source Compressed");
  console.log("Compressing AngularJS");
  pump([
        gulp.src('bower_components/angular/angular.js'),
        uglify(),
        gulp.dest('assets/js')
    ]
  );
  console.log("Compressing AngularJS Animate");
  pump([
        gulp.src('bower_components/angular-animate/angular-animate.js'),
        uglify(),
        gulp.dest('assets/js')
    ],
    cb
  );
});

Dicas para melhorar o processo também serão bem-vindas.

3
  • Não lembro de cabeça os esquemas do gulp, mas tenta criar uma nova task com o(s) watch(ers), tipo: gulp.task('watch', function() { gulp.watch('',['compress'])} ) qualquer coisa complemento, ou vejo a forma mais correta chegando em casa.
    – Pliavi
    Commented 8/02/2017 às 18:36
  • Vou dar umas testadas mas agradeço se puder complementar sim Commented 8/02/2017 às 18:38
  • hm, nunca usei o Bower, mas ele já não puxa os arquivos certos e minificados? o que você quer deles é só tirar da pasta do bower e jogar na assets/js né?
    – Pliavi
    Commented 9/02/2017 às 2:08

1 Resposta 1

4

Como já dito no comentário, para criar o "watch" é necessário apenas criar uma nova task contendo um gulp.watch das tasks que você quer que sejam executadas ao modificar o arquivo:

gulp.task('watch', () => gulp.watch(
    ['caminho/do_arquivo.js', 'outro_caminho.js'], 
    ['task1', 'task2' ]
))

Percebi que todos os seus arquivos javascript estão indo para o mesmo lugar assets/js, então seria uma boa criar apenas uma única task para esses arquivos e usar uma array no .src, pois fica mais fácil caso queira colocar um sass ou algo do tipo depois.
E como o caminho deve ser repetido no watch, uma outra dica é usar uma variável com os caminhos ao invés de digitá-las 2 vezes.

Resultando em:

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var pump = require('pump');

var jspaths = [
    'source/*.js',
    'bower_components/angular/angular.js',
    'bower_components/angular-animate/angular-animate.js',
    // Se quiser todos os arquivos dentro de "bower_components" (não recomendo) pode usar
    // 'bower_components/**/*.js',
];

gulp.task('jscompress', (cb) => {
    pump([
        gulp.src(jspaths),
        uglify(),
        gulp.dest('assets/js')
    ], cb);
});


gulp.task('watch', () => gulp.watch(jspaths, [
    'jscompress'
]))

Aí é só dar gulp watch no console e ser feliz! xD

Ou você pode mudar o nome da task gulp.task('watch',... por gulp.task('default',... e apenas digitar gulp no console.

Uma observação foi que removi os logs, eles são desnecessários considerando que o próprio gulp informará quais task iniciaram e terminaram.

1
  • Agradeço pela resposta mais que completa, além da melhoria que tu propôs, um muitíssimo obrigado! Commented 9/02/2017 às 10:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .