gulpからlibsassを使う

Sassを使う場合、遅い方のRuby実装と速い方のlibsassがある。nodeからlibsassを使うにはnode-sassが利用可能だ。これをgulpから使うためにgulp-sassが用意されている。

gulpでの利用方法

npm installする。

npm install gulp-sass --save-dev

タスク設定

styles.babel.js

import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
 
const $ = gulpLoadPlugins();
const src = 'frontend/app/styles';
const dist = 'public/assets/styles';
 
gulp.task('styles', () => {
  return gulp.src(src + '/*.scss')
    .pipe($.plumber())
    .pipe($.sourcemaps.init())
    .pipe($.sass.sync({
      outputStyle: 'expanded',
      precision: 10,
      includePaths: ['.']
    }).on('error', $.sass.logError))
    //.pipe($.autoprefixer({browsers: ['last 1 version']})) // vendor prefixを使いたい場合
    .pipe($.sourcemaps.write('.'))
    .pipe(gulp.dest(dist));
});
 
gulp.task('styles:minify', ['styles'], () => {
  return gulp.src(dist + '/**/*.css', {base: dist})
    .pipe($.if('*.css', $.minifyCss({compatibility: '*'})))
    .pipe($.rename((path) => {
      path.basename += '.min';
    }))
    .pipe(gulp.dest(dist));
});

SASS対応状況

http://sass-compatibility.github.io/

これを見ると、libsass 3.3でRuby版3.4と同じになっているように見える。現在はlibsass 3.4.0が最新版になっていた。Mac 10.11でmasterをクローンしてテストを実行してみた。

$ ./script/spec 
 
 _     ___ ____ ____    _    ____ ____  
| |   |_ _| __ ) ___|  / \  / ___/ ___| 
| |    | ||  _ \___ \ / _ \ \___ \___ \ 
| |___ | || |_) |__) / ___ \ ___) |__) |
|_____|___|____/____/_/   \_\____/____/ 
 
sassc: 3.4.0-3-gc611
libsass: 3.4.0-4-ga6f5
sass2scss: 1.1.0
sass: 3.4
Run options: --seed 35901
 
# Running:
 
...
 
Finished in 53.084004s, 111.2011 runs/s, 105.7004 assertions/s.
 
5903 runs, 5611 assertions, 5 failures, 0 errors, 287 skips
 
You have skipped tests. Run with --verbose for details.
make: *** [test_build] Error 1

失敗しているテストケースが5件あったものの、ほとんどのテストが実行された。

スプライト画像作成

https://github.com/Ensighten/spritesmith

Compassにもある機能だが、探したら別のツールがあった。gulpプラグインもあった。これでもうCompassいらないと思ったし、ビルド時間が致命的だったのでもう使いたくない。