sourcemap-qiita.md

gulp-sass で sourcemap を出力する

gulp-sourcemaps を使います。

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

├── gulpfile.js
├── package.json
├── dist
│   ├── css
│   │   └── main.css
└── src
    └── scss
        ├── _module.scss
        └── main.scss

{
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^2.3.1",
    "gulp-minify-css": "^1.2.0",
    "gulp-sass": "^2.0.3",
    "gulp-sourcemaps": "^1.5.2"
  }
}

インライン出力

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

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/'));
});

外部ファイル出力

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

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/'));
});

autoprefixer を使う

autoprefixerを追加します。

var gulp         = require('gulp');
var sass         = require('gulp-sass');
var sourcemaps   = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer'); //autoprefixerを追加

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

css を minify する

css を minify します。 gulp-sass のオプションでoutputStyle: 'compressed'を指定するとその後の処理でマッピングがずれる（？）ようなので、別途gulp-minify-cssを追加しています。 advanced:falseにしないとセレクタがマージされるとずれる。

var gulp         = require('gulp');
var sass         = require('gulp-sass');
var sourcemaps   = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var minifyCss    = require('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}))
    .pipe(autoprefixer())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dist/css/'));
});