Gulp + Sourcemaps +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

我知道我的剧本是错的，但我不知道如何修复它。在创建site.css之前，我需要源代码地图将源代码地图写入site.min.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，然后使用吞咽来查看您是在开发环境还是生产环境中。

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

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

我发现这非常好，因为它向您展示了如何使用Gulp 4使用gulp.babel.js文件。我使用3.9.1直到本周才进行升级，但这对理解v3>4的更改有很大帮助。