如何使用 npm 脚本创建多个输出文件?
How to create multiple output files with npm scripts?
我正在尝试使用 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 文件夹提供多个输出?
简短回答:最好为此目的使用多个脚本
例如:
...
"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 脚本而不是 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 文件夹提供多个输出?
简短回答:最好为此目的使用多个脚本
例如:
...
"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
不能跨平台工作)