Search code examples
javascriptgulpecmascript-6babeljs

gulp and babel with gulp-live-server

I'm trying to write an express server with ES6 and I'm using Babel to do the transpiling, but I'm having trouble getting it to work with gulp-live-server, as I can't make it restart properly when I change my files.

Currently I have the following:

// gulpfile.babel.js

import gulp from 'gulp';
import gls from 'gulp-live-server';
import babel from 'gulp-babel';

gulp.task('transpile', ['clean:server'], () => {
  gulp.src(['server/**/*.js'])
  .pipe(babel())
  .pipe(gulp.dest('dist'));
});

gulp.task('server', ['transpile'], () => {
  var server = gls.new('dist/app.js');
  server.start();      
  gulp.watch(['server/**/*.js'], ['transpile']);
  gulp.watch('dist/app.js', server.start.bind(server)); //error
});

But it's not working, this code returns a Gaze error:

internal/child_process.js:274
  var err = this._handle.spawn(options);
                         ^

TypeError: Bad argument
    at TypeError (native)
    at ChildProcess.spawn (internal/child_process.js:274:26)
    at exports.spawn (child_process.js:339:9)
    at Object.exports.start (/Users/oni/Documents/Projects/meanimo/node_modules/gulp-live-server/index.js:134:19)
    at Gaze.<anonymous> (/Users/oni/Documents/Projects/meanimo/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/index.js:18:14)
    at emitTwo (events.js:87:13)
    at Gaze.emit (events.js:172:7)
    at Gaze.emit (/Users/oni/Documents/Projects/meanimo/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:129:32)
    at /Users/oni/Documents/Projects/meanimo/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:415:16
    at StatWatcher._pollers.(anonymous function) (/Users/oni/Documents/Projects/meanimo/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:326:7)

The error has to do with the callback being passed to watch: server.start.bind(server), although that comes straight from the gls documentation...

I don't see my changes reflected and I can't seem to find any documentation on using gls with transpilers.

Please help.

Solution

  • OK I've fixed it and I'll share for posterity: for some reason, you have to wrap the server restart function on another function and execute it yourself. I think is has to do with the way Gaze is wrapping the subprocesses.

    gulp.watch('dist/app.js', () => server.start());

    That will do the trick.