前提・実現したいこと
タイトルの通り、sourcemap, csscomb, clean-css, autoprefixerを同時に適用させたいです。
やりたいこととしては、「sassをコンパイルしたら、マップが作成され、プレフィックス付与され、その後整形され、同時にminfyも作成される」です。
どこかの記事を参考にしながら書いたのですが、マップが正しくchrome上で反映されません。(sassのファイル名が表示されず、コンパイル後のcssが表示されてしまう)
マップ自体は作成され、ほかの処理(autoprefixerやminfy)は正しくされています。
バージョン
npm => 6.4.1
gulp => 3.9.1
使っているプラグイン
const autoprefixer = require('gulp-autoprefixer') const cleanCSS = require('gulp-clean-css') const csscomb = require('gulp-csscomb') const notify = require('gulp-notify') const plumber = require('gulp-plumber') const rename = require('gulp-rename') const sass = require('gulp-sass') const sourcemaps = require('gulp-sourcemaps')
該当のソースコード
// sass gulp.task('sass', () => { gulp.src([json.paths.src + 'scss/**/*.scss', '!' + json.paths.src + 'scss/**/_*.scss']) .pipe(plumber({ errorHandler: notify.onError('<%= error.message %>') })) .pipe(sourcemaps.init()) .pipe(sass()) .pipe(sourcemaps.write({ includeContent: false })) .pipe(sourcemaps.init({ loadMaps: true })) .pipe(autoprefixer({ browsers: ['last 2 versions', 'iOS >= 8.1', 'Android >= 4.4'], cascade: false })) .pipe(csscomb()) .pipe(gulp.dest(json.paths.dest + json.paths.assets + 'css/')) .pipe(rename({ suffix: '.min' })) .pipe(cleanCSS()) .pipe(sourcemaps.write('./')) .pipe(gulp.dest(json.paths.dest + json.paths.assets + 'css/')) })
あなたの回答
tips
プレビュー