Question

我现在尝试了三种方法，我可以找到使用Gulp的livereload，我似乎仍然遇到同样的问题。

我启动了我的gulp文件，它运行得很好，所以我进入我的局部并进行一些小改动（例如将h1标签从托马斯更改为choma）并保存。我的日志显示模板正在编译，然后根据我尝试用于livereload的方法，它还会记录已经进行的更改（因此检测到更改）。最后，我的浏览器将进行全面刷新，但更改并未反映在浏览器中。如果我手动刷新浏览器，我仍然看不到更改。

我发现在浏览器中反映出更改的唯一方法是手动重新启动gulp以查看更改。

Gulp文件：

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']);

我在Windows上。
我有livereload插件安装。
我一直在Chrome上使用这一切。
文件正在通过apache服务器运行（可能这是一个缓存问题）。
但我在apache之外尝试了一个快速服务器，结果相同。
我还尝试了浏览器同步和gulp-livereload插件

Answer 1

尝试更改此行：

.pipe(swig())

到此：

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

Gulp livereload不会更新浏览器

1 个答案: