gulp-livereload - CSSのみが変更された場合、Gulp livereloadはページ全体をリロードします

Question

Gulp タスクに livereload を追加しました。CSSファイルを編集するときを除いて、ページCSSだけでなくページ全体が更新されます。

 var gulp = require('gulp');
 var uglify = require('gulp-uglify');
 var concat = require('gulp-concat');
 var minifyCss = require('gulp-minify-css');
 var sizereport = require('gulp-sizereport');
 var watch = require('gulp-watch');
 var batch = require('gulp-batch');
 var run = require('run-sequence');

gulp.task('watch-theme-css', ['theme-css'], function () {
  livereload.listen();
  watch(themeFiles.sass, batch(function (events, done) {
    gulp.start('theme-css', done);
  }))
});

var themeFiles = {
  sass: [
    'mysite/base/sass/*.s+(a|c)ss',
    'mysite/content/sass/*.s+(a|c)ss',
    'mysite/custom/sass/*.s+(a|c)ss'
  ],
  out: {
    css: 'mysite/build'
  }
};

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))
    .pipe(livereload());
});

更新以下のリンクから次のコードを試しましたが、同じことを行います。http://www.roelvanlisdonk.nl/?p=4675

gulp.task('watch-theme-css', ['theme-css'], function () {
  livereload.listen();
  watch(themeFiles.sass, batch(function (events, done) {
    gulp.start('theme-css', done);
  }), ["reloadCss"]);
});

これと同じ動作: https://laracasts.com/discuss/channels/tips/proper-way-to-use-livereload-with-laravel-elixir

gulp.task('watch-lr-css', ['theme-css'], function () {
  livereload.changed(themeFiles.sass);
});

次のことを試しましたが、ライブ リロード ブラウザ プラグインをオンにしようとすると、ライブ リロード サーバーが見つからないと表示されます。 gulp: 更新せずにブラウザーを更新する方法 (css の変更のみ)

gulp.task('watch-theme-css', ['theme-css'], function () {
  //livereload.listen();
  livereload.changed(themeFiles.sass);
  watch(themeFiles.sass, batch(function (events, done) {
    gulp.start('theme-css', done);
  }));
});