node.js 在 npm run-script 中使用 node-sass watch 选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34797140/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using node-sass watch option with npm run-script
提问by Ryan Metin
So I'm running tasks in npm package scripts but I want to pass the watch option in npm start.
所以我在 npm 包脚本中运行任务，但我想在npm start.
This works:
这有效：
"scripts": {
"scss": "node-sass src/style.scss dist/style.css -w"
}
This doesn't compile, watch, or throw any error:
这不会编译、观察或抛出任何错误：
"scripts": {
"scss": "node-sass src/style.scss dist/style.css",
"start": "parallelshell \"npm run scss -- -w\""
}
Doesn't work without parallelshell either or without shorthand.
没有parallelshell或没有速记也不能工作。
I assume the problem is the run-script is passing the extra argument in quotes, so the command comes out like:
我认为问题是运行脚本在引号中传递了额外的参数，所以命令出来如下：
node-sass src/style.scss dist/style.css "-w"
I'd like this to work without adding any dependencies. What am I missing?
我希望它可以在不添加任何依赖项的情况下工作。我错过了什么？
Btw, I'm in Windows 10 with command prompt/git bash.
顺便说一句，我在 Windows 10 中使用命令提示符/git bash。
回答by Ryan White
This is my setup for css building
这是我的 css 构建设置
"scripts": {
"css": "node-sass src/style.scss -o dist",
"css:watch": "npm run css && node-sass src/style.scss -wo dist"
},
"devDependencies": {
"node-sass": "^3.4.2"
}
The -o flag sets the directory to output the css. I have a non-watching version "css" because the watching version "css:watch" ~doesn't build as soon as it's run~, it only runs on change, so I call
-o 标志设置目录以输出 css。我有一个非观看版本“css”，因为观看版本“css：watch”~不会在运行时立即构建~，它只在更改时运行，所以我打电话
npm run css
before calling
打电话之前
node-sass src/style.scss -wo dist
If you only want it to run on change, and not when first run, just use
如果您只希望它在更改时运行，而不是在第一次运行时运行，只需使用
"css:watch": "node-sass src/style.scss -wo dist"
回答by jhildenbiddle
Building on the previous answers, another option is to leverage NPM's custom script argumentsto remain DRY by not repeating the buildscript arguments in the watchscript:
基于之前的答案，另一种选择是利用 NPM 的自定义脚本参数通过不重复build脚本中的watch脚本参数来保持 DRY ：
"scripts": {
"build:sass": "node-sass -r --output-style compressed src/style.scss -o dist",
"watch:sass": "npm run build:sass && npm run build:sass -- -w"
}
In the above example, the watch:sassscript works as follows:
在上面的例子中，watch:sass脚本的工作方式如下：
- Run the
build:sassscript. This will compile your CSS. - Run the
build:sassscript again, but this time include the-wflag. This will compile your CSS when one of your SASS file changes.
- 运行
build:sass脚本。这将编译您的 CSS。 build:sass再次运行脚本，但这次包括-w标志。当您的 SASS 文件之一更改时，这将编译您的 CSS。
Notice the --option used at the end of the watch:sassscript. This is used to pass custom arguments when executing a script. From the docs:
请注意脚本--末尾使用的选项watch:sass。这用于在执行脚本时传递自定义参数。从文档：
As of [email protected], you can use custom arguments when executing scripts. The special option -- is used by getopt to delimit the end of the options. npm will pass all the arguments after the -- directly to your script.
从 [email protected] 开始，您可以在执行脚本时使用自定义参数。特殊选项 -- 由 getopt 用于分隔选项的结尾。npm 会将 -- 之后的所有参数直接传递给您的脚本。
回答by Ryan Metin
Btw, here's my change:
顺便说一句，这是我的变化：
"scss": "node-sass src/style.scss dist/style.css",
"start": "parallelshell \"npm run scss && npm run scss -- -w\"
Edit: Change was asynchronous script runs, for the initial compile and then with the watch flag.
编辑：更改为异步脚本运行，用于初始编译，然后使用监视标志。
回答by Jujhar Singh
Simplest in my opinion, for a smaller quick project, is just open a new bash window and paste:
在我看来，对于较小的快速项目，最简单的方法是打开一个新的 bash 窗口并粘贴：
node-sass src/ -wo dist
回答by Mile Mijatovi?
If you want to watch and compile changes automatically when you save that changes in your .scssfile , you can use this solution:
如果要在将更改保存到.scss文件中时自动监视和编译更改，可以使用以下解决方案：
"scripts": {
"watch:sass": "node-sass -w path/to/your/scss --output-style compressed",
// example : node-sass -w public/styles/scss/bootstrap.scss public/styles/style.css --output-style compressed
}
回答by ALI ATTALAOUI
if you use vcode , I prefer to use extention watching sass live-server it's very useful way
如果您使用 vcode ，我更喜欢使用扩展观看 sass live-server 这是非常有用的方式
