По сути, я хочу, чтобы исходные карты были доступны для моего неминифицированного и минимизированного вариантов моего файла site.css. Я бы хотел, чтобы мой конечный результат был:
В настоящее время я получаю только:
Я знаю, что мой скрипт gulp неверен, но не знаю, как это исправить. Мне нужны исходные карты для записи исходной карты в site.css до создания site.min.css. HALP! и спасибо
gulp.task('scss', gulp.series('bootstrap:scss', function compileScss() {
return gulp.src(['./site/assets/scss/*.scss'])
.pipe(sourcemaps.init())
.pipe(sass.sync({
outputStyle: 'expanded'
}).on('error', sass.logError))
.pipe(gulp.dest('./site/dist/css')) // outputs site.css
.pipe(postcss([autoprefixer(), cssnano()
]))
.pipe(sourcemaps.write('.'))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./site/dist/css')) //outputs site.min.css
}));Вам нужны только исходные карты для вашей неминифицированной версии, я бы представил NODE_ENV для выполнения минификации и исходных карт, а затем использовал глоток-если, чтобы узнать, находитесь ли вы в среде разработки или в производственной среде.
В качестве альтернативы у вас могут быть отдельные задачи сборки и разработки.
Использование process.env.NODE_ENV означает, что вы также можете использовать их в файлах postcss.config.js и т. д.
Я нашел это действительно хорошим, потому что он показывает вам, как вы можете использовать файл gulp.babel.js с Gulp 4. Я использовал 3.9.1, не желая обновляться до этой недели, но это очень помогло в понимании изменений по сравнению с v3> 4.