如何让 node-sass watch 和 live reload 从单个 NPM 脚本运行？

Question

从 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"
}

我怎样才能成功地将 sass:watch 和 livereload 任务都交给运行，互不阻塞，从dev:watch任务?

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

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

Answer 1

据我所知，你不能以一种有用的方式。

您可以通过将 & 附加到其命令行来将一项任务推到后台，但是即使您 ^C 停止 [=26] 也会保留任务运行 =] NPM 任务。

或者，您可以调用 npm run ... 两次，然后调用一次：

$ npm run sass:watch &
$ npm run livereload

但在我看来，这也太乱了。

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

Answer 2

看看Grunt Concurrent

This task is also useful if you need to run multiple blocking tasks like nodemon and watch at once.

Answer 3

使用parallelshell.

live-server 看起来像：

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

Answer 4

使用一个符号：

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

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

Answer 5

您可以为 npm

尝试 concurrently 包

npm install concurrently --save-dev

然后将其用于运行您的两个脚本：

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

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

Answer 6

这就是我用于基于 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 以及 Ubuntu.

等基于 GNU/Linux 的发行版上效果很好

如何让 node-sass watch 和 live reload 从单个 NPM 脚本运行？

How can I get node-sass watch and live reload to work from a single NPM script?

node.js

npm

livereload

node-sass