gulp-sass で autoprefixer 組み合わせた時に sourcemap 見えない問題

gulp-sass で autoprefixer を使うと sourcemap が表示されない。

"gulp-autoprefixer": "^4.0.0",
"gulp-sass": "^2.3.2",
"gulp-sourcemaps": "^1.6.0",

として

gulp.task("sass",() =>
    gulp.src([dir.src + "/**/*.scss"])
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest([dir.env])
);

これだと、ソースマップは吐き出されてるけど、
console で見ても、css しか参照されない。

よくわからん。

ググったら、 魔法の2行を加えると動くとある。

即いいねボタン押してソースに反映してみる。

gulp.task("sass",() =>
    gulp.src([dir.src + "/**/*.scss"])
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write({includeContent: false}))
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(autoprefixer())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest([dir.env])
);

これで正確に sass の行数が参照可能。
autoprefixer の前に、sourcemaps のオプション使って、Mapをうまく継承してるっぽい。
sourcemaps が 2つ書き出されてた。すごい。

minify もしておきたい。

gulp-sass の Compressed 使うと sourcemap の位置が崩れるのは変わらずなので、
別のプラグインで minify する。
gulp-cssnano 使うと minify した時に " " が外れる場合があるので、
gulp-clean-css 使って minify する。

gulp.task("sass",() =>
    gulp.src([dir.src + "/**/*.scss"])
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(cleancss())
    .pipe(sourcemaps.write({includeContent: false}))
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(autoprefixer({ browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']  }))
    .pipe(sourcemaps.write())
    .pipe(flatten())
    .pipe(gulp.dest([dir.env])
);

これで、デプロイと同じ minify されたcssファイルで開発できる。

以上。