GulpJS Task automatically minify when file changes

Question

I need to minify automatically all files when some change occurs in my js or less files.

I have some Tasks for Minify my less files and js files called 'styles','services' and 'controlles'.

For minify this files i just execute this task and everything forks fine:

gulp.task('minify', ['styles', 'services','controllers']);

Instead run this task manually i want to do automatic in development mode. How i can do this?

Answer 1

What you need to do is run your project with nodemon

nodemon = require('gulp-nodemon');

Nodemon runs your code and automatically restart when your code changes.

So, for automatic minification use this Gulp Task:

gulp.task('watch', function() {
    gulp.watch(pathLess, ['styles']);
    gulp.watch(pathJs.services, ['services']);
    gulp.watch(pathJs.controllers, ['controllers']);
});

And then setup nodemon for run your project

gulp.task('nodemon', function () {
    nodemon({ script: 'server.js'})
        .on('start', ['watch'], function () {
            console.log('start!');
        })
       .on('change', ['watch'], function () {
            console.log('change!');
        })
        .on('restart', function () {
            console.log('restarted!');
       });
})

Now if you type in prompt : gulp nodemon your server.js will run, and you will be able to develop with automatic minification.

I hope it helps