npmscript命令同時開啟多個監聽服務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命令, 然後通過命令列一鍵並行開啟多個服務