これからはじめる Gulp シリーズこれからはじめるGulp（14）：gulp-cachedプラグインで変更されたSCSSファイルだけを処理させる

はじめに

この記事はGulp.js（全俺） Advent Calendar 2014です。

前回のこれからはじめるGulp（13）：gulp-changedプラグインで変更されたファイルだけを処理させるでgulp-changedプラグインを使った画像処理の効率化を試しました。今回はgulp-cachedプラグインを活用しSassタスクの処理を効率化してみます。

gulp-cachedについて

gulp-cachedは対象となるファイルをメモリにキャッシュし、変更された分だけを処理させることができます。

gulp-cachedをSassタスクに組み込む

gulp-cachedをSassタスクに組み込んでみます。

gulp-cachedのインストール

sudo npm install gulp-cached --save-dev
Password:
gulp-cached@1.0.1 node_modules/gulp-cached
├── lodash.defaults@2.4.1 (lodash._objecttypes@2.4.1, lodash.keys@2.4.1)
└── through2@0.5.1 (xtend@3.0.0, readable-stream@1.0.33)

タスクにgulp-cachedを指定する

2行追加するだけなのでとても簡単です。読み込んでパイプラインにgulp-cachedを指定します。.pipe(cache( 'sass' ))このようにgulp-cachedの引数にはキャッシュ名を指定するだけです。

var gulp       = require('gulp');
var path       = require('path');
var sass       = require('gulp-ruby-sass');
var plumber    = require('gulp-plumber');
var notify     = require('gulp-notify');
var cache      = require('gulp-cached'); //<-

var browserSync = require('browser-sync');
var reload      = browserSync.reload;

//option
var paths = {
  srcDir : 'assets/_scss',
  dstDir : 'assets/css'
}

//task
gulp.task('sass', function(){
  var srcGlob = paths.srcDir + '/**/*.scss';
  var dstGlob = paths.dstDir;
  var errorMessage = "Error: <%= error.message %>";
  var sassOptions = {
    bundleExec : true,
    style      : 'compressed',
    require    : ['bourbon', 'neat'],
    loadPath   : [
      'vendor/bundle/ruby/2.1.0/gems/bitters-0.10.1/app/assets/stylesheets'
    ]
  }

  gulp.src( srcGlob )
    .pipe(cache( 'sass' )) //<-
    .pipe(plumber({
      errorHandler: notify.onError( errorMessage )
    }))
    .pipe(sass( sassOptions ))
    .pipe(gulp.dest( dstGlob ))
    .pipe(reload({stream:true}));
});

gulp-cachedを実行

watchが設定されている状態でタスクを実行します。 最初の実行で複数のSCSSファイルが処理されていますが、後半のwatchが行われている部分では変更されたファイルのみが処理されています。

gulp watch
[17:00:28] Using gulpfile ~/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/gulpfile.js
[17:00:28] Starting 'sass'...
[17:00:28] Finished 'sass' after 20 ms
[17:00:28] Starting 'watch'...
[17:00:28] Finished 'watch' after 51 ms
[17:00:29] gulp-ruby-sass: directory
[17:00:30] gulp-ruby-sass: write common.css
      write common.css.map
[17:00:30] gulp-ruby-sass: directory sections
[17:00:31] gulp-ruby-sass: write sections/categories-archive.css
      write sections/categories-archive.css.map
[17:00:31] gulp-ruby-sass: write sections/date-archives.css
      write sections/date-archives.css.map
[17:00:32] gulp-ruby-sass: write sections/home.css
      write sections/home.css.map
[17:00:32] gulp-ruby-sass: write sections/post.css
      write sections/post.css.map
[17:00:33] gulp-ruby-sass: write sections/tags-archive.css
      write sections/tags-archive.css.map
[17:00:41] Starting 'sass'...
[17:00:41] Finished 'sass' after 13 ms
[17:00:45] Starting 'sass'...
[17:00:45] Finished 'sass' after 2.64 ms
[17:01:02] Starting 'sass'...
[17:01:02] Finished 'sass' after 2.51 ms
[17:01:02] gulp-ruby-sass: directory
[17:01:04] gulp-ruby-sass: write common.css
      write common.css.map
[17:01:13] Starting 'sass'...
[17:01:13] Finished 'sass' after 4.11 ms
[17:01:14] gulp-ruby-sass: directory
[17:01:15] gulp-ruby-sass: write common.css
      write common.css.map
[17:01:22] Starting 'sass'...
[17:01:22] Finished 'sass' after 2.91 ms
[17:01:23] gulp-ruby-sass: directory
[17:01:25] gulp-ruby-sass: write common.css
      write common.css.map
[17:01:30] Starting 'sass'...
[17:01:30] Finished 'sass' after 10 ms
[17:01:31] gulp-ruby-sass: directory sections
[17:01:32] gulp-ruby-sass: write sections/post.css
      write sections/post.css.map
[17:01:36] Starting 'sass'...
[17:01:36] Finished 'sass' after 4.29 ms
[17:01:37] gulp-ruby-sass: directory sections
[17:01:37] gulp-ruby-sass: write sections/post.css
      write sections/post.css.map

無駄な処理が減り、待機時間も減らすことができました。タスクの効率化はひとまずここまで。明日からは画像処理系のプラグインを紹介していきたいと思います。

シリーズ

1. これからはじめるGulp（0）：アドベントカレンダースケジュール
2. これからはじめるGulp（1）：bundler, rbenv, nodebrewでGulp環境を作ってみる
3. これからはじめるGulp（2）：gulp-sassを使ってSCSSをコンパイルするタスクを作ってみる
4. これからはじめるGulp（3）：gulp.watchでファイルの変更を監視しタスクを実行する
5. これからはじめるGulp（4）：gulp-connectモジュールを使ったローカルサーバの起動
6. これからはじめるGulp（5）：gulp-connectモジュールを使ったLiveReload
7. これからはじめるGulp（6）：gulp-plumberとgulp-notifyを使ったデスクトップ通知
8. これからはじめるGulp（7）：require-dirモジュールを使ったタスク単位のファイル分割
9. これからはじめるGulp（8）：delモジュールとvinyl-pathsモジュールを使ったファイルの削除
10. これからはじめるGulp（9）：Ruby版Sassが使えるgulp-ruby-sassへの乗り換え
11. これからはじめるGulp（10）：deprecatedになっていたgulp-connectからgulp-webserverへ乗り換える
12. これからはじめるGulp（11）：ブラウザ間でスクロールやクリック操作を同期できるBrowserSync
13. これからはじめるGulp（12）：gulp-imageminプラグインを使ったJPEG,PNG,GIF,SVGの最適化
14. これからはじめるGulp（13）：gulp-changedプラグインで変更されたファイルだけを処理させる
15. これからはじめるGulp（14）：gulp-cachedプラグインで変更されたSCSSファイルだけを処理させる
16. これからはじめるGulp（15）：gulp-responsiveプラグインを使ったレスポンシブイメージ作成の自動化
17. これからはじめるGulp（16）：gulp-image-resizeプラグインを使ってサムネイルやレスポンシブイメージを作る
18. これからはじめるGulp（17）：SketchTool（Sketch 3 command line tool）を使ったアートボード・スライスの書き出しとgulp-execプラグインを使ったSketchtoolの呼び出し
19. これからはじめるGulp（18）：SketchToolで何ができるのかコマンドと主要なオプションを使ってみる
20. これからはじめるGulp（19）：gulp-sketchとgulp-execを使ったSketch 3デザインデータの画像書き出し
21. これからはじめるGulp（20）：Node.jsのChild Processモジュールを使ってgulpからjekyllのbuildコマンドを実行する
22. これからはじめるGulp（21）：gulp-awspublishプラグインを使ったAmazon S3への静的Webサイトパブリッシュ
23. これからはじめるGulp（22）：gulp-iconfontとgulp-sketchを使ったアイコンフォント作成の自動化
24. これからはじめるGulp（23）：gulp-consolidateでgulp-iconfontで作ったアイコンフォントのシンボル一覧HTMLを作る
25. これからはじめるGulp（24）：gulp.spritesmithプラグインでSpriteイメージを作る
26. これからはじめるGulp（25）：Hologramとgulp-hologramでスタイルガイドを作る
27. これからはじめるGulp（26）：Sketch3のサブディレクトリ書き出しに対応したgulp-sketchを試す