Lesson 21: Setting up images

At the moment, Eleventy handles our images with passthrough copy. This is fine, really, because I’ve already optimized 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, optimizing 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 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:

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);

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!