55
63

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

gulp-sass で sourcemap を使う

Last updated at Posted at 2015-07-16

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にするとずれる問題などはどこに原因があるのかわかっていない状態で回避していますので、もっといいやり方などあればぜひコメントで教えてください。

55
63
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
55
63

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?