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

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

目前看來一切完美

我們把幾個(gè)命令配置到 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 好好工作!'"
 }

運(yùn)行之后發(fā)現(xiàn)了新的問題, 那就是通過 && 連接起來的命令,會(huì)按照順序執(zhí)行, 一旦有類似 sass pc/static/scss:pc/static/css --watch 這種"阻塞"的命令, 后面的命令將會(huì)無法執(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 好好工作!'"
 },

運(yùn)行效果

在項(xiàng)目?jī)?nèi)執(zhí)行 npm start

小結(jié):

concurrently提供了很有用的功能, 有了concurrently我們可以通過npm install在項(xiàng)目?jī)?nèi)安裝多個(gè)服務(wù),然后配置package.json內(nèi)的script命令, 然后通過命令行一鍵并行開啟多個(gè)服務(wù)

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

最新評(píng)論