How can I restart Gulp with every Gulpfile change?

Question

I am developing a Gulpfile . Is it possible to restart it as soon as it changes? I am developing it in CoffeeScript. Can Gulp watch Gulpfile.coffee to reboot while saving changes?

Answer 1

You can create a task that will be gulp.watch for gulpfile.js , and just 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 to accept the "main task" to run as soon as we need to restart. Therefore, to run this, you must call:

 gulp auto-reload --task watching-task 

And to check, call either touch gulpfile.js or touch a.css to view the logs.

Answer 2

I created a gulper which is gulp.js cli wrapper to restart gulp when changing the gulpfile.

You can simply replace gulp with gulper.

 $ gulper <task-name> 

Answer 3

I use a small shell script for this. This also works on Windows.

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 4

I was getting a bunch of EADDRINUSE errors with the solution in Caio Cunha's answer. My gulpfile opens a local web server with connect and LiveReload . It seems that the new gulp process coexists with the old one for a short while before the old process is killed, so the ports are still used by the "soon to die" process.

Here's a similar solution that addresses the issue of coexistence (mostly on this ):

 var gulp = require('gulp'); var spawn = require('child_process').spawn; gulp.task('gulp-reload', function() { spawn('gulp', ['watch'], {stdio: 'inherit'}); process.exit(); }); gulp.task('watch', function() { gulp.watch('gulpfile.js', ['gulp-reload']); }); 

This works pretty well, but it has one pretty serious side effect: the last gulp process is disconnected from the terminal. Therefore, when the gulp watch shuts down, the gulp orphan process is still running. I could not get around this problem, an additional gulp process can be killed manually or just save a syntax error until gulpfile.js .

Answer 5

Another solution for this is to update require.cache .

 var gulp = require('gulp'); var __filenameTasks = ['lint', 'css', 'jade']; var watcher = gulp.watch(__filename).once('change', function(){ watcher.end(); // we haven't re-required the file yet // so is the old watcher delete require.cache[__filename]; require(__filename); process.nextTick(function(){ gulp.start(__filenameTasks); }); }); 

Answer 6

I know this is a very old question, but this is the main comment on Google, so it’s still very relevant.

Here is an easier way if your gulpfile.js source is in a different directory than the one you are using. (This is important!) It uses the gulp gulp-newer and gulp-data modules.

 var gulp = require('gulp' ) , data = require('gulp-data' ) , newer = require('gulp-newer' ) , child_process = require('child_process') ; gulp.task( 'gulpfile.js' , function() { return gulp.src( 'sources/gulpfile.js' ) // source .pipe( newer( '.' ) ) // check .pipe( gulp.dest( '.' ) ) // write .pipe( data( function(file) { // reboot console.log('gulpfile.js changed! Restarting gulp...') ; var t , args = process.argv ; while ( args.shift().substr(-4) !== 'gulp' ) { t=args; } child_process.spawn( 'gulp' , args , { stdio: 'inherit' } ) ; return process.exit() ; } ) ) ; } ) ; 

It works as follows:

• Trick 1: gulp -newer only runs the following channels if the source file is newer than the current one. Thus, we are sure that there is no reload cycle.
• The while loop removes everything before and including the gulp command from the command line, so we can pass any arguments.
• child_process.spawn generates a new gulp process, input output, and an error for the parent.
• Trick 2: process.exit kills the current process. However, the process will wait until it completes the child process.

There are many other ways to insert a restart function into pipes. I just use gulp -data in each of my gulpfiles. Feel free to comment on your decision. :)

Answer 7

Here's another version of the @CaioToOn reboot code, which is more consistent with the normal Gulp task procedure. It is also independent of yargs .

Require the appearance and initialization of a process variable ( yargs not required):

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

The default task for Gulp will be the creator:

 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 task for viewing was probably your default Gulp job. Rename it to watch and add gulp.watch() to view your gulpfile and run the default task with the changes:

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

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

Answer 8

try this code (win32 platform only)

 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 9

I was dealing with the same problem, and the solution in my case was actually very simple. Two things.

• npm install nodemon -g (or locally if you prefer)
• run with cmd or create a script in the following packages: "dev": "nodemon --watch gulpfile.js --exec gulp"
• Just type npm run dev

- viewing indicates the file to be monitored, --exec says that executing the next in line and gulp is your default task. Just pass an argument if you want a custom task.

Hope this helps.

EDIT: Make it a fantasy;) Now that the first part should achieve what you need, in my setup I needed to add a little more to make it a real user. I wanted to

• First open the page.
• Look for changes in gulpfile.js and restart gulp if any
• Gulp it should monitor files, rebuild and reboot

If you do only what I said in the first part, it will open the page every time. To fix this, create a gulp task that will open the page. Like this:

 gulp.task('open', function(){ return gulp .src(config.buildDest + '/index.html') .pipe(plugins.open({ uri: config.url })); 

Then in my main tasks I:

 gulp.task('default', ['dev-open']); gulp.task('dev-open', function(done){ plugins.sequence('build', 'connect', 'open', 'watch', done); }); gulp.task('dev', function(done){ plugins.sequence('build', 'connect', 'watch', done); }); 

Then change your npm scripts to

 "dev": "gulp open & nodemon --watch gulpfile.js --watch webpack.config.js --exec gulp dev" 

Gives you exactly what you want. First open the page, and then just continue the live reboot. Btw for livereload I use the one that comes with the connection, which always uses the same port. Hope it works for you, enjoy!

Answer 10

Install nodemon globally npm i -g nodemon

And add alias gulp='nodemon --watch gulpfile.js --watch gulpfile.babel.js --quiet --exitcrash --exec gulp' to your .bashrc (or .bash_profile or .profile)

This will keep track of the gulpfile.js and gulpfile.babel.js files (see google ) modifies

ps this can be useful for endless tasks (e.g. watch, ...), but not for tasks with one run. I mean, it uses a clock, so it will continue the process even after completing the gulp task .;)

Answer 11

A good Windows solution that also works well with the Visual Studio task leader.

 /// <binding ProjectOpened='auto-watchdog' /> const spawn = require('child-proc').spawn, configPaths = ['Gulpconfig.js', 'bundleconfig.js']; gulp.task('watchdog', function () { // TODO: add other watches here gulp.watch(configPaths, function () { process.exit(0); }); }); gulp.task('auto-watchdog', function () { let p = null; gulp.watch(configPaths, spawnChildren); spawnChildren(); function spawnChildren() { const args = ['watchdog', '--color']; // kill previous spawned process if (p) { // You might want to trigger a build as well args.unshift('build'); setTimeout(function () { p.kill(); }, 1000); } // `spawn` a child `gulp` process linked to the parent `stdio` p = spawn('gulp', args, { stdio: 'inherit' }); } }); 

Major changes compared to other answers:

• Uses child-proc because child_process crashes on Windows.
• The controller disconnects from file changes because on Windows the gulp call is wrapped in a batch script. By killing the script package, it will not kill gulp, which will cause several hours to appear over time.
• Configure for change: Normally, modifying the gulpfile also ensures project recovery.

Answer 12

Here's a short version that is easy to understand, which you can set as the default task, so you just need to enter "gulp":

 gulp.task('watch', function() { const restartingGulpProcessCmd = 'while true; do gulp watch2 --colors; done;'; const restartingGulpProcess = require('child_process').exec(restartingGulpProcessCmd); restartingGulpProcess.stdout.pipe(process.stdout); restartingGulpProcess.stderr.pipe(process.stderr); }); gulp.task('watch2', function() { gulp.watch(['config/**.js', 'webpack.config.js', './gulpfile.js'], () => { console.log('Config file changed. Quitting so gulp can be restarted.'); process.exit(); }); // Add your other watch and build commands here } gulp.task('default', ['watch']); 

Answer 13

Install gulp -restart

npm install gulp-restart

This code will work for you.

var gulp = require('gulp'); var restart = require('gulp-restart');

gulp.task('watch', function() { gulp.watch(['gulpfile.js'], restart); })

it will restart gulp where you make changes to the gulpfile.js file