Gulp +源地图+ PostCSS（自动前缀+通过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之前，我需要sourcemap将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 4中使用gulp.babel.js文件。我一直不愿意在本周之前使用3.9.1进行升级，但这在理解上有很大帮助对v3> 4所做的更改。