PNGファイルを7割以上圧縮してくれる「gulp.js」のプラグイン「gulp-pngmin」が素晴らしい

この記事をシェア
投稿者：管理人
公開日：2014年8月5日

重たい画像ファイルを圧縮化してサイトの表示速度を向上しよう。PNGファイルの圧縮の定番ツール「pngquant」が「gulp.js」に登場！これで画像ファイルの圧縮も自動化できます。まずは、まず一度ご自身の目でお確かめください。

入門編：WordPressの開発を高速化！Sassのコンパイル、CSSの圧縮を自動的に行うでもご紹介した「gulp.js」に新たなプラグイン「gulp-pngmin」を導入したため、共有したいと思います。詳細な使用方法については、上記のリンクをご覧ください。

インストール

「gulp-pngmin」は、pngquantを内部で使用しているため、事前にインストールする必要があります。Homebrewによるインストールが手軽です。Homebrewのインストール方法は公式サイト、または入門編：WordPressの開発を高速化！Sassのコンパイル、CSSの圧縮を自動的に行うを参照してください。

pngquant

brew install pngquant

gulp-pngmin

npm install gulp-pngmin --save-dev

gulpfile.js

「gulpfile.js」の内容は以下の通りです。注釈などを後から画像を加工したい場合を考慮して、 gulp-cssmin を利用してリネームしています。その他はデフォルトのままです。

var gulp = require('gulp');
var cssmin = require('gulp-cssmin');
var pngmin = require('gulp-pngmin');
  gulp.task('pngmin', function() {
  gulp.src('./Pictures/*.png')
    .pipe(pngmin())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./Pictures'))
})

解説

全く解説になっていませんが、デフォルトのままでOKです。パス指定に気を付けましょう。 gulpfile.js の場所から相対指定、または絶対指定になります。画像ファイルの格納場所は、任意の Pictures フォルダに指定することをオススメします。Finderの便利な使い方：Finderのリストビューのカラムに画像の解像度と大きさを追加するの恩恵を受けられるからです。