Resize Your Images With Gulp

I know I've not made a post about Gulp.js (a nifty task automation tool) because I don't think I know enough about it yet to give you a good introduction.

But I thought I'd show you what I'm using Gulp for at the moment to get you interested in trying it out yourself.

I've been working through Code School's Angular.js tutorial by coding up their example project as I go along with their videos and online excercises.

The example project is a store that sells magical gems, and since I didn't have any images of gems to start with, I simply googled for images of dodecahedrons and pentagonal prisms as magical items my store could sell.

I found the images I needed quickly enough, but they were too big for my use case. I needed slightly smaller images as well as much smaller thumbnail images.

gulp-image-resize to the rescue. This handy little npm module is a Gulp plugin that grabs an image and then resizes it for you.

Of course, Gulp can do much more than this. There are all kinds of Gulp plugins that do all kinds of nifty stuff for you.

Along with gulp-image-resize, I use del (not actually a plugin, just an npm module) to delete old images and gulp-rename to add the words "full" or "thumb" as suffixes to my resulting resized images.

Here's the code for this task (minus the require statements):

gulp.task('resize-images', () => {  
    const front_end_images =
        gulp.src('front-end/images/*')

    del(['public/images/*'])

    front_end_images
        .pipe(imageResize({
            width: 200,
            height: 200,
            crop: true,
            upscale: false
        }))
        .pipe(rename(function (path) {
            path.basename += '-full'
        }))
        .pipe(gulp.dest('public/images'))

    front_end_images
        .pipe(imageResize({
            width: 100,
            height: 100,
            crop: true,
            upscale: false
        }))
        .pipe(rename(function (path) {
            path.basename += '-full'
        }))
        .pipe(gulp.dest('public/images'))

    front_end_images
        .pipe(imageResize({
            width: 100,
            height: 100,
            crop: true,
            upscale: false
        }))
        .pipe(rename(function (path) {
            path.basename += '-thumb'
        }))
        .pipe(gulp.dest('public/images'))
})

gulp.task('default', ['resize-images'])  

Breaking this down, gulp.task is a function that registers any task you want to automate) with Gulp. It takes two arguments, the name of the task and the function that performs the task.

The task I've created is resize-images. First the task creates a gulp object that represents all the files in the front-end/images directory:

    const front_end_images =
        gulp.src('front-end/images/*')

Then the task deletes all the old images in public/images since it will create new images in their place.

Next it uses streams to "pipe" the images through the gulp-image-resize plugin (along with a few options).

Then it pipes the resulting resized images through gulp-rename (here I've simply named it rename in my script) which lets me use a function to rename the image files.

Finally the newly resized and renamed images are piped to their destination in public/images.

The task does the exact same thing with the thumbnail images.

Lastly, this gulpfile.js sets the resize-images task as one of it's default tasks. This means that when you run gulp in the terminal, Gulp will run the resize-images task. Otherwise I'd have to type gulp resize-images every time I wanted to run this.

There's lots more you can do with Gulp, I recommend you try it out. :)

Looking for a software developer?