Monday, 2 November 2015

Gulp image resize for multiple images

I was looking for a way to automate multiple image resizing and found a Gulp plugin called Gulp-image-resize. This plugin uses the GraphicsMagick and ImageMagicks image processing system for the resizing.

A few posts I read online suggest chaining multiple image-resize pipes together. However, this was causing some undesired results. To overcome this I suggest to separate the chained image-resize script into different tasks then call a master resize task to invoke the other tasks.

This post assumes you have knowledge of Gulp and have the relevant plugins installed on your machine. In the example below I used only use the width option for imageResize which will ensure the output image won’t exceed the value and height will be automatically adjusted. I have also used a few additional modules such as gulp-changed and gulp-rename.

var gulp         = require('gulp'),
var $            = require('gulp-load-plugins')();

var imgPaths = {
    src:'./images/**/*.{jpg,png}',
    dist:'./images/'
}

gulp.task('img-resize-large', function(){
    gulp.src(imgPaths.src)
    .pipe($.changed(imgPaths.dist))
    .pipe($.imageResize({width : 1436}))
    .pipe($.rename({suffix: '-1436'}))
    .pipe(gulp.dest(imgPaths.dist))
});

gulp.task('img-resize-medium', function(){
    gulp.src(imgPaths.src)
    .pipe($.changed(imgPaths.dist))
    .pipe($.imageResize({width : 790}))
    .pipe($.rename({suffix: '-790'}))
    .pipe(gulp.dest(imgPaths.dist))
});

gulp.task('img-resize-small', function(){
    gulp.src(imgPaths.src)
    .pipe($.changed(imgPaths.dist))
    .pipe($.imageResize({width : 474}))
    .pipe($.rename({suffix: '-474'}))
    .pipe(gulp.dest(imgPaths.dist))
  
});

gulp.task('img-resize', ['img-resize-large','img-resize-medium','img-resize-small']);

0 comments:

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP