Question

我有一个用Node构建的网站。我可以通过从命令行运行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

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

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

您可以使用同时执行gulp-connect。

的gulp模块

但是，除非你因某种原因与livereload绑定，否则我建议使用browserync。 Browsersync是一个很好的替代livealload的补充在浏览器之间同步视图的能力。因为它会在你的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();
});

Answer 2

你为什么要访问＆＃39; a turorial on what is uart＆＃39; ？如果这是livereload正在收听的端口，那么它就不会显示您的网站，因为正如您所说，您的网站可以从＆＃39; http://localhost:35729/＆＃39;

获得。

我假设您已正确配置gulp。通过它我的意思是livereload正在倾听，你观察你的文件和管道中的变化＆＃39; .pipe（livereload（）＆＃39;。

您必须安装http://localhost:3000
你必须运行你的应用程序＆＃39; https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei＆＃39;在Chrome浏览器中。
您将在浏览器插件栏中显示新图标（这是此插件的图标）
您必须单击此图标才能运行此插件
光洁度

现在，当您更改文件中的内容时，gulp观察者会注意到这一点，做一些工作，并告知chrome插件有更改，此插件将刷新您的项目页面。

吞并重装

2 个答案: