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
.
- Installed the Livereload extension in Chrome.
- Installed plugin
npm install gulp-connect
. - Setup gulpfile.js (see code below).
- Go to your browser and go to URL http://localhost:8080/
- Click the liverelaod icon in the browser.
- Run gulp.
- 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:
- Install the livereload chrome extension
- Configure your gulpfile and package.json (the OP had done so correctly)
- Go to chrome://extensions and check the box for 'Allow access to file URLs'
- Restart chrome!
- 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.
- Start editing code and marvel at the valuable seconds saved by the auto-reloading functionality.