Gulp + Sourcemaps + PostCSS（Autoprefixer + 通过 CSSnano 缩小）

Question

基本上，我希望源地图可用于我的未缩小版和缩小版的 site.css 文件。我希望我的最终结果是：

• site.css
• site.min.css
• site.css.map
• site.css.min.map

目前，我只得到：

• site.css
• site.min.css
• site.css.min.map

我知道我的 gulp 脚本有问题，但我不知道如何修复它。在创建 site.min.css 之前，我需要 sourcemaps 将 sourcemap 写入 site.css。停！ 谢谢你

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
}));

Answer 1

您只需要未缩小版本的源图，我会引入一个 NODE_ENV 来进行缩小和源图，然后使用gulp-if 来查看您是处于开发环境还是生产环境

或者，您可以有单独的构建和开发任务。

使用process.env.NODE_ENV 意味着您也可以在postcss.config.js 文件等中使用它们

我发现this 非常好，因为它向您展示了如何将 gulp.babel.js 文件与 Gulp 4 一起使用。我使用 3.9.1 直到本周都不愿意升级，但这对理解更改非常有帮助从 v3>4.