Gulpの使い方

前回はGulpのインストール手順を紹介しました。
今回からは具体的な使い方について解説していきます。

gulpfile.jsにタスクを書く

インストール完了したらさっそく簡単なタスクを書いていきましょう。
gulpのタスクは gulpfile.js に書きていきます。

まずは、以下のサンプルコードをコピーして gulpfile.js を作成してください。
作成したファイルは package.json などのファイルと同列階層に保存してください。

画像を圧縮するタスク

//gulpとgulpのパッケージを読み込む
var gulp = require('gulp'),//gulp本体
    imagemin = require('gulp-imagemin'),//gif,jpg,png,svgロスレス軽量圧縮
    pngquant = require('imagemin-pngquant'),//pngエンコーダー
    mozjpeg = require('imagemin-mozjpeg'), //jpgエンコーダー
    changed = require('gulp-changed'); //src と dist を比較して異なるものだけ処理

// 元ソースと出力先のディレクトリを定義
var paths = {
  srcDir : 'src',//元ソース
  dstDir : 'dest'//出力先
}

//画像圧縮
gulp.task('images', function(){
	gulp.src(paths.srcDir + '/**/*.{png,jpg,gif,svg}')//srcのサブディレクトリ含みすべての画像を対象にする
		.pipe(changed(paths.dstDir))//srcとdistをチェック
		.pipe(imagemin([
		  pngquant({//pngの圧縮設定
		    quality: '85-90',  // 画質
		    speed: 1,  // 最低のスピード
		    floyd: 0,  // ディザリングなし
		  }),
		  mozjpeg({//jpgの圧縮設定
		    quality: 90, // 画質
		    progressive: true
		  }),
		  imagemin.svgo(),
		  imagemin.optipng(),
		  imagemin.gifsicle()
		]))
		.pipe(gulp.dest(paths.dstDir))//srcに保存
});

//gulp で実行
gulp.task('default', ['images']);

圧縮する画像を用意する

srcフォルダに画像ファイル/フォルダを入れます。
画像圧縮はサブディレクトリも含むすべての画像が対象になるので、画像はフォルダにはいったままで大丈夫です。
ちなみにこの例では200KBくらいの画像を入れています。

タスクを実行する

gulp.task('default', ['images']) に設定することで
すごく簡単な以下のコマンドで処理を開始できます。

gulp

インストールと同様、 エクスプローラーの左上にある「 ファイル 」メニューから「WindowsPowerShell」で実行しましょう。

実行が終わると dest フォルダに圧縮された画像が生成されます。
圧縮後は152KBなので48KB( 約24% )くらいの削減ですね。

Sidebar