最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Gulp with live-reload - Stack Overflow

programmeradmin1浏览0评论

I have a website that I've built with Node. I can successfully start and run the site by running node server.js from the mand-line. I then access the site by visiting "http://localhost:3000" in my browser. I'm now trying to improve some of the build process surrounding the site. To do that, I'm relying on Gulp.

I want to automatically reload the webpage when a change is made to the HTML or CSS files. I stumbled upon the gulp-livereload plugin. I have installed it as described in the docs. However, when I visit "http://localhost:35729/" in the browser, I just see the following:

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

My gulp task is configured like this:

gulp.task('launch',  function() {
    var toWatch = [
        'src/**/*.html',
        'src/**/*.css'
    ];

    livereload.listen();
    gulp.watch(toWatch, function() {
        console.log('reloading...');
        livereload();
    })
}

I do not see my home page like I do when I visit "http://localhost:3000" after running node server.js. What am I missing?

I have a website that I've built with Node. I can successfully start and run the site by running node server.js from the mand-line. I then access the site by visiting "http://localhost:3000" in my browser. I'm now trying to improve some of the build process surrounding the site. To do that, I'm relying on Gulp.

I want to automatically reload the webpage when a change is made to the HTML or CSS files. I stumbled upon the gulp-livereload plugin. I have installed it as described in the docs. However, when I visit "http://localhost:35729/" in the browser, I just see the following:

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

My gulp task is configured like this:

gulp.task('launch',  function() {
    var toWatch = [
        'src/**/*.html',
        'src/**/*.css'
    ];

    livereload.listen();
    gulp.watch(toWatch, function() {
        console.log('reloading...');
        livereload();
    })
}

I do not see my home page like I do when I visit "http://localhost:3000" after running node server.js. What am I missing?

Share Improve this question edited Jan 24, 2016 at 14:02 JQuery Mobile asked Jan 21, 2016 at 18:41 JQuery MobileJQuery Mobile 6,30124 gold badges88 silver badges138 bronze badges 1
  • Livereload requires a plugin to work, another option is browsersync and it has other cool features like synchronization between several devices. If you want I can help you with a gulp task that uses it. – Mon Villalon Commented Jan 24, 2016 at 19:14
Add a ment  | 

2 Answers 2

Reset to default 5 +25

Live reload is a protocol to send notifications to the browser to do a reload. But you need a browser plugin to listen and do the reload, although it is possible to forgo the plugin using a script tag.

The gulp-livereload plugin only concerns itself with the implementation of the livereload server, you still need to serve the files via a http server from gulp.

You can use a gulp module that does both gulp-connect.

However unless you are tied to livereload for some reason, I suggest using browserync. Browsersync is a nice alternative to livereload that aditionally adds the capacity of syncing your view between browsers. Since it injects a script tag into your html and listens on a socket you don't need any plugins to make it work. It works even on Mobile devices.

A gulp task to use browsersync might look like this. Don't forget to add browsersync to your package.json file

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

Why are you visiting 'http://localhost:35729/' ? If this is port where livereload is listening then it won't show your site, because as you said your site is available from 'http://localhost:3000'.

I assume that you have correctly configure gulp. By it I mean that livereload is listening, and you watch changes in your files and in pipes you have '.pipe(livereload()'.

  1. You have to install https://chrome.google./webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
  2. you have to run your app 'http://localhost:3000' in chrome browser.
  3. you will have in browser plugin bar new icon (this is icon of this plugin)
  4. you have to click this icon to run this plugin
  5. finish

Now when you change something in files, gulp watcher will notice this, do some work, and inform chrome plugin that there are changes, This plugin will refresh your project page.

发布评论

评论列表(0)

  1. 暂无评论