Eleventy Walk Through

Using Gulp

Gulp is a task runner used to automate various processes of building a coding project such as a website. Eleventy can render static pages from markdown and data, and does offer some features for handling CSS and such, but Gulp offers a lot more power and flexibility for transpiling CSS and JS, minifying them, moving files around, and much more. This article assumes experience using Gulp.

The idea here is to utilize an NPM module child_process and its method spawn. This allows running Eleventy as a task from within gulpfile.js :

In the project folder, install gulp globally and locally (if you haven't already) :

npm i -D gulp
npm i -D -g gulp
			

Create gulpfile.js in the project root :

const { src, dest, series, parallel, watch } = require('gulp');
const cp = require("child_process");

const render = () => {
    return cp.spawn("npx", ["eleventy", "--quiet"], { stdio: "inherit" });
};

exports.default = render;
			

In a terminal, in the project folder, running gulp now should run Eleventy which will render the project the same way as before.

Eleventy and other Gulp tasks

Generally, Eleventy would be used to render the static pages first, then Gulp would process them and copy them over to a production folder. In the example below, it's assumed Eleventy is rendering to dist/, and then Gulp copies it to public/

const { src, dest, series, parallel, watch } = require('gulp');
const cp = require("child_process");

const render = () => {
    return cp.spawn("npx", ["eleventy", "--quiet"], { stdio: "inherit" });
};

const copy = () => {
    return src('./dist/**/*')
        .pipe(dest('./public'));
};

exports.default = series(render, copy);
			

Note: This Gulp flow generally precludes using eleventy --serve. Sometimes you can use eleventy --serve, but that's only useful if Eleventy is the final task.

So instead, in order to serve up the pages to browse at root, install http-server, then run it in a new terminal (note this does not provide auto-reload) :

npm i -D http-server
npx http-server