これからはじめる Gulp シリーズこれからはじめるGulp（12）：gulp-imageminプラグインを使ったJPEG,PNG,GIF,SVGの最適化

はじめに

この記事はGulp.js（全俺） Advent Calendar 2014です。

前回のこれからはじめるGulp（11）：ブラウザ間でスクロールやクリック操作を同期できるBrowserSyncでBrowserSyncを試しました。今回から画像最適化に関するプラグインを色々と試してみたいと思います。今回は画像を軽量化するためにgulp-imageminプラグインを試してみます。

gulp-imageminプラグインとは

gulp-imageminはGIF,JPEG,PNG,SVGをロスレスで軽量化できるプラグインです。Gruntを使っていた方はgrunt-contrib-imageminが思い浮かぶと思いますがほぼ同等の機能を持ったプラグインです。

gulp-imageminにバンドルされているエンコード・デコードライブラリ

gulp-imageminには以下のエンコード・デコードライブラリがバンドルされています。

imageminはプラグインをインストールすることで他のライブラリを利用することもできます。プラグイン一覧はこちらです。

gulp-imageminのインストール

gulp-imageminをインストールします。インストール時にバンドルされたライブラリのチェックが行われます。

sudo npm install gulp-imagemin --save-dev
Password:
npm WARN package.json marke.io@1.0.0 No repository field.
npm WARN package.json marke.io@1.0.0 No README data
npm WARN engine imagemin@3.1.0: wanted: {"node":">=0.10.0","npm":">=2.1.5"} (current: {"node":"0.10.32","npm":"1.4.28"})
\
> jpegtran-bin@2.0.2 postinstall /Users/nukos/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-jpegtran/node_modules/jpegtran-bin
> node lib/install.js

  ✔ jpegtran pre-build test passed successfully

> gifsicle@2.0.1 postinstall /Users/nukos/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-gifsicle/node_modules/gifsicle
> node lib/install.js

  ✔ gifsicle pre-build test passed successfully


> optipng-bin@2.0.4 postinstall /Users/nukos/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-optipng/node_modules/optipng-bin
> node lib/install.js

  ✔ optipng pre-build test passed successfully

> pngquant-bin@2.0.3 postinstall /Users/nukos/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-pngquant/node_modules/pngquant-bin
> node lib/install.js

  ✔ pngquant pre-build test passed successfully
 gulp-imagemin@2.0.0 node_modules/gulp-imagemin
├── object-assign@1.0.0
├── pretty-bytes@1.0.2 (get-stdin@1.0.0)
├── chalk@0.5.1 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)
├── through2-concurrent@0.3.1 (through2@0.6.3)
└── imagemin@3.1.0 (get-stdin@3.0.2, optional@0.1.2, through2@0.6.3, vinyl@0.4.6, stream-combiner@0.2.1, meow@2.0.0, concat-stream@1.4.7, vinyl-fs@0.3.13, imagemin-svgo@4.0.0, imagemin-jpegtran@4.0.0, imagemin-gifsicle@4.0.0, imagemin-optipng@4.0.0, imagemin-pngquant@4.0.0)

imageminタスクを作る

imagemin.jsというファイルにimageminタスクを作ります。gulp-imageminのオプションはサイトをチェックしてください。

var gulp     = require('gulp');
var imagemin = require('gulp-imagemin');

var paths = {
  srcDir : 'assets/images/_src',
  dstDir : 'assets/images/prd'
}

gulp.task( 'imagemin', function(){
  var srcGlob = paths.srcDir + '/**/*.+(jpg|jpeg|png|gif|svg)';
  var dstGlob = paths.dstDir;
  var imageminOptions = {
    optimizationLevel: 7
  };

  gulp.src( srcGlob )
    .pipe(imagemin( imageminOptions ))
    .pipe(gulp.dest( dstGlob ));
});

imageminタスクを実行する

とりあえずタスクを試すためにpngファイルを用意し$ gulp imageminを実行します。

$ gulp imagemin
[16:00:46] Using gulpfile ~/Projects/marke.io/vccw/www/wordpress/wp-content/themes/marke.io/gulpfile.js
[16:00:46] Starting 'imagemin'...
[16:00:46] Finished 'imagemin' after 6.85 ms
[16:00:48] gulp-imagemin: Minified 1 image (saved 4.99 kB - 26.6%)

gulp-imagemin: Minified 1 image (saved 4.99 kB - 26.6%)１つのファイルが圧縮され26.6%軽くなったようです。

SVGの圧縮

適当にSVGを作りimageminにかけてみます。

圧縮前

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="896px" height="896px" viewBox="0 0 896 896" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <!-- Generator: Sketch 3.2 (9961) - http://www.bohemiancoding.com/sketch -->
    <title>icon!</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="iTunesArtwork@2x" sketch:type="MSArtboardGroup" transform="translate(-64.000000, -64.000000)">
            <g id="icon" sketch:type="MSLayerGroup" transform="translate(64.000000, 64.000000)">
                <path d="M448,896 C695.423568,896 896,695.423568 896,448 C896,200.576432 695.423568,0 448,0 C200.576432,0 0,200.576432 0,448 C0,695.423568 200.576432,896 448,896 Z M448,752 C615.894564,752 752,615.894564 752,448 C752,280.105436 615.894564,144 448,144 C280.105436,144 144,280.105436 144,448 C144,615.894564 280.105436,752 448,752 Z" id="Oval-1" fill="#626262" sketch:type="MSShapeGroup"></path>
                <polygon id="Polygon-1" fill="#626262" sketch:type="MSShapeGroup" points="448 144 711.271723 296 711.271723 600 448 752 184.728277 600 184.728277 296 "></polygon>
                <polygon id="Polygon-2" fill="#CECECE" sketch:type="MSShapeGroup" points="448 196.695754 665.635861 322.347877 665.635861 573.652123 448 699.304246 230.364139 573.652123 230.364139 322.347877 "></polygon>
                <polygon id="Polygon-3" fill="#FFFFFF" sketch:type="MSShapeGroup" points="448 250.179093 619.317931 349.089547 619.317931 546.910453 448 645.820907 276.682069 546.910453 276.682069 349.089547 "></polygon>
            </g>
        </g>
    </g>
</svg>

圧縮後

<svg width="896" height="896" viewBox="0 0 896 896" xmlns="http://www.w3.org/2000/svg"><title>icon!</title><desc>Created with Sketch.</desc><g fill="none" fill-rule="evenodd"><g><g><path d="M448 896c247.424 0 448-200.576 448-448S695.424 0 448 0 0 200.576 0 448s200.576 448 448 448zm0-144c167.895 0 304-136.105 304-304S615.895 144 448 144 144 280.105 144 448s136.105 304 304 304z" fill="#626262"/><path fill="#626262" d="M448 144l263.272 152v304L448 752 184.728 600V296z"/><path fill="#CECECE" d="M448 196.696l217.636 125.652v251.304L448 699.304 230.364 573.652V322.348z"/><path fill="#fff" d="M448 250.18l171.318 98.91v197.82L448 645.82l-171.318-98.91V349.09z"/></g></g></g></svg>

SVGも無駄なものが消え軽くなりました。今回はここまで、明日はgulp-changedプラグインを使って更新されたファイルだけを圧縮するように改良してみたいと思います。

シリーズ

1. これからはじめるGulp（0）：アドベントカレンダースケジュール
2. これからはじめるGulp（1）：bundler, rbenv, nodebrewでGulp環境を作ってみる
3. これからはじめるGulp（2）：gulp-sassを使ってSCSSをコンパイルするタスクを作ってみる
4. これからはじめるGulp（3）：gulp.watchでファイルの変更を監視しタスクを実行する
5. これからはじめるGulp（4）：gulp-connectモジュールを使ったローカルサーバの起動
6. これからはじめるGulp（5）：gulp-connectモジュールを使ったLiveReload
7. これからはじめるGulp（6）：gulp-plumberとgulp-notifyを使ったデスクトップ通知
8. これからはじめるGulp（7）：require-dirモジュールを使ったタスク単位のファイル分割
9. これからはじめるGulp（8）：delモジュールとvinyl-pathsモジュールを使ったファイルの削除
10. これからはじめるGulp（9）：Ruby版Sassが使えるgulp-ruby-sassへの乗り換え
11. これからはじめるGulp（10）：deprecatedになっていたgulp-connectからgulp-webserverへ乗り換える
12. これからはじめるGulp（11）：ブラウザ間でスクロールやクリック操作を同期できるBrowserSync
13. これからはじめるGulp（12）：gulp-imageminプラグインを使ったJPEG,PNG,GIF,SVGの最適化
14. これからはじめるGulp（13）：gulp-changedプラグインで変更されたファイルだけを処理させる
15. これからはじめるGulp（14）：gulp-cachedプラグインで変更されたSCSSファイルだけを処理させる
16. これからはじめるGulp（15）：gulp-responsiveプラグインを使ったレスポンシブイメージ作成の自動化
17. これからはじめるGulp（16）：gulp-image-resizeプラグインを使ってサムネイルやレスポンシブイメージを作る
18. これからはじめるGulp（17）：SketchTool（Sketch 3 command line tool）を使ったアートボード・スライスの書き出しとgulp-execプラグインを使ったSketchtoolの呼び出し
19. これからはじめるGulp（18）：SketchToolで何ができるのかコマンドと主要なオプションを使ってみる
20. これからはじめるGulp（19）：gulp-sketchとgulp-execを使ったSketch 3デザインデータの画像書き出し
21. これからはじめるGulp（20）：Node.jsのChild Processモジュールを使ってgulpからjekyllのbuildコマンドを実行する
22. これからはじめるGulp（21）：gulp-awspublishプラグインを使ったAmazon S3への静的Webサイトパブリッシュ
23. これからはじめるGulp（22）：gulp-iconfontとgulp-sketchを使ったアイコンフォント作成の自動化
24. これからはじめるGulp（23）：gulp-consolidateでgulp-iconfontで作ったアイコンフォントのシンボル一覧HTMLを作る
25. これからはじめるGulp（24）：gulp.spritesmithプラグインでSpriteイメージを作る
26. これからはじめるGulp（25）：Hologramとgulp-hologramでスタイルガイドを作る
27. これからはじめるGulp（26）：Sketch3のサブディレクトリ書き出しに対応したgulp-sketchを試す