gulpで自分が編集しているscssをcssCombしたい

cssCombは便利だ。
でもgulpでの導入方法を調べてみると、プロパティの並び順を整えてコンパイルする方法しか見つからなかった。

個人的にはコンパイル後の綺麗さはどうでもよくて、編集するファイルこそ綺麗にしたい。

やりたいこと

scssを保存するたびに下記を実行したい

• そのscssをcssCombで整える
• cssにコンパイル

結論

これで実現できる

package.json

{
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-changed-in-place": "^2.0.3",
    "gulp-compass": "^2.1.0",
    "gulp-csscomb": "^3.0.8",
    "gulp-watch": "^4.3.5"
  }
}

gulpfile.js

var changedInPlace = require('gulp-changed-in-place');
var compass = require('gulp-compass');
var csscomb = require('gulp-csscomb');
var watch = require("gulp-watch");


var srcDir = './src/';  // ソースのディレクトリ
var distDir = './dist/'; // コンパイル先ディレクトリ


var src = {
  scssDir: srcDir + 'scss/',
  scss: srcDir + 'scss/**/*.scss'
};

var tmp = {
  scssDir: srcDir + 'tmp/scss/',
  scss: srcDir + 'tmp/scss/**/*.scss'
};

var dist = {
  cssDir: distDir
};



gulp.task('csscomb', function() {
  return gulp.src(src.scss)
    .pipe(csscomb())
    .pipe(changedInPlace({firstPass: true}))
    .pipe(gulp.dest(tmp.scssDir));
});


gulp.task('moveCombedCss', function() {
  return gulp.src(tmp.scss)
    .pipe(changedInPlace({firstPass: true}))
    .pipe(gulp.dest(src.scssDir));
});


gulp.task('compass', function(){
  return gulp.src(tmp.scss)
    .pipe(compass({
      project: path.join(__dirname),
      css: dist.cssDir,
      sass: tmp.scssDir
    }))
    .pipe(gulp.dest(dist.cssDir))
});



/* default, watch
====================*/
gulp.task('default', function(callback) {
  runSequence('moveCombedCss', 'csscomb', 'compass', 'watch', callback);
});


gulp.task('watch', function(){
  watch(src.scss, function(event){ gulp.start('csscomb')});
  watch(tmp.scss, function(event){ gulp.start('moveCombedCss')});
  watch(tmp.scss, function(event){ gulp.start('compass')});
});

説明

今まで

cssCombなしだとsrcからdistへコンパイルしていた

これから

まずはtmpにcssCombしたscssを吐き出し、
tmpからdistへコンパイルしつつ、tmpからsrcへと整えられたscssもコピーする。

src ⇔ 　tmp はそのままだと無限ループしてしまうので、
ファイルが更新されている場合のみコピーすることにする。
そのためにgulp-changed-in-placeを使用してます。

これで何も考えなくともscssを保存するだけで自動的にプロパティを並べ替えてくれる！

補足

• 最低限のものだけ記載していますが、autoprefixerとか適宜追加してください
• gulp-changed-in-place の他に gulp-changed というプラグインもあるのだけど、これだとうまくいかなかった
• scssのコンパイルにはcompassを使用していますが、PostCSSにそのうちする予定

もっとこうした方が良い、などあったらご意見ください！