将 node-sass 监视选项与 npm run-script 一起使用

Question

所以我在 npm 包脚本中运行任务，但我想在 npm start 中传递 watch 选项。

这有效：

 "scripts": {
  "scss": "node-sass src/style.scss dist/style.css -w"
}

这不会编译、观察或抛出任何错误：

 "scripts": {
  "scss": "node-sass src/style.scss dist/style.css",
  "start": "parallelshell \"npm run scss -- -w\""
}

没有parallelshell 或者没有速记都不能工作。

我认为问题是运行脚本在引号中传递了额外的参数，所以命令的输出如下：

 node-sass src/style.scss dist/style.css "-w"

我希望它能够在不添加任何依赖项的情况下工作。我错过了什么？

顺便说一句，我在带有命令提示符/git bash 的 Windows 10 中。

原文由 Ryan Metin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

-o 标志设置目录以输出 css。我有一个非观看版本“css”，因为观看版本“css：watch”~不会在运行后立即构建~，它只会在更改时运行，所以我打电话

npm run css

打电话之前

node-sass src/style.scss -wo dist

如果您只希望它在更改时运行，而不是在第一次运行时运行，只需使用

"css:watch": "node-sass src/style.scss -wo dist"

原文由 Ryan White 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

基于之前的答案，另一种选择是通过不重复 build 脚本中的 watch --- 脚本参数来利用 NPM 的 自定义脚本参数 来保持 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"
}

在上面的示例中， watch:sass 脚本的工作方式如下：

1. 运行 build:sass 脚本。这将编译您的 CSS。
2. 再次运行 build:sass 脚本，但这次包括 -w 标志。这将在您的 SASS 文件之一更改时编译您的 CSS。

注意在 --- watch:sass 脚本末尾使用的 -- 选项。这用于在执行脚本时传递自定义参数。从 文档：

从 npm@2.0.0 开始，您可以在执行脚本时使用自定义参数。特殊选项 – 由 getopt 使用来分隔选项的结尾。 npm 会将 – 之后的所有参数直接传递给您的脚本。

原文由 John Hildenbiddle 发布，翻译遵循 CC BY-SA 3.0 许可协议