イナヅマTVログ

[Gulp] gulp-sass + gulp-autoprefixer + gulp-sourcemaps で SourceMap を出力したい

| 0件のコメント

gulp-sass, gulp-autoprefixer, gulp-sourcemaps で SourceMap が出力できない様子。
gulp-sass
gulp-autoprefixer
gulp-sourcemaps

使ってるタスク
https://www.npmjs.com/package/gulp-sass#source-maps

var sourcemaps = require('gulp-sourcemaps');
 
gulp.task('sass', function () {
 return gulp.src('./sass/**/*.scss')
  .pipe(sourcemaps.init())
  .pipe(sass().on('error', sass.logError))
  .pipe(sourcemaps.write())
  .pipe(gulp.dest('./css'));
});

gulp-sass のとこに書いてるやつだけど…
間に autoprefixer 入れると .map が正しく出力されない。

gulp-sourcemaps の issue にあった
Problem with gulp-sass ? Or gulp-autoprefixer ? Or gulp-sourcemaps ? #60

https://github.com/ByScripts/gulp-sample/blob/master/gulpfile.js

gulp.task('doesWork', function () {
  gulp.src('./src/sample.scss')
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(sourcemaps.write({includeContent: false}))
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(autoprefixer())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./dest/doesWork'))
});

う〜ん、だいぶトリッキー(?)な気がする。
いや〜、それにしても助かりました。

autoprefixer の後の stream が1つにまとまってるとこまでは確認できた、それがまずいらしい。
なので一度 inline にし後で load する、自力ではとても解決できなかった。
感謝!

コメントを残す

必須欄は * がついています