一口气加载

Question

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

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

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

我一饮而尽任务的配置是这样的：

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

你为什么访问'http://localhost:35729/'？如果这是livereload正在监听的端口，那么它将不会显示您的站点，因为如您所说，您的站点可从'http://localhost:3000'获得。

我假设你已经正确配置了gulp。通过它我的意思是livereload听着，你看在你的文件的变化，并在管你有“.pipe（livereload（）”。

1. 您必须安装https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
2. ，你必须运行你的应用程序“http://localhost:3000”的Chrome浏览器。
3. 你会在浏览器插件栏新图标（这是这个插件的图标）
4. ，你必须点击该图标即可运行该插件
5. 完成

现在当你改变文件中的东西时，gulp watcher会注意到这一点，做一些工作，并通知chrome插件有变化，这个插件会刷新你的项目页面。

Answer 2

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

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

您可以使用一个兼有gulp-connect的吞咽模块。

但是，除非您因为某种原因需要重新加载，否则我建议您使用browserync。 Browsersync是livereload的一个不错的替代方案，它有助于在浏览器之间同步您的视图的能力。由于它将脚本标记插入到html中，并在套接字上侦听，因此不需要任何插件即可使其工作。它甚至可以在移动设备上运行。

使用浏览器同步的吞咽任务可能如下所示。不要忘了将浏览器同步添加到您的 包。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(); 
});