Gulp Livereload in Chrome
google-chrome, gulp, livereload, node.js
Solution
That's not how livereload works. It doesn't run a server to load your content — it runs a separate server to notify when content changes.
When you enable livereload*, a small javascript is embedded in your page which listens to the LR server. When you notify the server that a resource was modified, it tells any listeners, which in turn reload the resource from where ever they originally loaded the resource.
If your webapp/site/page is entirely self contained, you can simply open the `file://` url to the page you want in your browser, enable livereload, and it should work.
However, if you are dealing with external resources, you should fire up a server of some sort. There's far too many ways for me to select one for you, but you can use connect, express, or some other node library, you could run `python -m SimpleHTTPServer` in your directory if you have python installed, etc.
If you want to integrate a `connect` server into your build process, I have a recipe at the bottom of this article.
* You can enable livereload via a browser plugin or using the `gulp-embedlr` plugin during development, which I prefer since it works across multiple browsers and devices.
Problem
The below code seems to work just fine until I go to 1ocalhost:8081... then I get the message.. ``` <pre>{"tinylr":"Welcome","version":"0.0.5"}</pre> ``` My directory structure is.... ``` ____gulp | |____build | | |____images | | |____index.html | | |____scripts | | |____styles | |____gulpfile.js | |____node_modules | |____src | | |____images | | |____index.html | | |____scripts | | |____styles ``` Why isn't my html page loading? If I try to browse to 1ocalhost:8081/build/index.html The page wont load and I get the msg ``` {"error":"not_found","reason":"no such route"} ``` I've also tried the chrome plugin but I get the below msg when I hit the plugin ``` Could not connect to LiveReload server. Please make sure that LiveReload 2.3 (or later) or another compatible server is running. ``` I checked the plugin settings from the plugin in Chrome and check the option for file urls Heres my commented code..... ``` //sudo npm install gulp -g // install chrome extension from https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei //Go into the settings from the plugin in Chrome and check the option for file urls: chrome://extensions/ // include gulp var gulp = require('gulp'); // include plug-ins var jshint = require('gulp-jshint'); var changed = require('gulp-changed'); var imagemin = require('gulp-imagemin'); var minifyHTML = require('gulp-minify-html'); var concat = require('gulp-concat'); var stripDebug = require('gulp-strip-debug'); var uglify = require('gulp-uglify'); var autoprefix = require('gulp-autoprefixer'); var minifyCSS = require('gulp-minify-css'); var livereload = require('gulp-livereload'); var lr = require('tiny-lr'); var server = lr(); // JS hint task gulp.task('jshint', function() { gulp.src('./src/scripts/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(livereload(server)); }); // minify new images gulp.task('imagemin', function() { var imgSrc = './src/images/**/*', imgDst = './build/images'; gulp.src(imgSrc) .pipe(changed(imgDst)) .pipe(imagemin()) .pipe(gulp.dest(imgDst)) .pipe(livereload(server)); }); // minify new or changed HTML pages gulp.task('htmlpage', function() { var htmlSrc = './src/*.html', htmlDst = './build'; gulp.src(htmlSrc) .pipe(changed(htmlDst)) .pipe(minifyHTML()) .pipe(gulp.dest(htmlDst)) .pipe(livereload(server)); }); // JS concat, strip debugging and minify gulp.task('scripts', function() { gulp.src(['./src/scripts/lib.js','./src/scripts/*.js']) .pipe(concat('script.js')) .pipe(stripDebug()) .pipe(uglify()) .pipe(gulp.dest('./build/scripts/')) .pipe(livereload(server)); }); // CSS concat, auto-prefix and minify gulp.task('styles', function() { gulp.src(['./src/styles/*.css']) .pipe(concat('styles.css')) .pipe(autoprefix('last 2 versions')) .pipe(minifyCSS()) .pipe(gulp.dest('./build/styles/')) .pipe(livereload(server)); }); // default gulp task gulp.task('default', ['imagemin', 'htmlpage', 'scripts', 'styles'], function() { server.listen(8081, function (err) { if (err) return console.log(err); // watch for HTML changes gulp.watch('./src/*.html', function() { gulp.run('htmlpage'); }); // watch for JS changes gulp.watch('./src/scripts/*.js', function() { gulp.run('jshint', 'scripts'); }); // watch for IMG changes gulp.watch('./src/images/*.png', function() { gulp.run('imagemin'); }); // watch for CSS changes gulp.watch('./src/styles/*.css', function() { gulp.run('styles'); }); }); }); </pre> ``` And the output from gulp looks good... ``` Bills-MacBook-Pro:gulp Bill$ gulp [gulp] Using file /Users/Bill/gulp/gulpfile.js [gulp] Working directory changed to /Users/Bill/gulp [gulp] Running 'imagemin'... [gulp] Finished 'imagemin' in 77 ms [gulp] Running 'htmlpage'... [gulp] Finished 'htmlpage' in 2.47 ms [gulp] Running 'scripts'... [gulp] Finished 'scripts' in 4.05 ms [gulp] Running 'styles'... [gulp] Finished 'styles' in 1.09 ms [gulp] Running 'default'... [gulp] Finished 'default' in 1.38 ms gulp.run() has been deprecated. Use task dependencies or gulp.watch task triggering instead. [gulp] Running 'htmlpage'... [gulp] Finished 'htmlpage' in 3.5 ms [gulp] index.html was reloaded. [gulp] Running 'htmlpage'... [gulp] Finished 'htmlpage' in 712 μs [gulp] Running 'htmlpage'... [gulp] Finished 'htmlpage' in 1.05 ms [gulp] index.html was reloaded. ```