Gulp、Sassのコンパイル高速化と一行化

※この記事は6年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

どうも、ずいぶんご無沙汰でした。
やっと繁忙期抜けれた・・・。

さて、最近はGulpやること多いのですが、
Sassのコンパイルが遅いので、速くできないか？との要望があったので、
そこに関して。
今まで、compassを通していたのでやたらと時間かかっていたってことが判明した。
（下手したら、2分くらいかかる）
そこで、LibSassというのを使えば速くなることがわかたったので、下記エントリーを参考に導入してみました。

●gulpのsass,scssのコンパイルの高速化（LibSassをつかって)

いやはや速くなった速くなった。
500ms（0.5秒）くらいで終わるようになった。

しかし、compassを通さないので、ある困ったことになった。
compassが使えないのはまぁいいとして、
config.rbを通せない
のだ。
これ、何が困るかというと、
書き出しの仕方が、操作しずらくなる。
一応、gulp-sassにもオプションで基本の書き出し形式は選択できるのだが、
僕の書き出し環境はちょいと改造して、一行化してるので、
（to_css.rbを改造してる）困ったことになったわけだ。
いや、compressed形式で一行化しろって話だが、気持ち悪いんだもん、compressed。

LibSassで、config.rbを通すようにする方法を探すもなかなか見つからなかった・・・。
じゃぁ、どうするって、自作プラグインで一行化すればいい。

下記のようなjsファイルを、gulpfile.jsと同じ階層に置く

var through = require('through2');
var PluginError = require('gulp-util').PluginError;
var PLUGIN_NAME = 'gulp-css-comp-add';

module.exports = function() {
  var transform = function(file, encoding, callback) {
    if (file.isNull()) {
      return callback(null, file);
    }
    if (file.isStream()) {
      this.emit('error', new PluginError(PLUGIN_NAME, 'Streams not supported!'));
    }

    // プラグインの処理本体
    if (file.isBuffer()) {
      var submitContents = '';

      // ファイルの内容をcontentsに読み込み
      var contents = String(file.contents);
      // タブを削除
      contents = contents.replace( /\t/g, "");
      contents = contents.replace(/\/\*([\s\S]*?)\*\//g, "");

      // 改行別に処理
      var breakArr = contents.split("\n"),
        lineFlgPHP = false,
        lineFlgJS = false;

      // 一行化
      breakArr.forEach(function(val, index){
        var innerLastText = val;
        // 行頭スペースを削除
        innerLastText = innerLastText.replace( /^\s+/g, '');

        submitContents += innerLastText;
      });
      // breakArr.forEach END

      // 複数セレクタのスペーストル
      if (submitContents.indexOf(", ")) {
        submitContents = submitContents.replace(/\, /g, ',');
      }
      // セレクタのスペーストル
      if (submitContents.indexOf(" {")) {
        submitContents = submitContents.replace(/ \{/g, '{');
      }
      // プロパティのスペーストル
      if (submitContents.indexOf(": ")) {
        submitContents = submitContents.replace(/\: /g, ':');
      }

      // 編集した内容を出力
      file.contents = new Buffer(submitContents);

      // 処理の完了を通知
      return callback(null, file);
    }

    this.push(file);
    callback();
  };

  return through.obj(transform);
};

さて、どう使うかはgulpfile.jsにて下記のようにする。
（必要なパッケージはインストールしているとして話進めます）

// 各npm読み込み
var gulp = require('gulp'),
  sass = require('gulp-sass'),
  cssComp = require('./gulp-css-comp-add');

// Sassコンパイル
gulp.task('sass-comp', function () {
  // 出力のパスとかに関しては、環境によって変える
  gulp.src('scss/**/*.scss')
    .pipe(
      // 書き出し形式は、expandedにする
      sass({outputStyle: 'expanded'}))
    // ここで、自作プラグインを通す
    .pipe(cssComp())
    .pipe(gulp.dest('css'));

  console.log('SASSをコンパイルしました。');

  return merge(tasks);
});

gulp.task('watch', function() {
  gulp.watch('sass/**/*.scss', ['scss']);
});

watchに関してはおまけですね。

これで、速いし一行化もできました！
やっぱパッケージ一個で片付けようってのはムシがいい話なんだろうかね。
また一つ勉強になりました。