gulp-sass で sourcemap を使う

10503 ワード
gulp CSS Sass SourceMap CSS テキストリンク

gulp-sourcemaps を使って、マップファイルを外部出力して、css を minify するところまで 3 ステップでやってみます。

前提とするディレクトリ構成とパッケージはこんな感じです。

├── gulpfile.js
├── package.json
├── dist
│   └── css
│       └── main.css
└── src
    └── scss
        ├── _module.scss
        └── main.scss
package.json
{
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-minify-css": "^1.2.0",
    "gulp-sass": "^2.0.4",
    "gulp-sourcemaps": "^1.5.2"
  }
}

※gulp-sass の 2.0.3 以前のバージョンでは、windows 環境でのソースマップの出力に不具合があるようなので、windows 環境でうまくいかない場合はバージョンを上げてみましょう。

1. インライン出力

css ファイルにマッピング情報が追記されます。

gulpfile.js
var gulp       = require('gulp');
var sass       = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');

/* sass task */
gulp.task('sass', function() {
  return gulp.src('src/scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist/css/'));
});

2. 外部ファイル出力

インライン出力だと css ファイルの容量が増えるのが気になるので、外部ファイルに出力します。

gulpfile.js
var gulp       = require('gulp');
var sass       = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');

/* sass task */
gulp.task('sass', function() {
  return gulp.src('src/scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(sourcemaps.write('../maps')) // マップファイルを出力するパスを指定します
    .pipe(gulp.dest('dist/css/'));
});

3. css を minify する

css を minify します。
gulp-sass のオプションでoutputStyle: 'compressed'を指定すればいいような気もしますが、compressedにするとなぜかソースマップのマッピングがずれてしまうようなので、別途gulp-minify-cssを使用して minify します。

また、gulp-minify-cssでセレクタがマージされた際にもマッピングがずれるようなので、オプションでadvanced:falseを追加しています。

gulpfile.js
var gulp       = require('gulp');
var sass       = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var minifyCss  = require('gulp-minify-css'); // gulp-minify-css を追加

/* sass task */
gulp.task('sass', function() {
  return gulp.src('src/scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({
      // outputStyle: 'compressed'
    }))
    .pipe(minifyCss({advanced:false})) // minify
    .pipe(sourcemaps.write('../maps'))
    .pipe(gulp.dest('dist/css/'));
});

まとめ

手元の環境ではこれでとりあえずソースマップが使えるようになりました。
ただ、compressedにするとずれる問題などはどこに原因があるのかわかっていない状態で回避していますので、もっといいやり方などあればぜひコメントで教えてください。