咕嘟咕嘟咕嘟住

我有一个我用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 ”时看不到我的主页。 我错过了什么?

       

网上收集的解决方案 "咕嘟咕嘟咕嘟住"

实时重新载入是一种协议,用于向浏览器发送通知以进行重新载入。 但是,您需要一个浏览器插件来监听并重新加载,尽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(); }); 

你为什么访问' 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. 你必须点击这个图标来运行这个插件

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