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

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


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


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.


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.