search

Andy-set-studio / learneleventyfromscratch.com

In this Eleventy course, we go from a completely empty directory to a full-blown marketing site for a design agency, and along the way, we dive really deep into Eleventy and front-end development best practices.
https://learneleventyfromscratch.com/
120 stars 28 forks source link

Lesson 21 - gulp-imagemin is now an ES Module #24

Open ComedyTomedy opened 2 years ago

ComedyTomedy commented 2 years ago

Lesson 21 doesn't work, at least for me. I thought I'd open an issue, if only to reassure people who are having the same issue.

Unless there's another version, it seems gulp-imagemin has moved from CommonJS to modern ES Modules. This means the image optimisation can't be mixed with the non-module gulpfile.

If the course moves from Gulp to NPM Scripts this won't be an issue any more.

ComedyTomedy commented 2 years ago

For now, and probably the next year or two, 11ty doesn't support ES Modules, cf. eleventy#836.

The quick fix is to pin an old version of gulp-imagemin, specifically "7.1.0". I suggest we change the install command to:

npm install gulp-imagemin@7.1.0 --save-exact

I've tested this and it fixes the problem. --save-exact is useful to avoid the site breaking if someone runs npm update.

I'll be bold and make a PR with this change. It fixes the problem, seems like the only solution for now, and even if we find something better later, the course will be unbroken in the meantime.