如何通过npm一次性完成CSS构建、压缩与前缀添加？

当然可以！而且这么做不仅能简化你的构建流程，还能避免生成多余的中间文件，让整个构建过程更高效。你可以通过**管道（|）**将各个步骤的输入输出直接串联起来，不需要先写入中间文件再读取，具体修改后的npm脚本如下：

"build:css": "node-sass --source-map true sass/styles.scss | postcss --use autoprefixer -b 'last 2 versions' | postcss --use cssnano > styles.min.css"

脚本执行逻辑说明： #

• 第一步：node-sass --source-map true sass/styles.scss 编译SCSS文件为原生CSS，并生成source map
• 第二步：通过管道|将上一步的输出直接传给postcss --use autoprefixer -b 'last 2 versions'，自动添加浏览器前缀
• 第三步：再通过管道将加完前缀的CSS传给postcss --use cssnano，进行代码压缩
• 最后：将最终处理后的压缩CSS写入styles.min.css文件

如果需要保留完整的source map传递（确保最终的压缩CSS也能关联到原始SCSS文件），可以给每个postcss命令加上--map参数：

"build:css": "node-sass --source-map true sass/styles.scss | postcss --use autoprefixer -b 'last 2 versions' --map | postcss --use cssnano --map > styles.min.css"

这样修改后，你只需要执行npm run build:css就能完成所有构建步骤，完全替代原来的prebuild:css、prefix:css和build三个脚本啦。

内容的提问来源于stack exchange，提问作者KSPR