Gulp Livereload in Chrome

Question

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.

Answer 1

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.