gulpを使ったCSSの差分ビルドについて記事にしてみたいと思います。
使用するgulpのプラグインは以下の2つです。
単純にキャッシュしただけだと変更が反映されないのですが、
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回計測してみました。
| 回数 | 実行時間 |
|---|---|
| 初回 | 613ms |
| 1回目 | 287ms |
| 2回目 | 369ms |
| 3回目 | 355ms |
| 4回目 | 290ms |
| 5回目 | 329ms |
導入しているプロジェクトの現状の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を試してみては如何でしょうか？
間違っていたり、おかしい箇所があればコメントいただけると幸いです🙌