1

我正在尝试 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 文件夹的多个输出的单个脚本？

4

1 回答 1

4

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

例如：

...
"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/"
...

（注意唯一的区别是输出/目标路径）

然后考虑将所有与样式相关的任务分组为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通过 CLI 运行，并执行所有任务。

注意：您会发现有时脚本名称不需要用 a:prod或:dev后缀来区分，因为一个脚本可以用于任一目的（两者dev或build）。但是，通常当输出/目标路径不同时，请考虑在必要时:dev或:prod

为什么 ？

是的，诚然，它相当冗长且不是特别DRY，但人类更容易阅读和维护。IMO “更容易阅读”和更好的可维护性每次都获胜。

此外，您可能会发现，有时不仅输出/目标路径在 和 的要求之间存在dev差异build。例如，出于某种dev目的，您可能希望名为的任务"scss:dev"还包含 sourceMaps选项以便于调试 - 但您并不特别希望最终构建/dist 代码中包含源映射。

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

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

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

...
"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.scss输出初始的main.css. 然后我们将cat副本main.css输出到该dist文件夹​​。（注意：这是使用catw而不是cat因为cat不能跨平台工作）

于 2017-02-27T16:42:36.123 回答