Gulp livereload перезагружает всю страницу, когда изменился только CSS

Я добавил 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);
  }));
});

gulp-livereload
person Evanss    schedule 14.12.2015    source источник
comment
Не ответ, но я хотел бы предложить вам оценить синхронизацию браузера. Это довольно здорово.   -  person tacone    schedule 16.12.2015
comment
Можете ли вы включить в свой вопрос операторы импорта?   -  person 3ocene    schedule 22.12.2015
comment
@ Берн, что ты имеешь в виду?   -  person Evanss    schedule 23.12.2015
comment
Куда вы импортируете плагины gulp   -  person 3ocene    schedule 23.12.2015
comment
Извините, require заявления. Неправильный язык.   -  person 3ocene    schedule 23.12.2015
comment
@Bern Ive обновил свой вопрос.   -  person Evanss    schedule 31.12.2015

Ответы (2)


arrow_upward
7
arrow_downward

Вчера вечером я потратил на это несколько часов и наткнулся на это: https://github.com/vohof/gulp-livereload/issues/93.

Похоже, это из-за ваших исходных карт. gulp-livereload пытается быть умным и перезагружает CSS только в том случае, если есть только изменения CSS. В противном случае он перезагружает всю страницу, потому что считает, что изменились другие файлы.

Таким образом, вы просто фильтруете свой глобус до CSS, прежде чем вызывать функцию livereload().

Так что что-то вроде этого может помочь:

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());
});
person Tyler Graf    schedule 09.03.2016
comment
Вы, сэр, джентльмены и ученый. Я часами искал этот ответ. - person rhysclay; 21.03.2017

arrow_upward
-2
arrow_downward

Вам нужно вызвать livereload.changed (files), когда произойдет изменение. Для этого см. Документ gulp-watch.

watch('**/*.js', function (files) {
  livereload.changed(files)
});
person ryley    schedule 23.12.2015