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 任务，而不会相互阻止 { {1}} 任务？

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

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

Answer 1

您可以尝试npm

的并发包

npm并发安装--save-dev

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

Person

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

Answer 2

使用parallelshell。

Here's how I'm doing it.

使用直播服务器，它看起来像：

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

Answer 3

使用单个＆符号：

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

&&以串行方式运行任务; &并行。

Answer 4

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

concurrently并行启动相应的任务
node-sass负责sass-＆gt; css生成
需要使用--watch选项重新启动sass任务以进行监控 sass相关更改
最后lite-server使用内置的live-reload支持启动服务器。默认情况下，它会监视以下文件扩展名的更改：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）。

Answer 5

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

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

或者，您可以拨打npm run ...两次并点击一次：

$ npm run sass:watch &
$ npm run livereload

但IMO也是如此混乱。

如果您想要此类内容，请考虑使用gulp。

Answer 6

查看Grunt Concurrent

如果您需要运行多个阻塞任务（如nodemon）并立即观看，此任务也很有用。

如何通过单个NPM脚本获取node-sass监视和实时重新加载？

6 个答案: