CODEWITHSUNDEEP
javascriptnode.jsgulppackage.json
SoEzPz
SoEzPz

Reputation: 15922

How to start Gulp watch task when I type npm start

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.

Upvotes: 13

Views: 23919

Answers (4)

nashcheez
nashcheez

Reputation: 5183

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\" "
}

Upvotes: 11

JoshuaDavid
JoshuaDavid

Reputation: 9549

One best practice to consider is to use nodemon and gulp-nodemon and then like the accepted answer, trigger the gulp script from npm with npm start. It's blazing fast and you get the node server restarted on file changes. For example:

gulpfile.js

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

...

var nodemonOptions = {
    script: 'bin/www.js',
    ext: 'js',
    env: { 'NODE_ENV': 'development' },
    verbose: false,
    ignore: [],
    watch: ['bin/*', 'routes/*', 'app.js']
};

gulp.task('start', function () {
    nodemon(nodemonOptions)
        .on('restart', function () {
            console.log('restarted!')
        });
});

package.json

{
    ...

    "scripts": {
        "start": "gulp start"
    },
    "devDependencies": {
        "gulp": "^3.9.0",
        "gulp-nodemon": "^2.0.4"
    }
}

Upvotes: 6

Ben
Ben

Reputation: 10104

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"
}

Upvotes: 20

Ben
Ben

Reputation: 10156

I have something like this in one of my projects. Note that it will background both processes - you can use ps to get the ID and stop it with kill <pid>.

"scripts": {
    "start": "{ gulp watch & node server.js & }"
}

To disable logging, too:

"scripts": {
    "start": "{ gulp watch --silent & node server.js & }"
}

Upvotes: 7

Related Questions