如何使用 npm 脚本创建多个输出文件？

Question

我正在尝试使用 npm 脚本而不是 gulp。我已经运行解决了这个问题，我可以有一个 npm 脚本吗，例如，用 node-sass 编译 scss 文件用于开发和生产，或者我应该有多个脚本用于这个目的：

这是我的 package.json:

...

"scripts": {
    "scss": "node-sass app/src/styles/main.scss --output app/.tmp/styles/",
    "autoprefixer": "postcss -u autoprefixer -r app/.tpm/styles/*",
    "scss:prod": "node-sass app/src/styles/main.scss --output app/dist/styles/",
    "autoprefixer:prod": "postcss -u autoprefixer -r app/dist/styles/*",
    "cssnano": "postcss -u cssnano -r app/dist/styles/main.css",
    "build:styles": "npm run scss:prod && npm run autoprefixer:prod && npm run cssnano"
},

是否可以将我的 scss 任务拆分为单个脚本，为 dev 和 prod 文件夹提供多个输出？

Answer 1

简短回答：最好为此目的使用多个脚本

例如：

...
"scss:dev": "node-sass app/src/styles/main.scss --output app/dev/styles/"
"scss:prod": "node-sass app/src/styles/main.scss --output app/dist/styles/"
...

（注意唯一的区别是 output/destination 路径）

然后考虑将所有与样式相关的任务分组为 dev 或 prod。例如：

...
"build-styles:prod": "npm run scss:prod && ..."
"build-styles:dev": "npm run scss:dev && ..."
...

您还可以为 dev 编写一个脚本，为 build 编写一个脚本来完成所有任务，即除了处理与样式相关的任务之外的那些。例如：

...
"dev": "build-styles:dev && ..." 
"build": "build-styles:prod && ..."
...

然后您可以根据需要通过 CLI 运行 $ npm run dev 或 $ npm run build 并执行所有任务。

注意：你会发现有时候一个脚本名并不需要用 :prod 或 :dev 后缀区分，因为一个脚本可以用于任一目的（dev 或 build）。但是，通常当 output/destination 路径不同时，请根据需要考虑使用 :dev 或 :prod 作为前缀。

为什么？

是的，诚然，它相当冗长，而且不是特别 DRY，但它更易于人们阅读和维护。 IMO "easier to read" 和更好的可维护性每次都会获胜。

此外，您可能会发现，有时 dev 和 build 的要求不同的不仅仅是 output/destination 路径。例如，出于 dev 目的，您可能想要您名为 "scss:dev" 的任务也包括 sourceMaps option 以便于调试 - 但您没有我特别希望最终 build/dist 代码中包含源映射。

但是，我必须有一个脚本，否则世界将停止旋转:)

Is it possible to split my scss task into single script with multiple outputs for dev and prod folders?

是的，有一个脚本是可能的。鉴于您的 OP 中名为 "scss" 的脚本，您可以像这样使用链接 (&&)：

...
"scss": "node-sass app/src/styles/main.scss --output app/.tmp/styles/ && node-sass app/src/styles/main.scss --output app/dist/styles/"
...

或者，使用额外的项目依赖项：

...
"scss": "node-sass app/src/styles/main.scss --output app/.tmp/styles/ && catw app/.tmp/styles/main.css > app/dist/styles/main.css"
...

这会编译输出初始 main.css 的 main.scss。然后我们 cat main.css 并输出副本到 dist 文件夹。 （注意：这是使用 catw instead of cat 因为 cat 不能跨平台工作）

如何使用 npm 脚本创建多个输出文件？

How to create multiple output files with npm scripts?

npm

npm-scripts