Skip to content

Commit

Permalink
Docs: Refactor Rollup recipe
Browse files Browse the repository at this point in the history
Nothing extra is needed to use Rollup with gulp, so this refactors the
recipe to use Rollup's JavaScript API directly.
  • Loading branch information
silvenon committed Oct 18, 2020
1 parent 131b702 commit 39097d2
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 64 deletions.
2 changes: 1 addition & 1 deletion docs/recipes/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,5 @@
* [Output both a minified and non-minified version](minified-and-non-minified.md)
* [Templating with Swig and YAML front-matter](templating-with-swig-and-yaml-front-matter.md)
* [Run Grunt Tasks from Gulp](run-grunt-tasks-from-gulp.md)
* [Rollup with rollup-stream](rollup-with-rollup-stream.md)
* [Rollup](rollup.md)
* [Run gulp task via cron job](cron-task.md)
63 changes: 0 additions & 63 deletions docs/recipes/rollup-with-rollup-stream.md

This file was deleted.

71 changes: 71 additions & 0 deletions docs/recipes/rollup.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
# Rollup

Rollup is a module bundler for JavaScript, and, while there are packages like [`gulp-rollup`] and [`rollup-stream`](https://www.npmjs.com/package/rollup-stream), which aim to help use Rollup with gulp, we can also use `rollup` directly.

Let's say that we require the following features:

- being able to use Node modules
- interoperability between CommonJS and ES6 modules
- Babel
- Uglify in production

To achieve this, we need to install the Rollup and its plugins:

```sh
npm install --save-dev gulp rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-babel @babel/core @babel/preset-env rollup-plugin-uglify
```

Create a basic `babel.config.js`:

```js
module.exports = {
presets: ["@babel/preset-env"],
};
```

Use [Rollup's JavaScript API](https://rollupjs.org/guide/en/#javascript-api) to create tasks for compiling and recompiling:

```js
const rollup = require("rollup");
const nodeResolve = require("@rollup/plugin-node-resolve").default;
const commonJs = require("@rollup/plugin-commonjs");
const babel = require("@rollup/plugin-babel").default;
const uglify = require("rollup-plugin-uglify").uglify;

const isProd = process.env.NODE_ENV === "production";

const inputOptions = {
input: "scripts/index.js",
plugins: [
nodeResolve(),
commonJs(),
babel({ babelHelpers: "bundled" }),
...(isProd ? [uglify()] : []),
],
};

const outputOptions = {
file: `dist/script.js`,
format: "iife",
sourcemap: !isProd,
};

async function compileScripts() {
const bundle = await rollup.rollup(inputOptions);
await bundle.write(outputOptions);
}

function compileAndWatchScripts() {
// this function already creates a build initially, hence the name
// of the task, so you don't need to run "compileScripts" first
const watcher = rollup.watch({
...inputOptions,
output: outputOptions,
});
watcher.on("event", (event) => {
if (event.code === "END") {
console.log("Compiled scripts");
}
});
}
```

0 comments on commit 39097d2

Please sign in to comment.