gulpでCSSの差分ビルド #CSS

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が増えてきた時にどうなるか分りませんが、しばらく様子を見てみようと思います。

〆

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

gulpでCSSの差分ビルド

サンプルコード

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

関連リンク

〆