google-chromegulplivereloadgulp-sassgulp-livereload

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


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"
  }
}

Solution

  • 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