Livereload not working in Chrome using Gulp, what am I missing

Question

I'm trying to use Livereload using Gulp, Sublime Text 3 and Chrome but for some reason it doesn't work. Here is what I did.

1. Installed the Livereload extension in Chrome.
2. Installed gulp-livereload.
3. Setup gulpfile.js.
4. Ran gulp.

What am I missing here? Do I need to install the Livereload plugin for Sublime Text 3?

FYI - The Options button in the Livereload extension in Chrome is grayed-out.

My Gulpfile:

var gulp = require('gulp');
       
var scssPlugin = require('gulp-sass');
var livereload = require('gulp-livereload');

gulp.task('myStyles', function () {
    gulp.src('sass/*.scss')
        .pipe(scssPlugin())
        .pipe(gulp.dest('css'))
       .pipe(livereload());
});

gulp.task('watchMyStyles', function() {
    livereload.listen();
    gulp.watch('sass/*.scss', ['myStyles']);
});

gulp.task('default', ['watchMyStyles']);  

Package File:

{
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-livereload": "^3.8.0",
    "gulp-sass": "^2.0.4"
  }
}

Uniflorous

Answer 1

This is what I did that worked. I used plugin gulp-connect instead of the gulp-livereload.

1. Installed the Livereload extension in Chrome.
2. Installed plugin npm install gulp-connect.
3. Setup gulpfile.js (see code below).
4. Go to your browser and go to URL http://localhost:8080/
5. Click the liverelaod icon in the browser.
6. Run gulp.
7. Done.

My Gulpfile:

var gulp = require('gulp');
       
var scssPlugin = require('gulp-sass');
var connect = require('gulp-connect');

    
gulp.task('myStyles', function () {
    gulp.src('sass/*.scss')
        .pipe(scssPlugin())
        .pipe(gulp.dest('css'))
        .pipe(connect.reload());
});

gulp.task('connect', function() {
    connect.server({
        livereload: true
    });
});

gulp.task('watchMyStyles', function() {
    gulp.watch('sass/*.scss', ['myStyles']);
});

gulp.task('default', ['watchMyStyles', 'connect']);

Package File:

{
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-connect": "^2.2.0",
    "gulp-sass": "^2.0.4"
  }
}

Reference Links:

https://www.youtube.com/watch?v=KURMrW-HsY4&index=7&list=PLRk95HPmOM6PN-G1xyKj9q6ap_dc9Yckm

http://code.tutsplus.com/tutorials/gulp-as-a-development-web-server--cms-20903

Uniflorous

I did the same, no idea why gulp-livereload didn't work – Swainson

I had the same problem with gulp-livereload and chrome, even with enable file urls ticked in chrome's livereload extension settings. Switching to gulp-connect worked – Khaddar

Thanks for this — gulp-connect easily worked the first time for me. – Etui

This doesn't really answer the question. Check Chris's answer to actually fix LiveReload. – Cobbs

Answer 2

When developing locally make sure 'Allow access to file URLs' is ticked for LiveReload in Chrome's Extensions settings.

I may have been having the same problem -- when I clicked the LiveReload icon it just didn't do anything.

Jayjaycee

Answer 3

The crucial thing for me was restarting the browser. You don't need to add gulp-connect for this to work - just do the following:

1. Install the livereload chrome extension
2. Configure your gulpfile and package.json (the OP had done so correctly)
3. Go to chrome://extensions and check the box for 'Allow access to file URLs'
4. Restart chrome!
5. Navigate to the page that you're testing and click on the livereload icon. You should notice that the circle in the middle of the icon becomes filled.
6. Start editing code and marvel at the valuable seconds saved by the auto-reloading functionality.

Eardrum

Answer 4

Sorry to cover the basics but we all get caught out from time to time.

have you clicked the livereload button in chrome?

if the live reload server is running if will have a solid gray dot in the middle of it.

like so:

If not you will get an error like so:

"Could not connect to LiveReload server. Please make sure that LiveReload 2.3 (or later) or another compatible server is running."

Nashoma

Answer 5

I use Live Reload Browser Page

Live Reload Browser Page

Browser settings

Download from Google Chrome market

---

Gulp settings

Install

npm i live-reload-bp --save-dev

---

const
  gulp = require('gulp'),
  liveReloadBP = require("live-reload-bp"),
  plumber = require('gulp-plumber'),
  gulpSass = require('gulp-sass'),
  postcss = require('gulp-postcss'),
  cssnano = require('cssnano'),
  webServer = require('./web-server');

const 
  cssWatch = 'src/scss/*.scss',
  cssSrc = ['src/scss/*.scss'],
  cssDest = 'dest/css';

const 
  liveReload = new liveReloadBP({
    host: '127.0.0.1', 
    port: '8080'
  });


function css() {
  return gulp.src(cssSrc)
  .pipe(plumber({errorHandler: onError}))        
  .pipe(gulpSass().on('error', gulpSass.logError))   
  .pipe(postcss([
      cssnano({zindex: false, reduceIdents: false})
  ]))     
  .pipe(gulp.dest(cssDest));
}


function onError(err){
  /* Here can be used: 
    https://github.com/Yuriy-Svetlov/live-alert-bp
  */

  liveReload.setError();  // This usage is optional. You can not use this, if you want your page to reload anyway.

  this.emit('end');
}


function reloadPage(ok){
  if(liveReload.hasError() === false){ // This usage is optional. You can not use this, if you want your page to reload anyway.
    liveReload.reloadPage();
  }

  liveReload.resetError();

  ok();
}


function watch(){
  liveReload.run();
  // webServer();

  gulp.watch(cssWatch, gulp.series(css, reloadPage));
}


exports.css = css;
exports.watch = watch;
exports.reloadPage = reloadPage;
exports.start = gulp.series(css, watch);

OR you can use for Gulp gulp-live-reload-bp

Examples how to use Live Reload Browser Page wuth Gulp

live-reload-browser-page.com

Sergias