8

从 a 中获取以下脚本部分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？

目前，当我运行blocks时。npm run dev:watch sass:watchlivereload

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

4

6 回答 6

13

使用单个 & 符号：

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

&&串行运行任务；&在平行下。

于 2016-05-15T05:19:49.107 回答
8

你可以试试 npm 的并发包

npm 同时安装 --save-dev

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

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

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

于 2017-02-11T18:14:41.077 回答
5

使用并行外壳。

这就是我的做法。

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

"serve": "live-server",
"start": "parallelshell \"npm run scss && npm run scss -- -w\" \"npm run serve\""
于 2016-01-15T18:02:15.213 回答
3

这就是我用于基于 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）上对我来说效果很好。

于 2017-07-19T07:31:10.617 回答
1

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

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

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

$ npm run sass:watch &
$ npm run livereload

但这也很混乱。

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

于 2015-12-18T09:26:30.623 回答
0

看看Grunt 并发

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

于 2015-12-18T10:12:00.153 回答