David Demaree David Demaree - 2 months ago 13
Node.js Question

Best way to run Node server + compile frontend assets?

I'm new to Node development, working on a little stats app with an Express API backend and React frontend. I'm struggling to wire up a dev startup script that would watch for changes in my files and


  • Restart the Node server

  • Run tests

  • Build the React frontend JS, using webpack

  • Compile SCSS



I have Gulp tasks that work for each of these individually, but I don't know what's the best way to run them all in parallel?

Answer

You can add multiple gulp tasks to a single gulp task as dependent tasks. Dependent tasks are defined by an array of gulp task names. The tasks are run in parallel.

gulp.task('webpack', () => { 
  // build webpack 
});

gulp.task('test', () => { 
  // run tests 
});

gulp.task('scss', () => { 
  // compile scss 
});

gulp.task('server', () => { 
  // run and restart server 
});

// Runs all the tasks in parallel
gulp.task('run', [ 'webpack', 'scss', 'test', 'server' ]);

If you have a task that is dependent on other tasks, for instance you may want to build your webpack and compile your scss before starting your server, you can add them on the individual task as dependencies and that task will not run until the dependent tasks have completed.

gulp.task('webpack', (done) => { 
  // build webpack 

  return done();  // signals completion of 'webpack' task to gulp
});

gulp.task('test', () => { 
  // run tests 
});

gulp.task('scss', (done) => { 
  // compile scss 

  return done(); // signals completion of 'scss' task to gulp
});

// The actual callback for the 'server' task won't execute until
// the 'webpack' and 'scss' tasks have completed
gulp.task('server', ['webpack', 'scss'], () => { 
  // run and restart server 
});

gulp.task('run', ['test', 'server']);