gulpでCSSの差分ビルド

gulpを使ったCSSの差分ビルドについて記事にしてみたいと思います。
使用するgulpのプラグインは以下の2つです。

• gulp-chached
• gulp-progeny

単純にキャッシュしただけだと変更が反映されないのですが、
gulp-progenyを使うと依存関係を解決して差分ビルドが可能になります。

nodeのパッケージにprogenyというものがあり、
gulp-progenyはprogenyを使って依存関係を解決しているようです。
progenyのソースコードを見てみると、初期設定ではPug(Jade), Slim, LESS, Sass(*.sass, *.scss), Stylus, CSSをサポートしています。(PostCSSでも問題なく使えます。)
https://github.com/es128/progeny/blob/master/index.js#L9-L52

サンプルコード

公式のREADMEに乗っているものそのままですが、
以下のように記述してもらうと差分ビルドが可能になります。
試す場合は、各自の環境に置き換えてみてください。

var cache = require('gulp-cached');
var progeny = require('gulp-progeny');
var stylus = require('gulp-stylus');

gulp.task('style', function(){
  return gulp.src('*.styl')
    .pipe(cache('style'))
    .pipe(progeny())
    .pipe(stylus())
});

gulp.task('watch', function(){
  gulp.watch('*.styl', ['style']);
});

自分が関わっているプロジェクトで導入していますが、
gulp#4.0とPostCSSの組み合わせでも問題ありません。

実際どのくらい早くなっているの？

導入しているプロジェクトでの計測結果です。
小規模なプロジェクトで、まだ基本構成+といった感じのCSSです。
色々なCSSで5回計測してみました。

導入しているプロジェクトの現状のCSSでは、初回の約半分ぐらいの時間でビルド出来るようになりました😀
プロジェクトが進み、CSSが増えてきた時にどうなるか分りませんが、しばらく様子を見てみようと思います。

関連リンク

http://log.playr.jp/2015/10/31/gulp-progeny.html
http://sssslide.com/speakerdeck.com/ktsn/watch-shi-falsebirudowomotutosu-kusitai

〆

CSSのビルドに時間がかかって遅いと感じたら、gulp-progenyを試してみては如何でしょうか？
間違っていたり、おかしい箇所があればコメントいただけると幸いです🙌