dandaka dandaka - 3 months ago 18
Javascript Question

gulp-watch and LiveReload, reloads too early

I have set up gulp-watch and LiveReload. It works somehow, but most of the time wrong. It feels like LiveReload is emitting reload event faster, than browser should reload files. I could explain it like this:


  1. Some files has changed in my src directory

  2. It starts to compile

  3. While it is still compiling, browser reloads the page

  4. Sometimes page is already new and correct. Most of the time it is old. Sometimes its only part of the page.

  5. Hit reload and everything is fine.



I think I made some mistake, while integrating gulp-watch and LiveReload. Could you help me finding one?

Here is my gulpfile.js:

var gulp = require('gulp');
var jade = require('gulp-jade');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var connect = require('gulp-connect');
var favicons = require('gulp-favicons');
var ga = require('gulp-ga');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var responsive = require('gulp-responsive');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var print = require('gulp-print');

gulp.task('default', ['jade', 'sass', 'js', 'connect', 'watch']);

gulp.task('jade', function() {
gulp.src('./src/jade/*.jade')
.pipe(jade())
.pipe(ga({url: 'auto', uid: config.gaId, tag: 'body',sendPageView: true, minify: false, anonymizeIp: false}))
.pipe(gulp.dest('./public/'));
});

gulp.task('sass', function () {
gulp.src('./src/sass/style.scss')
.pipe(sass({
includePaths: [
config.bowerDir + '/bootstrap/scss',
config.bowerDir + '/font-awesome/scss'
],
outputStyle: 'compressed'
})
.on('error', sass.logError))
.pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
.pipe(gulp.dest('./public/css'));
});

gulp.task('connect', function() {
connect.server({
root: 'public',
livereload: true
});
});

gulp.task('watch', function () {
gulp.watch(['./src/jade/**/*.jade'], ['jade']);
gulp.watch(['./src/sass/**/*.scss'], ['sass']);
gulp.watch(['./src/js/**/*.js'], ['js']);
watch(['./public/**/*.html', './public/**/*.css', './public/**/*.js']).pipe(connect.reload());
});

gulp.task('js', function () {
return gulp.src([
'./node_modules/fontfaceobserver/fontfaceobserver.js',
'./bower_components/jquery/dist/jquery.min.js',
'./bower_components/bootstrap/js/dist/util.js',
'./bower_components/bootstrap/js/dist/collapse.js',
'./bower_components/picturefill/dist/picturefill.js',
'./src/js/modernizr.js',
'./src/js/js.js'
])
.pipe(concat({ path: 'js.js'}))
.pipe(uglify())
.pipe(gulp.dest('./public/js'));
});


Full source is here https://gist.github.com/dandaka/3e342158763f9ccbd23305eecfd0b69c

Thank you!

Answer

Place .pipe(connect.reload()) at the end on each of the tasks, like the js for example:

return gulp.src([
    ...
    ])
    .pipe(concat({ path: 'js.js'}))
    .pipe(uglify())
    .pipe(gulp.dest('./public/js'))
    .pipe(connect.reload());

Because right now when it's on the watch watch([...]).pipe(connect.reload()); it will fire when the compilation has started bu not necessarily finished.