このようなgulp-sass
でsassをコンパイルし、gulp-autoprefixer
でベンダープレフィックスを自動付与する設定があり
const gulp = require('gulp'); const sass = require('gulp-sass'); const autoprefixer = require('gulp-autoprefixer'); gulp.task('style', () => gulp .src('/sassを置いているディレクトリ名/**/*.scss') .pipe(sass()) .pipe(autoprefixer()) .pipe(gulp.dest('css出力先ディレクトリ名/')) );
gulp-sourcemaps
を追加してcssのsourceMapファイルを書き出すよう改造すると!
何も起こりません…
const gulp = require('gulp'); const sass = require('gulp-sass'); const autoprefixer = require('gulp-autoprefixer'); const sourcemaps = require('gulp-sourcemaps'); gulp.task('style', () => gulp .src('/sassを置いているディレクトリ名/**/*.scss') .pipe(sass()) .pipe(autoprefixer()) .pipe(sourcemaps.write(.)) .pipe(gulp.dest('css出力先ディレクトリ名/')) );
sourcemapsのwriteとinitの設定を追加
このようにautoprefixer
よりも前にsourcemapsの設定を追加したら、出力されるようになります。
const gulp = require('gulp'); const sass = require('gulp-sass'); const autoprefixer = require('gulp-autoprefixer'); const sourcemaps = require('gulp-sourcemaps'); gulp.task('style', () => gulp .src('/sassを置いているディレクトリ名/**/*.scss') .pipe(sass()) .pipe(sourcemaps.write({ includeContent: false })) .pipe(init({ loadMaps: true })) .pipe(autoprefixer()) .pipe(sourcemaps.write(.)) .pipe(gulp.dest('css出力先ディレクトリ名/')) );