Question

I've now tried all three methods that I can find to use livereload with Gulp and I seem to still be running into the same problem.

I start up my gulp file and it runs just fine, so I go into my partials and make a small change (change a h1 tag from thomas to chomas for example) and save. My log shows that the templates are compiling, then depending on which method I tried using for livereload, it would also log that changes have been made (so it is detecting changes). Lastly my browser will do a full refresh yet still the changes doesn't get reflected in the browser. If I manually refresh my browser, I still don't see the changes.

The only way I've found to see the change be reflected in the browser is to manually restart gulp myself in order to see the changes.

Gulp File:

var gulp = require('gulp');

var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var swig = require('gulp-swig');
var livereload = require('gulp-livereload');


var paths = {
  scripts: ['./js/**/*.js'],
  images: './img/**/*',
  css: './css/**',
};

var filesToMove = [
        './css/**',
        './fonts/**/*.*',
        './favicon.png',
        './adoption-form.pdf'
    ];


gulp.task('move', function(){
  gulp.src(filesToMove, { base: './' })
  .pipe(gulp.dest('./build/'));
});

gulp.task('scripts', function() {
  return gulp.src(paths.scripts)
    .pipe(uglify())
    .pipe(concat('all.min.js'))
    .pipe(gulp.dest('./build/js'));
});

gulp.task('templates', function() {
  gulp.src('./partials/**/*.html')
    .pipe(swig())
    .pipe(gulp.dest('./build/'))
    .pipe(livereload());
});

gulp.task('images', function() {
  return gulp.src(paths.images)
    .pipe(imagemin({optimizationLevel: 5}))
    .pipe(gulp.dest('./build/img'));
});

gulp.task('watch', function() {
  gulp.watch(paths.scripts, ['scripts']);
  gulp.watch('./partials/**/*.html', ['templates']);
  gulp.watch(paths.images, ['images']);
  gulp.watch(paths.css);  
});

gulp.task('default', ['watch', 'scripts', 'templates', 'images', 'move']);
  • I'm on Windows.
  • I have the livereload plugin install.
  • I've been using this all on Chrome.
  • The files are running through an apache server (maybe this is a cache issue).
  • But I tried an express server outside of apache, same results.
  • I've also tried both browser-sync and the gulp-livereload plugin
Was it helpful?

Solution

Try changing this line:

.pipe(swig())

to this:

.pipe(swig({ defaults: { cache: false } }))

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top