Using Webpack with Gulp

Datetime:2016-08-23 00:26:46          Topic: Webpack  Gulp           Share

If you’re a front-end developer, you are probably using a task runner like Grunt or Gulp. You may even be going the extra mile by usingwebpack in your workflow. But what if you want to integrate your webpack job into your gulpfile.js and add it as a task?

Why bother with a task runner?

Webpack can potentially replace older workflows, either by performing the same functions natively or integrating minification plugins into its configuration . If you are trying to minifiy static assets, for instance, webpack will suffice – there’s no need to incorporate Gulp into the mix. However, I often find myself needing to do other operations outside the realm of webpack’s capabilities (e.g. deployment, importing data). So using a task runner like Gulp not only makes the tool set simpler, but better documented too!

<rant title=”why not use gulp-webpack module?”>

Why not just use the gulp-webpack module? For one, it interprets the configuration file differently than webpack does. In addition, it’s not very flexible. I had a hard time using gulp-webpack to watch my files in a granular fashion without processing all the files every time a change was made.

So instead of describing gulp-webpack, this post focuses on using core webpack in conjunction with your gulpfile.js.

Creating your webpack task in gulp

Gulp is run in node, so we have the npm repositories at our disposal. Let’s start by including a module that allows us to execute bash commands in our tasks (it already exists in our node installation!).

var exec = require('child_process').exec;

Now drop this into your gulpfile.js:

// Generate minified bundle
gulp.task('webpack', function(cb) {
  exec('webpack', function (err, stdout, stderr) {
 console.log(stdout);
 console.log(stderr);
 cb(err);
  });
});

This should be enough to tap into webpack, as well as get the resulting output into the console for verbose feedback. Run the specific example above by executing:

gulpwebpack

Neat, huh?

Rigging up webpack –watch

Now that the single compile command is running, we can imitate the same code pattern to get webpack –watch to work. There’s only one problem: it won’t work as elegantly as we expected. Why?

Webpack –watch does not end unless you force the process to quit (on your Mac/PC, it’s ctrl + c). Instead, it streams its output. We cannot use exec here, so we will have to spawn a process and read its stream for useful output instead.

That’s where node’s native spawn module comes in.

var spawn = require('child_process').spawn;

Now rig up your watch command like this:

gulp.task('webpack-watch', (cb) => {
  const webpack_watch = spawn('webpack', ['--watch']);
 
  webpack_watch.stdout.on('data', (data) => {
    console.log(`stdout: ${data}`);
  });
 
  webpack_watch.stderr.on('data', (data) => {
    console.log(`stderr: ${data}`);
  });
 
  webpack_watch.on('close', (code) => {
    console.log(`child process exited with code ${code}`);
  });
});

Give it a shot! You should be seeing feedback whenever you make a change to your entries, and you should be able to kill the process as usual.

Bonus: This also works well in conjunction with gulp-watch.

Bonus Colors!

Like me, you may notice that your output is not colorful like when you run the commands natively. The flag to trigger that is –color, which you can easily do in both tasks.

gulp.task('webpack --color', function(cb) {
...
 
...
const webpack_watch = spawn('webpack', ['--watch', '--color']);

Questions? Comments? Leave them in the comments below!





About List