Lesson 21: Setting up images

This content is likely out of date

The content of this course was written in May 2020, so parts will be outdated. There’s no immediate plan to do a full update, but this course is now open source, so if you see an issue, please raise an issue.

Head over to the project and follow the contribution guide if you would like to help.

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

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

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 (opens new window) that grabs our source images and then, depending on the file type, runs them through a specific processor. JPEG files go through mozjpg (opens new window) and PNG files go through optipng (opens new window).

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:

npm install gulp-imagemin

Adding the task to our gulpfile

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.

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

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

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

TIP

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:

exports.default = parallel(fonts, images, sass);

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

Wrapping up

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!