欧美成人午夜免费全部完,亚洲午夜福利精品久久,а√最新版在线天堂,另类亚洲综合区图片小说区,亚洲欧美日韩精品色xxx

扣丁學(xué)堂Linux培訓(xùn)簡(jiǎn)述npm script命令同時(shí)進(jìn)行多個(gè)監(jiān)聽服務(wù)的方法

2019-03-27 15:09:00 2639瀏覽

npm script命令同時(shí)進(jìn)行多個(gè)監(jiān)聽服務(wù)的方法有多少的小伙伴知道呢?不知道也沒(méi)有關(guān)系，本篇文章扣丁學(xué)堂Linux培訓(xùn)小編就給讀者們分享一下npm script命令同時(shí)進(jìn)行多個(gè)監(jiān)聽服務(wù)的方法，想要參考借鑒的小伙伴就了解一下吧。

在搭建一個(gè)靜態(tài)頁(yè)面偏多的網(wǎng)站時(shí)，用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語(yǔ)法 ; 將sass代碼實(shí)時(shí)轉(zhuǎn)換為css

支持es6語(yǔ)法 ; 使用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語(yǔ)法的實(shí)現(xiàn)思路是, 用npm安裝 node-sass

支持es6語(yǔ)法的實(shí)現(xiàn)思路是, 用npm安裝 babel , babel-cli

目前看來(lái)一切完美

我們把幾個(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)了新的問(wèn)題, 那就是通過(guò)&& 連接起來(lái)的命令，會(huì)按照順序執(zhí)行，一旦有類似sass pc/static/scss:pc/static/css --watch 這種"阻塞"的命令，后面的命令將會(huì)無(wú)法執(zhí)行。

解決方法: 用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我們可以通過(guò)npm install在項(xiàng)目?jī)?nèi)安裝多個(gè)服務(wù),然后配置package.json內(nèi)的script命令, 然后通過(guò)命令行一鍵并行開啟多個(gè)服務(wù)。

以上就是扣丁學(xué)堂Linux在線學(xué)習(xí)小編給大家分享的npm script命令同時(shí)進(jìn)行多個(gè)監(jiān)聽服務(wù)的方法，希望對(duì)小伙伴們有所幫助，想要了解更多內(nèi)容的小伙伴可以登錄扣丁學(xué)堂官網(wǎng)咨詢。

想要學(xué)好Linux開發(fā)小編給大家推薦口碑良好的扣丁學(xué)堂，扣丁學(xué)堂有專業(yè)老師制定的Linux學(xué)習(xí)路線圖輔助學(xué)員學(xué)習(xí)，此外還有與時(shí)俱進(jìn)的Linux視頻教程供大家學(xué)習(xí)，想要學(xué)好Linux開發(fā)技術(shù)的小伙伴快快行動(dòng)吧。扣丁學(xué)堂Linux技術(shù)交流群：422345477。

     【關(guān)注微信公眾號(hào)獲取更多學(xué)習(xí)資料】           【掃碼進(jìn)入HTML5前端開發(fā)VIP免費(fèi)公開課】