javascript - Gulp 实时重载

Question

我有一个用 Node.js 构建的网站。我可以通过从命令行运行 node server.js 来成功启动和运行站点。然后，我通过在浏览器中访问“http://localhost:3000”来访问该站点。我现在正在尝试改进网站周围的一些构建过程。为此，我依赖 Gulp。

我想在 HTML 或 CSS 文件发生更改时自动重新加载网页。我偶然发现了 gulp-livereload 插件。我已经按照文档中的描述安装了它。但是，当我在浏览器中访问“http://localhost:35729/”时，我只看到以下内容:

{
  minilr: "Welcome",
  version: "0.1.8"
}

我的 gulp 任务是这样配置的:

gulp.task('launch',  function() {
    var toWatch = [
        'src/**/*.html',
        'src/**/*.css'
    ];

    livereload.listen();
    gulp.watch(toWatch, function() {
        console.log('reloading...');
        livereload();
    })
}

我没有像在运行 node server.js 后访问“http://localhost:3000”时那样看到我的主页。我错过了什么？

Answer 1

实时重新加载是一种向浏览器发送通知以进行重新加载的协议(protocol)。但是您需要一个浏览器插件来监听和重新加载，尽管可以使用脚本标签放弃该插件。

gulp-livereload 插件只关心 livereload 服务器的实现，您仍然需要通过 gulp 的 http 服务器提供文件。

您可以使用一个 gulp 模块同时执行这两项操作 gulp-connect .

但是，除非您出于某种原因绑定(bind)到 livereload，否则我建议使用 browserync。 Browsersync是 livereload 的一个很好的替代品，另外添加在浏览器之间同步 View 的能力。由于它将脚本标记注入(inject)您的 html 并在套接字上监听，因此您不需要任何插件即可使其工作。它甚至适用于移动设备。

使用 browsersync 的 gulp 任务可能看起来像这样。不要忘记将 browsersync 添加到您的package.json 文件

var browserSync = require('browser-sync').create();

gulp.task('serve',  [] , function( cb ){

    browserSync.init({
        open:  true ,
        server: {
            baseDir: "src"
        }
    });

    gulp.watch([
      'src/**/*' ,
    ] , ['serve:reload'] );

});

gulp.task('serve:reload' , []  , function(){
  browserSync.reload();
});