Gulp+Sourcemaps+PostCSS(Autoprefixer+通过CSNano实现最小化)

Question

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

• 站点.css
• 站点.min.css
• site.css.map
• 站点.css.min.map

目前，我只得到：

• 站点.css
• 站点.min.css
• 站点.css.min.map

我知道我的gullow脚本是错误的，但我不知道如何修复它。在创建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文件等中使用它们

我觉得这真的很好，因为它向你展示了如何在Gulp4中使用gull.babel.js文件。我一直在使用3.9.1，直到本周才升级，但这对理解v3>4的变化有很大帮助。