sourcemap を使いたい

9737 ワード
SourceMap SourceMap テキストリンク

Chromeのインスペクタでscssが確認できるようにするために、sourcemapを使いたい。
と思って調べてみると、sass側の設定とブラウザ側の設定手順が書かれたものがいっぱい出てくる。
でもこれらはちょっと古い情報。
そもそも現バージョンのChromeには、該当の項目（Experiments の「Sass stylesheet debugging」）がなくなってる。

ということで、gulp-sourcemaps を入れてみる。

npm install -D gulp-sourcemaps

gulpfile.js にオプションなどを設定する。

gulpfile.js
var sourcemaps = require('gulp-sourcemaps'); 　←　★（１）

gulp.task('css', function(){
  return sass('./src/scss/', {
    style: 'expanded',// nested, compact, compressed, expanded
    sourcemap: true 　←　★（２）
  })
  .on('error', function(err){
    console.error('Error!', err.message);
  })
  .pipe(sourcemaps.write()) 　←　★（３）
  .pipe(gulp.dest('./public/resources/css'));
});

（１）で読み込んで
（２）で sourcemap: true を設定して
（３）で sourceMappingの書き出し。オプションはここで設定する。（※オプション設定の詳細はこちらを参照）

デフォルトではsourceMappingはインラインでCSSファイル末尾に自動で書き出されるが、mapファイルとして生成してそれを読み込ませることもできる。

gulpfile.js
  .pipe(sourcemaps.write('maps', {         　←　★（１）
      includeContent: false,               　←　★（２）
      sourceRoot: '/public/resources/maps' 　←　★（３）
  }))

（１）mapファイルを書き出すディレクトリを指定
（２）オプション「includeContent」(default: true)を false にして
（３）mapファイルへのパスを指定する。

CSS関連のgulp設定まとめ。

gulpfile.js
//sass
gulp.task('sass', function (){
  return sass('./src/scss/', {
    style: 'expanded',
    sourcemap: true
  })
  .pipe(plumber())
  .on('error', function (err){
    console.error('Error!', err.message);
  })
  .pipe(sourcemaps.write())
  .pipe(gulp.dest('./public/resources/css'));
});


//pleeease
gulp.task('ple', ['sass'], function() {
  return gulp.src('./public/resources/css/*.css')
  .pipe(pleeease({
    sass: true,
    mqpacker: true,
    minifier: false,
    sourcemaps: true,
    autoprefixer: {'browsers': ['last 3 versions', 'ie 8', 'ios 5', 'android 2.3']}
  }))
  .pipe(gulp.dest('./public/resources/css'));
});

//watch
gulp.task('watch', function () {
  gulp.watch('./src/scss/*.scss', ['sass', 'ple']);
});