7

我已将 livereload 添加到我的 Gulp 任务中。它的工作原理是当我编辑一个 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);
  }));
});
4

2 回答 2

7

昨晚我在这上面花了几个小时，发现了这个：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());
});
于 2016-03-09T14:03:06.670 回答
-2

发生更改时，您需要调用 livereload.changed(files) 。为此，请参阅 gulp-watch 文档。

watch('**/*.js', function (files) {
  livereload.changed(files)
});
于 2015-12-23T03:40:02.207 回答