如何让 node-sass watch 和 live reload 从单个 NPM 脚本工作？答案

【问题标题】：How can I get node-sass watch and live reload to work from a single NPM script?如何让 node-sass watch 和 live reload 从单个 NPM 脚本工作？
【发布时间】：2016-03-24 20:32:15
【问题描述】：

从package.json 中获取以下脚本部分：

"scripts":{
    "sass:watch": "npm run sass -- -w ./src/public/stylesheets -r --source-map true",
    "livereload": "live-reload --port 9091 ./src/**/*",
    "dev:watch" : "npm run sass:watch; npm run livereload"
}

我怎样才能从 dev:watch 成功地同时运行 sass:watch 和 livereload 任务，而不会相互阻塞strong> 任务？

目前，当我运行 npm run dev:watch sass:watch 会阻止 livereload。

如果我对它们重新排序，也会出现同样的问题。

【问题讨论】：

顺便说一句，live-reload 是哪个？有一个 this 似乎没有 npm run。还是我错过了什么..

标签： node.js npm livereload node-sass

【解决方案1】：

这是我用于基于 npm 脚本的小型项目的方法：我只需运行 npm start 并开始工作；）

concurrently 并行启动相应的任务
node-sass负责sass->css的生成
它需要使用--watch 选项重新运行 sass 任务以监控 sass相关变更
最后lite-server 使用内置的实时重载支持启动服务器。默认情况下，它会监视以下文件扩展名的更改：html,htm,css,js，但可以使用配置文件 bs-config.json 或 bs-config.js 轻松调整所有内容。

package.json的相关部分：

  ...
  "scripts": {
    "start": "concurrently --names \"SASS,WATCH,SERVE\" -c \"bgBlue.bold,bgMagenta.bold,bgGreen.bold\" \"npm run sass\" \"npm run sass:watch\" \"npm run serve\"",
    "serve": "lite-server",
    "sass": "node-sass style.sass --output ./ --indent-width 4 --output-style expanded --indent-type space --source-map true",
    "sass:watch": "npm run sass -- --watch"
  },
  ...
  "devDependencies": {
    "lite-server": "^2.2.2",
    "concurrently": "^3.5.0",
    "node-sass": "^4.5.3"
  }

这对我来说在 Windows 10 和基于 GNU/Linux 的发行版（如 Ubuntu）上效果很好。

【讨论】：

【解决方案2】：

你可以试试 concurrently npm 包

npm install concurrent --save-dev

然后用它来运行你的两个脚本：

"dev:watch": "concurrently  \" npm run sass:watch \" \" npm run livereload  \" ",

您可以在此处找到有关该软件包的信息： https://www.npmjs.com/package/concurrently

【讨论】：

【解决方案3】：

使用单个 & 符号：

"dev:watch" : "npm run sass:watch & npm run livereload"

&& 串行运行任务； & 并行。

【讨论】：

完美运行。我喜欢这样的答案。非常简单，不需要其他依赖。
这是否适用于跨平台或仅基于 Linux 和 OSX？换句话说，它对 Windows 友好吗？
它只适用于UNIX-like 环境，因为有&&符号。如果你想在 Windows 上运行它，你最好使用"dev:watch": "concurrently \" npm run sass:watch \" \" npm run livereload \" "，如下所述，或者"dev": "npm-run-all --parallel sass:watch livereload"npm-run-all。我已经测试了WSL2，它启动了实时服务器和 sass 编译器，但它不会重新加载页面。甚至 git bash 对我也不起作用（我可能会错过一些东西，但我试过了，它就像在 cmd 控制台中一样卡住了）

【解决方案4】：

使用parallelshell。

Here's how I'm doing it.

使用实时服务器，它看起来像：

"serve": "live-server",
"start": "parallelshell \"npm run scss && npm run scss -- -w\" \"npm run serve\""

【讨论】：

我认为最好使用concurrently 或npm-run-all，因为它们更新更频繁，社区更广泛。 parallelshell 是三年前更新的。

【解决方案5】：

看看Grunt Concurrent

如果您需要同时运行多个阻塞任务（如 nodemon 和 watch），此任务也很有用。

【讨论】：

【解决方案6】：

AFAIK，你不能，以一种有用的方式。

您可以通过将& 附加到其命令行来将一项任务推送到后台，但即使您^C 停止正在运行的 NPM 任务，该任务也会继续运行。

或者，您可以拨打npm run ... 两次，然后拨打一次：

$ npm run sass:watch &
$ npm run livereload

但这在 IMO 中也很混乱。

如果你想要这种东西，考虑使用gulp。

【讨论】：