npm install -g http-server nodemon browser-sync 安装三个 browser-sync 版本3.02举例
根目录创建start.js
const http = require('http');
const { exec } = require('child_process');
const server = http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end(Math.floor(Math.random() * 100)+'Hello World!');
});
server.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});
exec('http-server -p 80');
exec('browser-sync start --config bs-config.js', (error, stdout, stderr) => {
if (error) {
console.error(`执行命令时出错: ${error}`);
return;
}
console.log(`stdout: ${stdout}`);
console.error(`stderr: ${stderr}`);
});
创建 package.json 习惯在package.json执行
{
"scripts": {
"dev": "nodemon start.js"
}
}
项目根目录cmd执行browser-sync init生成bs-config.js
module.exports = {
server: {
baseDir: "./", // 设置你的项目基目录
port: 3000, // 设置端口号
},
files: ["css/*.css", "js/*.js", "*.html"], // 设置要监视的文件
// 其他选项...
};
复制js到html里面全局使用或者访问http://localhost:3002/进行复制
<script id="__bs_script__">//<![CDATA[
(function() {
try {
var script = document.createElement('script');
if ('async') {
script.async = true;
}
script.src = 'http://HOST:3001/browser-sync/browser-sync-client.js?v=3.0.2'.replace("HOST", location.hostname);
if (document.body) {
document.body.appendChild(script);
} else if (document.head) {
document.head.appendChild(script);
}
} catch (e) {
console.error("Browsersync: could not append script tag", e);
}
})()
//]]></script>
可以创建bs-client-loader.js公共引入
最后在当前目录执行 npm run dev
正文完