BLOG

Gulpで画像サイズの変換&圧縮の自動化

画像サイズの変換&圧縮の自動化

GraphicsMagicをインストール

brew install graphicsmagick

gulp-image-resize と gulp-imageminをインストール

yarn add gulp-image-resize gulp-imagemin --dev

インストールが終わればgulpfile.jsにて下記のように変更

const {src, dest} = require('gulp');
const rename = require('gulp-rename');
const rename = require('gulp-imagemin');
const rename = require('gulp-image-resize');

function copyFiles(){
    return src('./src/index.html')
        .pipe(rename({
            prefix: 'hello-'
        }))
        .pipe(dest('./dist'));
}

exports.copyFiles = copyFiles;

けど、プラグインを何個もインストールすると行数が増え可読性が悪くなるので下記をインストール

yarn add gulp-load-plugins --dev

gulpfile.jsも下記に変更

const {src, dest} = require('gulp');
const loadPlugins = require('gulp-load-plugins');
const $ = loadPlugins();

function copyFiles(){
    return src('./src/index.html')
        .pipe(rename({
            prefix: 'hello-'
        }))
        .pipe(dest('./dist'));
}

exports.copyFiles = copyFiles;

実際にリサイズする

gulpfile.jsを変更※favicon.pngとdist>images/iconがあるとする

const {src, dest} = require('gulp');
const loadPlugins = require('gulp-load-plugins');
const $ = loadPlugins();

function icon(){
    return src('./favicon.png')
        .pipe($.imageResize({
            width: 100,
            height: 100,
            crop: true,
            upscale: false
        }))
        .pipe($.imagemin())
        .pipe($.rename({
            prefix: 'hello-'
        }))
        .pipe(dest('./dist/images/icon'));
}

exports.icon = icon;

下記を実行

gulp icon

dist>images>icon>hello-favicon.pngができる

リサイズと圧縮がされている

複数の画像サイズへ変換と圧縮をする

gulpfile.js

const {src, dest} = require('gulp');
const loadPlugins = require('gulp-load-plugins');
const $ = loadPlugins();
const sizes = [
    [16, 16],
    [32, 32],
    [48, 48],
    [57, 57],
    [76, 76],
    [120, 120],
    [128, 128],
    [152, 152],
    [167, 167],
    [180, 180],
    [192, 192],
    [512, 512]
];

function icon(done){
    for(let size of sizes){
        let width = size[0];
        let height = size[1];
         src('./favicon.png')
            .pipe($.imageResize({
                width,
                height,
                crop: true,
                upscale: false
            }))
            .pipe($.imagemin())
            .pipe($.rename(`favicon-${width}×${height}.png`))
            .pipe(dest('./dist/images/icon'));
        }
        done();
    }
exports.icon = icon;

gulp icon で実行

リサイズと圧縮がされたファイルが生成される。

が、ファイルは分けたほうがいいので、下記のようにする。

package.json

{
  "name": "gulp-first",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-image-resize": "^0.13.1",
    "gulp-imagemin": "^7.1.0",
    "gulp-load-plugins": "^2.0.4",
    "gulp-rename": "^2.0.0"
  },
  "dependencies": {},
  "gulp-config": {
    "sizes" : [
      [16, 16],
      [32, 32],
      [48, 48],
      [57, 57],
      [76, 76],
      [120, 120],
      [128, 128],
      [152, 152],
      [167, 167],
      [180, 180],
      [192, 192],
      [512, 512]
  ]
  }
}

glupfile.js

const {src, dest} = require('gulp');
const loadPlugins = require('gulp-load-plugins');
const $ = loadPlugins();
const pkg = require('./package.json');
const conf = pkg["gulp-config"];
const sizes = conf.sizes;

function icon(done){
    for(let size of sizes){
        let width = size[0];
        let height = size[1];
         src('./favicon.png')
            .pipe($.imageResize({
                width,
                height,
                crop: true,
                upscale: false
            }))
            .pipe($.imagemin())
            .pipe($.rename(`favicon-${width}×${height}.png`))
            .pipe(dest('./dist/images/icon'));
        }
        done();
    }
exports.icon = icon;

gulp iconを実行

package.jsonファイルに設定を分けていたほうが見やすい。