只有CSS发生变化时,Gulp livereload会重新加载整个页面

我昨晚花了几个小时来看看这个:https://github.com/vohof/gulp-livereload/issues/93.

看起来是因为你的源图.gulp-livereload试图变得聪明,如果只有css更改,则只重新加载css.否则它会重新加载整个页面,因为它认为有更多的文件发生了变化.

所以你只需要在调用livereload()函数之前将你的glob过滤到只有css .

所以这样的事情可能有所帮助:

var filter = require('gulp-filter');

...

gulp.task('theme-css', function () {
  return gulp.src(themeFiles.sass)
    .pipe(gulpif(env === 'development', sourcemaps.init()))
    .pipe(sass().on('error', sass.logError))
    .pipe(minifyCss({
      compatibility: 'ie8'
    }))
    .pipe(gulpif(env === 'dev', sourcemaps.write('.')))
    .pipe(gulp.dest(themeFiles.out.css))

    // Add filter here
    .pipe(filter('**/*.css'))
    .pipe(livereload());
});