Lesson 21 - Setting up images

Learn Eleventy From Scratch
Asset Pipeline

Time to wrap up the asset pipeline with some image optimisations.

At the moment, Eleventy handles our images with passthrough copy. This is fine, really, because I’ve already optimised the images for us in the starter files. It’s a good idea, however, to let Gulp improve things for us.

In this last lesson of the module, we’re going to relieve Eleventy of its duty and task Gulp with processing, optimising and then distributing our images for us.

Adding the image task permalink

Create a new file in your gulp-tasks folder called images.js and add the following to it:

Code language
const {dest, src} = require('gulp');
const imagemin = require('gulp-imagemin');

// Grabs all images, runs them through imagemin
// and plops them in the dist folder
const images = () => {
  // We have specific configs for jpeg and png files to try
  // to really pull down asset sizes
  return src('./src/images/**/*')
          imagemin.mozjpeg({quality: 60, progressive: true}),
          imagemin.optipng({optimizationLevel: 5, interlaced: null})
          silent: true

module.exports = images;

We’re using a handy package called gulp-imagemin that grabs our source images and then, depending on the file type, runs them through a specific processor. JPEG files go through mozjpg and PNG files go through optipng.

Once these files go through their processor, this task plops them into our dist directory for us.

Hopefully at this point, you’re starting to see a pattern with these Gulp tasks. They do one job for us, and do them well.

Right, we need to wire this one up, too. But before that, let’s install our dependency. Open up your terminal in eleventy-from-scratch and run the following command:

Code language
npm install gulp-imagemin

Adding the task to our gulpfile permalink

The last bit now is to repeat the process from the last lesson, so open up eleventy-from-scratch/gulpfile.js and add the following after the import of the fonts task, on around line 5.

Code language
const images = require('./gulp-tasks/images.js');

Now, let’s update our watch task. Inside the watcher function, around line 13, add the following:

Code language
watch('./src/images/**/*', {ignoreInitial: true}, images);

When we use the **/* pattern in Gulp, it means find files in any directory. So in this context, /src/images/**/* means all files in images, regardless of folder structure and depth.

Finally, add images to the parallel function on line 18. It should now look like this:

Code language
Diff - don’t copy
exports.default = parallel(fonts, images, sass);

Job done! If you now run npm start in your terminal, everything should be working fine.

Wrapping up permalink

That’s it for the asset pipeline. Hopefully, you can see now how Gulp and Eleventy make a powerful team. They each do their job independently and it all comes together nicely.

We’re now moving into the final module of this course, “Front-End Build”. It’s time to get our CSS on, and I’m very excited to teach you how I like to build websites with CSS!

Next up: Lesson 22 - Global CSS and design tokens

It’s time to make this site look darn good now. Let’s set up our global CSS and design tokens to do some of the heavy lifting for us.

Get started

Help! My version of this lesson isn’t working.

Don’t panic, you can download the working project here! Once they are downloaded: replace your project with these files and run npm install. You can read more information here.

Download project files

Hello, I’m Andy and I’ll help you build fast & visually stunning websites.

I am currently setting up a new creative agency called Set Creative Studio and we are taking on projects for 2022, so if you have a project in mind, get in touch.