npm script 的文件監聽和自動刷新

時間 2019-11-07

標籤 npm script 文件監聽自動刷新简体版

原文原文鏈接

文件監聽的做用是爲了實現自動化，釋放雙手和精力，提升效率，讓開發者更加關注於開發。npm script 文件監聽和 grunt、gulp 功能相似。javascript

自動刷新，意思就是改動文件保存後，頁面自動刷新，減小平常開發的操做。css

代碼檢查的監聽和自動化

代碼檢查工具 stylelint、eslint、jsonlint 這些對 watch 支持很弱，因此就須要引入工具包 onchangehtml

安裝命令依賴包

npm i onchange -D
// 或
yarn add onchange -D
複製代碼

編寫命令

"scripts": {
   "//watch": "# 監聽", 
    "test": "# 單元測試 \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:*",
}
複製代碼

剖析命令

使用 \" 是爲了實現跨平臺兼容；
使用了 **/* 匹配通配符；
參數 -i 是讓 onchange 在啓動時就運行一次 -- 以後的命令；

執行命令

npm run watch
複製代碼

實現自動刷新

本章主要說的是 livereload。java

安裝命令依賴包

npm i livereload -D
// 或
yarn add livereload -D
複製代碼

編寫命令

"scripts": {
    "//livereload": "# 自動刷新",
    "client": "npm-run-all --parallel client:*",
    "client:reload-server": "livereload src/",
    "client:static-server": "http-server src/"
}
複製代碼

頁面添加鏈接 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">
</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;
}
複製代碼

剖析命令

啓動靜態文件服務，頁面經過 http 方式訪問文件資源；
啓動 liveload 服務，負責文件改動自動刷新，監聽文件變化，告知鏈接改動文件的客戶端；
客戶端頁面 src/index.html 中添加的 js 腳本接收 livereload-server 的告知消息;

執行命令

npm run client
複製代碼

而後打開瀏覽器訪問：http://localhost:8081，接着修改 src/index.css 並保存，你會發現瀏覽器自動刷新了。git

你能夠...

上一篇：npm script 命令補全的實現github

下一篇：npm script 複雜場景的應用npm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。