diff --git a/docs/recipes/README.md b/docs/recipes/README.md
index 3433f444c..d5004ec0c 100644
--- a/docs/recipes/README.md
+++ b/docs/recipes/README.md
@@ -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)
diff --git a/docs/recipes/rollup-with-rollup-stream.md b/docs/recipes/rollup-with-rollup-stream.md
deleted file mode 100644
index ef5dd4b4c..000000000
--- a/docs/recipes/rollup-with-rollup-stream.md
+++ /dev/null
@@ -1,63 +0,0 @@
-# Rollup with rollup-stream
-
-Like Browserify, [Rollup](https://rollupjs.org/) is a bundler and thus only fits naturally into gulp if it's at the start of the pipeline. Unlike Browserify, Rollup doesn't natively produce a stream as output and needs to be wrapped before it can take this position. [rollup-stream](https://github.com/Permutatrix/rollup-stream) does this for you, producing output just like that of Browserify's `bundle()` method—as a result, most of the Browserify recipes here will also work with rollup-stream.
-
-## Basic usage
-```js
-// npm install --save-dev gulp @rollup/stream@1 vinyl-source-stream
-var gulp = require('gulp');
-var rollup = require('rollup-stream');
-var source = require('vinyl-source-stream');
-
-gulp.task('rollup', function() {
-  return rollup({
-      input: './src/main.js'
-    })
-
-    // give the file the name you want to output with
-    .pipe(source('app.js'))
-
-    // and output to ./dist/app.js as normal.
-    .pipe(gulp.dest('./dist'));
-});
-```
-
-## Usage with sourcemaps
-```js
-// npm install --save-dev gulp @rollup/stream@1 gulp-sourcemaps vinyl-source-stream vinyl-buffer
-// optional: npm install --save-dev gulp-rename
-var gulp = require('gulp');
-var rollup = require('rollup-stream');
-var sourcemaps = require('gulp-sourcemaps');
-//var rename = require('gulp-rename');
-var source = require('vinyl-source-stream');
-var buffer = require('vinyl-buffer');
-
-gulp.task('rollup', function() {
-  return rollup({
-      input: './src/main.js',
-      sourcemap: true,
-      format: 'umd'
-    })
-
-    // point to the entry file.
-    .pipe(source('main.js', './src'))
-
-    // buffer the output. most gulp plugins, including gulp-sourcemaps, don't support streams.
-    .pipe(buffer())
-
-    // tell gulp-sourcemaps to load the inline sourcemap produced by rollup-stream.
-    .pipe(sourcemaps.init({loadMaps: true}))
-
-        // transform the code further here.
-
-    // if you want to output with a different name from the input file, use gulp-rename here.
-    //.pipe(rename('index.js'))
-
-    // write the sourcemap alongside the output file.
-    .pipe(sourcemaps.write('.'))
-
-    // and output to ./dist/main.js as normal.
-    .pipe(gulp.dest('./dist'));
-});
-```
diff --git a/docs/recipes/rollup.md b/docs/recipes/rollup.md
new file mode 100644
index 000000000..8e9af9c53
--- /dev/null
+++ b/docs/recipes/rollup.md
@@ -0,0 +1,71 @@
+# Rollup
+
+Rollup is a module bundler for JavaScript, and, while there are packages which aim to help use Rollup with gulp, like [`gulp-rollup`] and [`rollup-stream`](https://www.npmjs.com/package/rollup-stream), we can also use Rollup's JavaScript API 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");
+    }
+  });
+}
+```