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

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

• 在本地開啟http服務 ; 且開啟服務后, 會自動打開瀏覽器
• 瀏覽器自動刷新 ; 源碼變化后, 瀏覽器會自動刷新顯示內容
• 支持sass語法 ; 將sass代碼實時轉換為css
• 支持es6語法 ; 使用babel將es6轉換為es5
• 開啟http服務, 自動開啟瀏覽器, 實現(xiàn)瀏覽器自動刷新的實現(xiàn)思路是,在項目內用npm安裝 live-server
• 支持sass語法的實現(xiàn)思路是, 用npm安裝 node-sass
• 支持es6語法的實現(xiàn)思路是, 用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=nonelive-server --port=1208babel pc/static/es6-js -d pc/static/js --watchbabel mobile/static/es6-js -d mobile/static/js --watchecho 好好工作!'"
 }

運行之后發(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 內的 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 好好工作!'"
 },

運行效果

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

小結:

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

以上所述是小編給大家介紹的npm script命令同時進行多個監(jiān)聽服務的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！