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 する、自力ではとても解決できなかった。
感謝!