Setting up LiveReload on Gulp.js server

Question

I'm trying to set up my build system but having some trouble getting LiveReload to to work with the files I need. I have included my current gulpfile below. When I run my gulp command, I know that the server is running on 'localhost:35729/'. However when I go to the address in my browser I receive this message:

{"tinylr":"Welcome","version":"0.1.6"}

Basically what I need to know is how I can get my index page to display here rather than this message, as the Chrome LiveReload extension will not reload the version of my index page that is just sitting in my offline directory.

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var sass = require('gulp-ruby-sass');
var livereload = require('gulp-livereload');

function errorLog(error) {
    console.error.bind(error);
    this.emit('end');
}

// Scripts Task
// Uglifies
gulp.task('scripts', function(){
    gulp.src('js/*.js')
    .pipe(uglify())
    .on('error', errorLog)
    .pipe(gulp.dest('minjs'))
});

//SASS Task
//Compiles SASS
gulp.task('sass', function(){
    return sass('scss/*.scss', { style: 'compressed' })
    .on('error', errorLog)
    .pipe(gulp.dest('./css'))
    .pipe(livereload());
});

// Watch Task
// Watches JS and CSS
gulp.task('watch', function(){
     livereload.listen();
     gulp.watch('js/*.js', ['scripts']);
     gulp.watch('scss/*.scss', ['sass']);
});

gulp.task('default', ['scripts', 'sass', 'watch',]);

ThorntonStuart ThorntonStuart · Accepted Answer · 2015-10-16T17:27:23

Yes in the end I did. Basically the LiveReload Chrome application won't watch offline files for changes (ie files opened straight from their directory). My solution to this was to configure a MAMP web server with my sites directory as the home directory. Then I was able to open the index page on the web server instead, and click the LiveReload Chrome button, which started watching for changes.

I don't think setting up a MAMP server is necessarily a requisite solution, this was just the way I handled it, as I can now also test the site for mobile devices.

Setting up LiveReload on Gulp.js server

1 Answers