Question

我正在尝试使用npm脚本而不是gulp。我遇到了这个问题，例如，我是否可以使用一个npm脚本来编译带有node-sass的scss文件以进行开发和prod，或者我应该有多个脚本用于此目的：

这是我的 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/"
...

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

然后考虑将所有与样式相关的任务分组为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或{区分开来{1}}后缀，因为一个脚本可以用于任何目的（:dev或dev）。但是，通常在输出/目标路径不同时，请根据需要考虑使用build或:dev作为前缀。

为什么？

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

此外，您可能会发现有时不仅:prod和dev的要求不同，输出/目标路径也不同。例如，对于build目的，您可能希望您的dev任务也包含sourceMaps option以便于调试 - 但您并不特别想要源映射包含在最终的构建/ dist代码中。

但是，我必须有一个脚本或世界将停止旋转：）

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

是的，可以有一个脚本。鉴于您的OP中名为"scss:dev"的脚本，您可以使用链接（"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" ...的{{1}}。然后我们main.scss main.css并将副本输出到cat文件夹。 （注意：这是使用catw而不是cat，因为main.css无法跨平台工作）

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

1 个答案: