npm script指令同時開啟多個監聽服務concurrently

最近在搭建一個靜态頁面偏多的網站, 用vue或React有點大材小用,使用純html / css / js 又不好用, 于是就用npm手動搭建一個簡單的本地開發環境, 本地環境要實作幾個基本功能

• 在本地開啟http服務; 且開啟服務後, 會自動打開浏覽器
• 浏覽器自動重新整理; 源碼變化後, 浏覽器會自動重新整理顯示内容
• 支援sass文法; 将sass代碼實時轉換為css
• 支援es6文法; 使用babel将es6轉換為es5

• 開啟http服務, 自動開啟浏覽器, 實作浏覽器自動重新整理的實作思路是,在項目内用npm安裝

  live-server

• 支援sass文法的實作思路是, 用npm安裝

  node-sass

• 支援es6文法的實作思路是, 用npm安裝

  babel

  ,

  babel-cli

目前看來一切完美

我們把幾個指令配置到

package.json

内的

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 好好工作!'"
  }
           

運作之後發現了新的問題, 那就是通過

&&

連接配接起來的指令,會按照順序執行, 一旦有類似

sass pc/static/scss:pc/static/css --watch

這種"阻塞"的指令, 後面的指令将會無法執行...

解決方法: 用concurrently

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

concourrently的作用就是讓"阻塞"的指令, 可以并發執行, 我們改寫

package.json

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 好好工作!'"
  },
           

運作效果

在項目内執行

npm start

小結:

concurrently提供了很有用的功能, 有了concurrently我們可以通過npm install在項目内安裝多個服務,然後配置package.json内的script指令, 然後通過指令行一鍵并行開啟多個服務