吞并重装

时间:2016-01-21 18:41:08

标签: javascript node.js gulp

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

2 个答案:

答案 0 :(得分:5)

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

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();
});

答案 1 :(得分:3)

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

获得。

我假设您已正确配置gulp。通过它我的意思是livereload正在倾听,你观察你的文件和管道中的变化' .pipe(livereload()'。

  1. 您必须安装http://localhost:3000
  2. 你必须运行你的应用程序' https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei'在Chrome浏览器中。
  3. 您将在浏览器插件栏中显示新图标(这是此插件的图标)
  4. 您必须单击此图标才能运行此插件
  5. 光洁度
  6. 现在,当您更改文件中的内容时,gulp观察者会注意到这一点,做一些工作,并告知chrome插件有更改,此插件将刷新您的项目页面。