gulp シリーズ2 〜gulp-sassでのコンパイル時の整形〜

gulp-sassコンパイル時の整形

前回のgulpシリーズ1では、プラグインはgulp-sassのみをインストールしてみました。gulp-sassでのコンパイル後、cssファイルを覗いてみると、デフォルトでは以下のようになっていた。

コンパイル前

h1{
  color: red;
  &:hover{
    color: blue;
  }
}

コンパイル後

h1 {
  color: red; }
  h1:hover {
    color: blue; }

これでは見にくいCSSファイルになってしまう。。整形するにはどうしようかと調べてみたところ、cssbeautifyというプラグインでも整形できるのだが、sassにはオプションでoutputStyleを指定出来るらしい。outputStyleオプションを指定することでコンパイル後のcssのスタイルを指定することが出来る。sassをあまり勉強せずに、gulpをキッカケにsassを本意気でやろうと思い立った自分には目から鱗の情報だった。ありがとう同僚。

さて、outputStyleの指定は下記の通り。

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function(){
    gulp.src('develop/sass/**/*.scss')
        .pipe(sass({
            outputStyle: 'expanded'
        }))
        .pipe(gulp.dest('httpdocs/css/'));
});

これをコンパイルすると、こうなる。

h1 {
  color: red;
}

h1:hover {
  color: blue;
}

その他の出力スタイルはこちらを参考に。

めでたしめでたし。
今日はここまで。