npm script 的文件監(jiān)聽(tīng)和自動(dòng)刷新的命令詳解
文件監(jiān)聽(tīng)的作用是為了實(shí)現(xiàn)自動(dòng)化，釋放雙手和精力，提高效率，讓開(kāi)發(fā)者更加關(guān)注于開(kāi)發(fā)。npm script 文件監(jiān)聽(tīng)和 grunt、gulp 功能類似。
自動(dòng)刷新，意思就是改動(dòng)文件保存后，頁(yè)面自動(dòng)刷新，減少日常開(kāi)發(fā)的操作。
代碼檢查的監(jiān)聽(tīng)和自動(dòng)化
代碼檢查工具 stylelint、eslint、jsonlint 這些對(duì) watch 支持很弱，所以就需要引入工具包 onchange
安裝命令依賴包
npm i onchange -D // 或 yarn add onchange -D
編寫命令
"scripts": {
"http://watch": "# 監(jiān)聽(tīng)",
"test": "# 單元測(cè)試 \n cross-env NODE_ENV=test mocha tests/",
"watch:test": "npm test -- --watch",
"watch:lint": "onchange -i \"**/*.js\" \"**/*.less\" -- npm run lint:css",
"watch": "npm-run-all --parallel watch:*",
}
剖析命令
- 使用 \" 是為了實(shí)現(xiàn)跨平臺(tái)兼容；
- 使用了 **/* 匹配通配符；
- 參數(shù) -i 是讓 onchange 在啟動(dòng)時(shí)就運(yùn)行一次 -- 之后的命令；
執(zhí)行命令
npm run watch
實(shí)現(xiàn)自動(dòng)刷新
本章主要說(shuō)的是livereload。
安裝命令依賴包
npm i livereload -D // 或 yarn add livereload -D
編寫命令
"scripts": {
"http://livereload": "# 自動(dòng)刷新",
"client": "npm-run-all --parallel client:*",
"client:reload-server": "livereload src/",
"client:static-server": "http-server src/"
}
頁(yè)面添加連接 js 腳本
// src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>npm script</title>
<link rel="stylesheet" href="./index.css" rel="external nofollow" >
</head>
<body>
<h1>你好，npm script</h1>
<script>
var ctx = '<script src="http://' + (location.host || 'localhost').split(':')[0] +
':35729/livereload.js?snipver=1"></' + 'script>';
document.write(ctx)
</script>
</body>
</html>
/* src/index.css */
body {
color: #fff;
background-color: green;
}
總結(jié)
以上所述是小編給大家介紹的npm script 的文件監(jiān)聽(tīng)和自動(dòng)刷新的命令詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
TCP協(xié)議詳解_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
本文描述了TCP協(xié)議，首先簡(jiǎn)單介紹了TCP完成了一些什么功能；介紹了TCP報(bào)文格式，以及典型報(bào)文的數(shù)據(jù)格式?，F(xiàn)在通過(guò)本文給大家詳細(xì)介紹，感興趣的的朋友一起看看吧2017-07-07
樹(shù)莓派安裝mjpg-streamer使用攝像頭的方法
這篇文章主要介紹了樹(shù)莓派安裝mjpg-streamer使用攝像頭,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-03-03
這篇文章主要介紹了碼云git圖文使用詳解教程,需要的朋友可以參考下2020-11-11
這篇文章主要介紹了Git Submodule使用完整教程(小結(jié)),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
vscode檢測(cè)到#include錯(cuò)誤請(qǐng)更新includePath的解決方法
這篇文章主要介紹了vscode檢測(cè)到#include錯(cuò)誤請(qǐng)更新includePath的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
大家是否感覺(jué)到，樹(shù)在數(shù)據(jù)結(jié)構(gòu)中大行其道，什么領(lǐng)域都要沾一沾，碰一碰2013-11-11
詳解使用Postman模擬瀏覽器的HTTP請(qǐng)求并獲取返回?cái)?shù)據(jù)
這篇文章主要為大家介紹了在瀏覽器中,獲取網(wǎng)頁(yè)中的某一個(gè)請(qǐng)求信息,并將其導(dǎo)入到Postman軟件,并進(jìn)行API請(qǐng)求測(cè)試的方法,需要的可以參考下2024-03-03
在當(dāng)今數(shù)字化時(shí)代,編程不再是專屬于程序員的領(lǐng)域,通過(guò)人工智能（AI）的協(xié)助,甚至是非編程專業(yè)人士也能輕松涉足,對(duì)于那些沒(méi)有編程基礎(chǔ)卻渴望利用 AI 進(jìn)行編程的人來(lái)說(shuō),AI 就是你編程學(xué)習(xí)的得力伙伴2023-11-11
前些天不小心刪除了原來(lái)的博客系統(tǒng)，問(wèn)過(guò)godaddy的客服，恢復(fù)數(shù)據(jù)需要150美元，另外還需要提供不少信息，我于是放棄，注冊(cè)了這個(gè)nunumick.me，打算從頭再來(lái)。2011-09-09
Git中smart Checkout與force checkout的區(qū)別及說(shuō)明
這篇文章主要介紹了Git中smart Checkout與force checkout的區(qū)別及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08