npm scripts异常：CSS未压缩、文件排除失效（仅start脚本触发）

问题1：copy:assets排除规则不生效 #

你的排除路径里多了个多余的点（.src），导致无法匹配实际的src目录，排除规则因此失效。同时watch:assets的路径也多了个前斜杠，需要一并修正。

修正后的相关命令：

"copy:assets": "copyfiles -e src/assets/scss/**/* -e src/assets/js/**/* -u 1 ./src/assets/**/* dist",
"watch:assets": "onchange \"src/assets/**/*\" -- npm run copy:assets"

问题2：watch模式下CSS未压缩 #

当前watch:sass仅调用Sass完成编译，没有执行postbuild里的autoprefixer兼容处理和cssnano压缩步骤，所以CSS文件未被压缩。提供两种解决方式：

方式1：让Sass直接输出压缩后的CSS #

修改watch:sass命令，添加--style compressed参数，让Sass编译时直接生成压缩文件：

"watch:sass": "sass --no-source-map --style compressed --watch src/assets/scss:dist/assets/css"

方式2：监听CSS变化自动触发PostCSS处理 #

通过onchange监听编译后的CSS文件，自动执行PostCSS的兼容和压缩操作：

1. 新增postcss:watch脚本：

"postcss:watch": "onchange \"dist/assets/css/*.css\" -- postcss dist/assets/css/*.css -u autoprefixer cssnano -r --no-map"

2. 修改watch脚本，并行运行所有监听任务：

"watch": "npm-run-all --parallel watch:*"

最终修正后的完整scripts示例 #

"scripts": {
  "build:sass": "sass --no-source-map src/assets/scss:dist/assets/css",
  "build:js": "uglifyjs-folder ./src/assets/js -o ./dist/assets/js/main.js",
  "copy:assets": "copyfiles -e src/assets/scss/**/* -e src/assets/js/**/* -u 1 ./src/assets/**/* dist",
  "copy:html": "copyfiles -u 1 ./src/*.html dist",
  "copy": "npm-run-all --parallel copy:*",
  "watch:assets": "onchange \"src/assets/**/*\" -- npm run copy:assets",
  "watch:html": "onchange \"src/*.html\" -- npm run copy:html",
  "watch:sass": "sass --no-source-map --style compressed --watch src/assets/scss:dist/assets/css",
  "postcss:watch": "onchange \"dist/assets/css/*.css\" -- postcss dist/assets/css/*.css -u autoprefixer cssnano -r --no-map",
  "watch": "npm-run-all --parallel watch:*",
  "serve": "browser-sync start --server dist --files dist",
  "start": "npm-run-all copy --parallel watch serve",
  "build": "npm-run-all copy:html build:*",
  "postbuild": "postcss dist/assets/css/*.css -u autoprefixer cssnano -r --no-map"
}

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