Gulp

Gulp can complement webpack by adding additional workflows to your project. Webpack can be used to package your bundles, gulp can be used to run additional things before or after the build.

https://forestry.io/blog/gulp-and-webpack-best-of-both-worlds/

Using node we could run our webpack command and build commands seperately in the workflow. We could use gulp to use one command to do both. We can also use gulp to build the search index of an app as part of this workflow.

ES6 in Gulp

Gulp is a command-line task runner for node. This means that any javascript that is valid in node is valid in gulp (including anything you import). Node doesn't support ES6 modules (without using babel) so you have to use require and exports. You can freely use arrow functions and any other node compatible javascript.

https://gulpjs.com/docs/en/getting-started/javascript-and-gulpfiles/

If you want full ES6 syntax in gulp you should create a gulpfile.babel.js and install the @babel/register module.

If you just want the import/export syntax create a gulpfile.esm.js and install the esm module.

Creating a gulpfile

yarn add gulp

Create a gulpfile.js in the root of your project next to the package.json file.

Alternatively if you want to split your gulp tasks out into seperate modules you should create a ./gulpfile.js directory and an index.js file inside. This will be treat as a normal gulpfile.js.

functions

Create functions as normal in the gulpfile. These functions should take cb as a parameter and you should end the function with cb() to let gulp know the function has finished.

export

Your gulpfile should export either a gulp.series or gulp.parallel (or just the function itself). series will run one after the other and parallel will run in any order.

An example gulpfile that is importing a module and running it:

const { run } = require("./build-lunrjs-index");
const gulp = require("gulp");

function buildSearch(cb) {
  run();
  cb();
}

module.exports = {
  buildSearch: gulp.parallel(buildSearch),
};

package.json

Your package.json file can create an entry under the scripts key:

"scripts": {
"buildSearch": "gulp buildSearch"
}

The gulp command should be followed by the name of the export you want to run.

You can then run the command using npm or yarn: yarn buildSearch.

webpack

You can integrate gulp with webpack, allowing gulp to run your webpack build. There are a few ways to do this, one way using webpack-stream is here: https://cecilphillip.com/adding-webpack-to-your-gulp-tasks/.

Alternatively, if you don't want to control webpack through gulp (pipe in a different destination or alter the workflow) and just want to run it as if you were running webpack directly you can simply import webpack and your webpack.prod.js file into gulp.

The following gulpfile will run a webpack build (remember to add to package.json as a script):

const webpack = require("webpack");
const webpackConfig = require("./webpack.prod");

function buildTheme(cb) {
  return new Promise((resolve, reject) => {
    webpack(webpackConfig, (err, stats) => {
      if (err) {
        return reject(err);
      }
      if (stats.hasErrors()) {
        return reject(new Error(stats.compilation.errors.join("\n")));
      }
      resolve();
    });
  });
}

module.exports = {
  buildTheme: buildTheme,
};

3.4 KiB Raw Blame History