javascript - gulp watch with babel then pm2 restart - Stack Overflow

\Hey guys I'm totally stuck with this one.

Basically I want on my local dev to be able to have gulp watch my src js files files and transform them with babel and output them to my dist folder and then after that's done have pm2 restart node to load the latest changes.

The problem I'm having is I can't for the life of me figure out how to add a callback to watch so that the call to restart pm2 only happens after babel has done its magic transforming the files.

var gulp = require("gulp");
var babel = require("gulp-babel");
var pm2 = require("pm2");
var watch = require("gulp-watch");
var plumber = require("gulp-plumber");

var SRC = "src/**/*js";
var DIST = "dist/";

function restartPM2() {
  //restart pm2 code in here
}

gulp.task("default", function () {
  return gulp.src(SRC)
    .pipe(watch(SRC))
    .pipe(plumber())
    .pipe(babel())
    .pipe(plumber.stop())
    .pipe(gulp.dest(DIST));
    // somewhere in here need a call back after babel has transformed  
    // the code and saved it to dist/ to then call restartPM2
});

\Hey guys I'm totally stuck with this one.

Basically I want on my local dev to be able to have gulp watch my src js files files and transform them with babel and output them to my dist folder and then after that's done have pm2 restart node to load the latest changes.

The problem I'm having is I can't for the life of me figure out how to add a callback to watch so that the call to restart pm2 only happens after babel has done its magic transforming the files.

var gulp = require("gulp");
var babel = require("gulp-babel");
var pm2 = require("pm2");
var watch = require("gulp-watch");
var plumber = require("gulp-plumber");

var SRC = "src/**/*js";
var DIST = "dist/";

function restartPM2() {
  //restart pm2 code in here
}

gulp.task("default", function () {
  return gulp.src(SRC)
    .pipe(watch(SRC))
    .pipe(plumber())
    .pipe(babel())
    .pipe(plumber.stop())
    .pipe(gulp.dest(DIST));
    // somewhere in here need a call back after babel has transformed  
    // the code and saved it to dist/ to then call restartPM2
});

Any help would be greatly appreciated!

• javascript
• gulp
• watch
• pm2
• babeljs

Share Improve this question Follow edited Mar 10, 2015 at 7:15 Klaster_1 Нет войне 12.2k99 gold badges6464 silver badges7575 bronze badges asked Mar 6, 2015 at 10:51 OkeydokeOkeydoke 1,3571212 silver badges2424 bronze badges 3

• can't you just make pm2 watch the build folder? – David Fregoli Commented Mar 6, 2015 at 10:54
• I originally did that but I was getting a crazy amount of restarts when gulp was copying files into the directory – Okeydoke Commented Mar 6, 2015 at 10:55
• Maybe a bit late, but what works for me for nodemon is the -d (debounce, delay), perhaps there is such an option for pm2? – Zlatko Commented Jul 28, 2015 at 8:00

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

First, you're not watching the right way. Then, you should keep things separated. That's how I'd do:

var paths = {
  babel: './somedir'
}

//basic babel task
gulp.task('babel', function() {
  return gulp.src(paths.babel)
  .pipe(babel())
  .pipe(gulp.dest('./'))
})

//see below for some links about programmatic pm2
gulp.task('pm2', function(cb) {
  pm2.connect(function() {
    pm2.restart('echo', function() { 
      return cb()
    })
  })
})

gulp.task('default', ['babel']) //I don't restart pm2 with the default task but you could

//the watch task
gulp.task('watch', function() {
  //their could be more watchers here ofc
  gulp.watch(paths.babel, ['babel', 'pm2'])
})

If you launch gulp watch, it'll watch the paths.babel and, on change, execute both tasks (babel, pm2). If you only execute gulp (or gulp babel in this example), it'll launch the appropriate task. You'd be able to launch gulp pm2 too.

Ressources:

• pm2 programmatic doc
• gulp doc