Twitter のタイムラインで見かけたこの記事

gulp-autoprefixerよりもいい感じ。gulp-pleeeaseを使ってcssを処理しよう | isee ウェブに関するブログ：
http://isee-web.net/?p=593

ちょっと気になったので、実際に試してみました。

やったこと

Bundler 経由でインストールした Sass と gulp-sass を既に利用していたため、プラグインのみをインストール。

$ npm install --save-dev gulp-pleeease

gulpfile.js は以下のように調整。
.scss から生成された CSS ファイルに適用したかったので、run-sequence でタスクの実行順を指定しています。

// task.sass
gulp.task('sass', function(){
    return gulp.src(['*.scss'], {cwd: dir.src + '/' + dir.scss})
            .pipe($.sass())
            .pipe($.csscomb())
            .pipe($.bless())
            .pipe(gulp.dest(dir.htdocs + '/' + dir.css));
});

// task.pleeease
gulp.task('pleeease', function() {
    return gulp.src('*.css', {cwd: dir.src + '/' + dir.css})
            .pipe($.pleeease({
                fallbacks: {
                    autoprefixer: ['last 2 version', 'ie 8', 'ie 9']
                },
                optimizers: {
                    minifier: true
                }
            }))
            .pipe(gulp.dest(dir.htdocs + '/' + dir.css));
});

// task.css
gulp.task('css', function() {
    runSequence('sass', 'pleeease');
});

あとは、デフォルトタスクや watch にセットすれば完了です。

やってみて

いままで使っていた3つのプラグイン

• gulp-autoprefixer
• gulp-combine-media-queries
• gulp-cssmin

をこれ一つに置き換えられました。自分が試した範囲では gulp-pleeease 単独の方が処理にかかる時間も短かったので、確かによさそうですね。

ただ、CSSComb と Bless の処理を .pipe($.pleeease) の前後にセットするとエラーに。。。
そもそもの書き方が悪いのかも？ですが、いっそこの2つも含まれないかな？と欲がでてしまったり(｡-_-｡)