Node 环境 静态资源监听修改后重启

74次阅读
没有评论
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

正文完
 
评论(没有评论)