npm script命令同時進行多個監(jiān)聽服務的方法

更新時間：2018年08月15日 09:33:33 作者：木子昭

這篇文章主要介紹了npm script命令同時進行多個監(jiān)聽服務的方法，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧

最近在搭建一個靜態(tài)頁面偏多的網(wǎng)站, 用vue或React有點大材小用,使用純html / css / js 又不好用, 于是就用npm手動搭建一個簡單的本地開發(fā)環(huán)境, 本地環(huán)境要實現(xiàn)幾個基本功能

在本地開啟http服務 ; 且開啟服務后, 會自動打開瀏覽器
瀏覽器自動刷新 ; 源碼變化后, 瀏覽器會自動刷新顯示內(nèi)容
支持sass語法 ; 將sass代碼實時轉(zhuǎn)換為css
支持es6語法 ; 使用babel將es6轉(zhuǎn)換為es5
開啟http服務, 自動開啟瀏覽器, 實現(xiàn)瀏覽器自動刷新的實現(xiàn)思路是,在項目內(nèi)用npm安裝 live-server
支持sass語法的實現(xiàn)思路是, 用npm安裝 node-sass
支持es6語法的實現(xiàn)思路是, 用npm安裝 babel , babel-cli

目前看來一切完美

我們把幾個命令配置到 package.json 內(nèi)的 scripts 中

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "sass --watch pc/static/scss:pc/static/css mobile/static/scss:mobile/static/css --sourcemap=none&&live-server --port=1208&&babel pc/static/es6-js -d pc/static/js --watch&&babel mobile/static/es6-js -d mobile/static/js --watch&&echo 好好工作!'"
 }

運行之后發(fā)現(xiàn)了新的問題, 那就是通過 && 連接起來的命令,會按照順序執(zhí)行, 一旦有類似 sass pc/static/scss:pc/static/css --watch 這種"阻塞"的命令, 后面的命令將會無法執(zhí)行...

解決方法: 用concurrently

https://www.npmjs.com/package/concurrently

concourrently的作用就是讓"阻塞"的命令, 可以并發(fā)執(zhí)行, 我們改寫 package.json 內(nèi)的 scripts 中

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "concurrently 'sass --watch pc/static/scss:pc/static/css mobile/static/scss:mobile/static/css --sourcemap=none' 'live-server --port=1208' 'babel pc/static/es6-js -d pc/static/js --watch' 'babel mobile/static/es6-js -d mobile/static/js --watch' 'echo 好好工作!'"
 },

運行效果

在項目內(nèi)執(zhí)行 npm start