Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

gulpでCSSの差分ビルド

More than 3 years have passed since last update.

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を試してみては如何でしょうか?
間違っていたり、おかしい箇所があればコメントいただけると幸いです🙌

73cha
屋久島に住んでいるフロントエンドエンジニアです。 島での暮らしが3年を超えました。 毎日、地域猫に遊んでもらっています 😺
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away