100 days of code

- tracking progress

25 Jul 2017

Day 37: (Responsive) Image Processing using Webpack & gulp

Webpack banner

What I’ve done today

Today I worked on automatically processing images with webpack and gulp. I’m building a responsive image component in vue which uses the generated images.

The workflow is the following:

For the main site I use:

Image -> webpack -> resized images + srcset markup + inlined preview image

Additionally I need a preview image which is used in netlify cms when working on adding / changing content.

This preview image is created by gulp:

Image -> gulp -> dist folder: resized preview image

I use a pretty fast library here to save time in the build process. Its called sharp (see links)

For the webpack side of things I use responsive-image-loader and in gulp I use gulp responsive Actually I dont create responsive image versions with gulp, but it uses the fast sharp library :-)

Why webpack AND gulp?

Because webpack automagically creates an image object which also contains the image size. I need that. The gulp task is more “dumb” and just processes everything from its input dir to its output dir.

What I’m planning to do next

Working on the responsive image vue component

Learnings today:

Link Dump for today: