どうも、ずいぶんご無沙汰でした。
やっと繁忙期抜けれた・・・。
さて、最近は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に関してはおまけですね。
これで、速いし一行化もできました！
やっぱパッケージ一個で片付けようってのはムシがいい話なんだろうかね。
また一つ勉強になりました。
コメントする