gulp-ruby-sass で source map が使えない場合

compileするscssファイルにsourceMappingURLを記述すること！

sass({sourcemap: true})でsource mapを作成したら自動でcssの最後に/*# sourceMappingURL=main.css.map */が記述され勝手にひも付くっしょと思いがちですがそんなことは無いので、自力でscssに書いておきましょう。

sass()の使い方

js

gulp.task('sass', function() {
  return gulp.src('sass/main.scss')
    .pipe(plumber())
    .pipe(sass({sourcemap: true}))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('css'))
    .pipe(notify({ message: 'Styles task complete' }));
});

とするとcssフォルダに、main.cssとmain.css.mapが作られます。あとは、main.cssの最後の行に下記のように記述。

js

・・・・
/*# sourceMappingURL=main.css.map */
});

途中でrename()すると不具合起きるので注意

js

gulp.task('sass', function() {
  return gulp.src('sass/main.scss')
    .pipe(plumber())
    .pipe(sass({sourcemap: true}))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(rename('main.css'))  // ← コイツ
    .pipe(gulp.dest('css'))
    .pipe(notify({ message: 'Styles task complete' }));
});

source mapがmain.cssとして作られ、main.css.mapは作られません。

style: 'compressed'は使えません

js

gulp.task('sass', function() {
    .pipe(sass({sourcemap: true, style: 'compressed'}))
});

compressedの場合はcssに記述した/*# sourceMappingURL=main.css.map */がコメントとして削除されてしまい、.cssと.mapがひも付きません。
nested, compact, expanded ならダイジョウブだけど、、、うーん圧縮したい。。。