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

Taking the following scripts section from a package.json:

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

How can I successfully get both the sass:watch and livereload tasks to run, without blocking each other, from the dev:watch task?

我怎样才能成功地获得sass:watch和livereload任务,从dev:watch任务中运行,而不会相互阻塞?

Currently, when I run npm run dev:watch sass:watch blocks livereload.

目前,当我运行npm run dev:watch sass:watch blocks livereload。

If I reorder them, the same problem occurs.

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

6 个解决方案

#1

Use parallelshell.

Here's how I'm doing it.

这就是我在做的方式。

With live-server it'll look like:

使用实时服务器,它看起来像:

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

#2

you could try the concurrently package for npm

你可以尝试npm的并发包

npm install concurrently --save-dev

npm并发安装--save-dev

then use it to run both of your script:

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

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

you can find info about the package here: https://www.npmjs.com/package/concurrently

你可以在这里找到关于包的信息:https://www.npmjs.com/package/concurrently

#3

Use a single ampersand:

使用单个&符号:

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

“dev:watch”:“npm run sass:watch&npm run livereload”

&& runs tasks in serial; & in parallel.

&&以串行方式运行任务; & 在平行下。

#4

AFAIK, you can't, in a useful way.

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

You could push one task to the background by appending & to its command line, but that would keep the task running even when you ^C to stop the running NPM task.

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

Alternatively, you can call npm run ... twice and bg one:

或者,你可以调用npm run ...两次和bg one:

$ npm run sass:watch &
$ npm run livereload

But that's pretty messy too IMO.

但IMO也是如此混乱。

If you want this sort of thing, consider using gulp.

如果你想要这种东西,可以考虑使用gulp。

#5

This is what I use for small npm script based projects: I simply run npm start and start working ;)

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

concurrently launches the corresponding tasks in parallel

同时并行启动相应的任务

node-sass is responsible for the sass->css generation

node-sass负责sass-> css生成

it needs to reran the sass task with the --watch option for monitoring of sass related changes

它需要使用--watch选项重新启动sass任务,以监控与sass相关的更改

and finally lite-server starts the server with the build-in live-reload support. By default, it watches for changes for the following file extensions: html,htm,css,js, but everything can be easily adjusted with the configuration files bs-config.json or bs-config.js.

最后,lite-server使用内置的live-reload支持启动服务器。默认情况下,它会监视以下文件扩展名的更改:html,htm,css,js,但可以使用配置文件bs-config.json或bs-config.js轻松调整所有内容。

Relevant parts of the package.json:

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

This works well for me on Windows 10 and as well as on the GNU/Linux based distros like Ubuntu.

这对我在Windows 10以及基于GNU / Linux的发行版(如Ubuntu)上都很有用。

#6

Take a look at Grunt Concurrent

看看Grunt Concurrent

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

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

#1