咕嘟咕嘟咕嘟住

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

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

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

我的大嘴巴任务是这样configuration的：

 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

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

gulp-livereload插件只涉及到livereload服务器的实现，你仍然需要通过http服务器从gulp服务这些文件。

你可以使用一个gulp 连接模块。

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

使用浏览器同步的吞咽任务可能如下所示。 不要忘记添加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

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

我假设你已经正确configuration了gulp。 通过它，我的意思是说，livereload正在监听，并且你在你的文件和pipe道中看到了变化（'livereload（）'）。

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

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