How can Gulp be restarted upon each Gulpfile chang

Question

I am developing a Gulpfile. Can it be made to restart as soon as it changes? I am developing it in CoffeeScript. Can Gulp watch Gulpfile.coffee in order to restart when changes are saved?

Answer 1

I created gulper that is gulp.js cli wrapper to restart gulp on gulpfile change.

You can simply replace gulp with gulper.

$ gulper <task-name>

Answer 2

Install nodemon globally: npm i -g nodemon

And add in your .bashrc (or .bash_profile or .profile) an alias:

alias gulp='nodemon --watch gulpfile.js --watch gulpfile.babel.js --quiet --exitcrash --exec gulp'

This will watch for file gulpfile.js and gulpfile.babel.js changes. (see Google)

P.S. This can be helpful for endless tasks (like watch) but not for single run tasks. I mean it uses watch so it will continue process even after gulp task is done. ;)

Answer 3

try this code (only win32 platform)

gulp.task('default', ['less', 'scripts', 'watch'], function(){
    gulp.watch('./gulpfile.js').once('change' ,function(){
        var p;
        var childProcess = require('child_process');
        if(process.platform === 'win32'){
            if(p){
                childProcess.exec('taskkill /PID' + p.id + ' /T /F', function(){});
                p.kill();
            }else{
                p = childProcess.spawn(process.argv[0],[process.argv[1]],{stdio: 'inherit'});
            }
        }
    });
});

Answer 4

I use a small shell script for this purpose. This works on Windows as well.

Press Ctrl+C to stop the script.

// gulpfile.js
gulp.task('watch', function() {
    gulp.watch('gulpfile.js', process.exit);
});

Bash shell script:

# watch.sh
while true; do
    gulp watch;
done;

Windows version: watch.bat

@echo off
:label
cmd /c gulp watch
goto label

Answer 5

You can create a task that will gulp.watch for gulpfile.js and simply spawn another gulp child_process.

var gulp = require('gulp'),
    argv = require('yargs').argv, // for args parsing
    spawn = require('child_process').spawn;

gulp.task('log', function() {
  console.log('CSSs has been changed');
});

gulp.task('watching-task', function() {
  gulp.watch('*.css', ['log']);
});

gulp.task('auto-reload', function() {
  var p;

  gulp.watch('gulpfile.js', spawnChildren);
  spawnChildren();

  function spawnChildren(e) {
    // kill previous spawned process
    if(p) { p.kill(); }

    // `spawn` a child `gulp` process linked to the parent `stdio`
    p = spawn('gulp', [argv.task], {stdio: 'inherit'});
  }
});

I used yargs in order to accept the 'main task' to run once we need to restart. So in order to run this, you would call:

gulp auto-reload --task watching-task

And to test, call either touch gulpfile.js or touch a.css to see the logs.

Answer 6

Here's another version of @CaioToOn's reload code that is more in line with normal Gulp task procedure. It also does not depend on yargs.

Require spawn and initilaize the process variable (yargs is not needed):

var spawn = require('child_process').spawn;
var p;

The default gulp task will be the spawner:

gulp.task('default', function() {
  if(p) { p.kill(); }
  // Note: The 'watch' is the new name of your normally-default gulp task. Substitute if needed.
  p = spawn('gulp', ['watch'], {stdio: 'inherit'});
});

Your watch task was probably your default gulp task. Rename it to watch and add a gulp.watch()for watching your gulpfile and run the default task on changes:

gulp.task('watch', ['sass'], function () {
  gulp.watch("scss/*.scss", ['sass']);
  gulp.watch('gulpfile.js', ['default']);
});

Now, just run gulp and it will automatically reload if you change your gulpfile!