gulp使用browser-sync，想要dom实时热重载，而不是刷新浏览器

Question

最近使用gulp打包，需要引入热更新功能，目前使用browser-sync插件，但是browser-sync只能实现刷新浏览器进行热更新和css的动态注入，但是想要dom动态注入怎么办啊？或者有什么其他的插件可以解决gulp对dom的热重载？

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

在Gulp中添加一个DOM实时热重载的功能并不复杂。你可以使用browserify或babelify来处理你的JavaScript文件，并将它们放在一个独立的模块中。然后，你可以在你的Gulp任务中使用browserSync来监听这些模块的变化。

以下是一个简单的示例：

// 1. 创建一个新的模块
var module = require('module');

// 2. 获取当前模块的所有依赖
module._compile(module, __dirname + '/js/myModule.js', function(err, code) {
    if (err) throw err;

    // 3. 将模块内容编译成JavaScript
    var myModule = require('./myModule');
    var myModuleCode = myModule.code;
    var myModuleJS = 'var ' + myModule.name + ' = ' + JSON.stringify(myModuleCode) + ';';

    // 4. 将模块内容写入到你的项目目录中
    module.exports = myModuleJS;
});

// 5. 在你的Gulp任务中使用browserSync来监听变化
gulp.task('watch', function() {
    gulp.watch([__dirname + '/js/**/*.js'], ['build']);
});

在这个示例中，我们首先创建了一个新的模块，并将它与我们的主模块连接起来。然后，我们在每个JavaScript文件中定义了code属性，这个属性包含了我们需要编译的内容。

接下来，我们使用require函数来加载模块，这样我们就可以在Gulp任务中直接访问模块中的代码。

最后，我们使用browserSync来监听我们的JavaScript文件的变化。当文件发生变化时，浏览器会自动刷新页面，以反映文件的变化。

注意：这只是一个基本的示例，你可能需要根据你的具体需求进行调整。例如，你可能需要使用更复杂的模块管理工具（如rollup），或者你需要为你的项目提供更多的配置选项。