我想NPM脚本而不是一饮而尽。而且我碰到这个问题,我可以有一个NPM脚本,例如,编译节点萨斯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任务拆分为与用于开发和督促文件夹多个输出一个脚本?
答案很简单:这是最好使用多个脚本用于这一目的
例如:
...
"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
或:dev
后缀来区分作为一个脚本可以用于任何目的(包括dev
或build
)。然而,典型地,当输出/目标路径然后不同考虑与任一:dev
或根据需要:prod
前缀。
为什么呢?
是的,不可否认这是相当繁琐,不是特别DRY,但它更容易为人们阅读和维护。 IMO“更容易阅读”和更好的可维护性每次都会获胜。
此外,你可能会发现,有时候它不仅是对于dev
和build
的要求之间不同的输出/目标路径。举个例子,对于dev
目的,你可能希望你的任务命名"scss:dev"
还包括更容易调试sourceMaps option - 但你并不特别想包含在最终版本/ DIST代码源地图。
但是,我必须有一个脚本或全世界都会停止旋转:)
是否有可能我SCSS任务拆分为与用于开发和督促文件夹多个输出一个脚本?
是的,它可能有一个脚本。鉴于您的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.scss
的main.css
。然后,我们cat
的main.css
和输出的副本到dist
文件夹。 (注:这是使用的,而不是catw cat因为cat
不起作用跨平台)