How to start Gulp watch task when I type npm start

Question

I have a gulp.js file that includes:

gulp.task('default', ['watch']);

Which starts up the watch task

gulp.task('watch', function(){
  gulp.watch(productionScripts, ['autoConcat']);
});

Then on any saved changes to files in productionScripts, the watch task will concat the files.

What I would like to do, is in my package.json, I would like to spool up this watch when I type npm start (this already starts my node server).

package.json

    "start": "node server.js",

UPDATE--------

Ben(b3nj4m.com), I tried what you stated. The watch and server start up. However, everything runs twice (probably due to the editor, not related), but I do lose my server log when I start it up with gulp.

[15:31:18] Starting 'autoConcat'...
[15:31:18] Finished 'autoConcat' after 147 ms
[15:31:19] Starting 'autoConcat'...
[15:31:19] Finished 'autoConcat' after 138 ms
[15:31:20] Starting 'autoConcat'...
[15:31:20] Finished 'autoConcat' after 127 ms
[15:31:23] Starting 'autoConcat'...

It's like there is a loop between the server restarting on a change, and the concatenated file changing.

Answer 1

You could concatenate multiple tasks in your start in package.json using the package concurrently as such:

{
  "start": "concurrent \"node server.js\" \"gulp\" "
}

And run npm start from your terminal. This would execute all statements within start.

For references: https://www.npmjs.com/package/concurrently

EDIT:

As pointed out by @Josh in the comments, the CLI name now matches the package name. Hence, you could write the script as:

{
   "start": "concurrently \"node server.js\" \"gulp\" "
}

Answer 2

You could run your server from your gulpfile:

var child = require('child_process');
var fs = require('fs');

gulp.task('default', ['server', 'watch']);

gulp.task('server', function() {
  var server = child.spawn('node', ['server.js']);
  var log = fs.createWriteStream('server.log', {flags: 'a'});
  server.stdout.pipe(log);
  server.stderr.pipe(log);
});

gulp.task('watch', function(){
  gulp.watch(productionScripts, ['autoConcat']);
});

Then change your npm start definition to look like:

"scripts": {
  "start": "gulp"
}