Lesson 21 - Setting up images

Course
Learn Eleventy From Scratch
Module
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
JavaScript
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/**/*')
    .pipe(
      imagemin(
        [
          imagemin.mozjpeg({quality: 60, progressive: true}),
          imagemin.optipng({optimizationLevel: 5, interlaced: null})
        ],
        {
          silent: true
        }
      )
    )
    .pipe(dest('./dist/images'));
};

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
bash
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
JavaScript
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
JavaScript
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, accessible websites & design systems.

I’m a freelance CSS and design systems consultant, based in the UK. I specialise in design systems and creative web design, such as landing pages and campaign work.

I’m currently helping Google by refactoring the CSS and creating a design system for web.dev, but I have availability for projects such as small websites, landing pages and consultancy. I will have full availability for larger projects in January 2022.

Hire me