Gulp Watch Customizado

Asked

Viewed 178 times

2

This is my current Gulpfile and as I am using it a lot, I would like to create a GULP WATCH that performs the uglify whenever the files are changed.

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
  );
});

Tips to improve the process will also be welcome.

javascript gulp

  • I can’t remember the Gulp schematics in my head, but try to create a new task with the watch(s) (ers), like: gulp.task('watch', function() { gulp.watch('',['compress'])} ) anything complement, or I see the most correct way coming home.

  • I’ll give you some tests, but I’d appreciate it if you could add

  • hm, I’ve never used Bower, but he doesn’t pull the right, minified files anymore? what you want from them is to just take them out of the Bower folder and play at assets/js right?

1 answer

4


As already stated in the comment, to create the "watch" it is only necessary to create a new task containing a gulp.watch of tasks that you want to run when modifying the file:

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

I noticed that all your javascript files are going to the same place assets/js, then it would be a good thing to create just a single task for these files and use a array in the .src, 'cause it gets easier if you want to put one Sass or something like that after.
And how the path must be repeated in the watch, another tip is to use a variable with the paths instead of typing them 2 times.

Resulting in:

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'
]))

Then you just give gulp watch in the console and be happy! xD

Or you can change the name of the task gulp.task('watch',... for gulp.task('default',... and just type gulp in the console.

One observation was that I removed the logs, they are unnecessary considering that Gulp itself will inform which task started and finished.

  • I would like to thank you for your reply, in addition to the improvement you have proposed, and thank you very much!

Browser other questions tagged javascript gulp

You are not signed in. Login or sign up in order to post.