GulpでCSSを圧縮する方法 (gulp-clean-css) |

　本稿では Gulp を利用してCSSを圧縮(Minify)する方法について解説します。 Gulp で CSS を圧縮するには、gulp-clean-css が便利です。本稿では gulp-clean-css を使う方法を紹介します。

本稿のゴール

　まずは本稿のゴールを示します。本稿では、次のようなプロジェクト構成の中の src/something.css を圧縮し、dest/something.min.css として出力することをゴールとします。


/プロジェクト

　├ /src

　│　└ something.css　← これを圧縮する

　│

　└ /dest

　　　└ something.min.css　← これを出力する

導入・インストール

　まずはプロジェクトに gulp と gulp-clean-css、そして gulp-rename をインストールします。 gulp-rename は、圧縮後のファイルの拡張子を .min.css にするために利用します。それぞれのモジュールを次のように npm install コマンドでインストールします。


$ npm install -D gulp

$ npm install -D gulp-clean-css

$ npm install -D gulp-rename

利用方法

　それではCSSを圧縮するタスクを gulpfile.js に書いてみましょう。プログラムは次のようになります。


var gulp     = require("gulp");

var cleanCSS = require("gulp-clean-css");

var rename   = require("gulp-rename");



gulp.task("default", function() {

    gulp.src('src/something.css')

        .pipe(cleanCSS())

        .pipe(rename({

            extname: '.min.css'

        }))

        .pipe(gulp.dest('dest/'));

});

　上記のGulpタスクでは、次のようなことを記述しています。

まずは src() メソッドで圧縮する対象ファイルを指定します。ここでは src/something.css を指定しています。
次に cleanCSS() を pipe() で呼び出し、CSSの圧縮を指示します。
圧縮したCSSを .min.css という拡張子でファイルに保存するため、rename() を呼び出します。実行オプションとして拡張子(extname)に “.min.css” を指定します。
ファイルの出力先を指定する dest() を pipe() で呼び出し、ファイルの出力を指示します。

　このタスクを実行することで、 src/something.css が圧縮されて、dest/something.min.css として出力されます。