Gulp livereload, yalnızca CSS değiştiğinde sayfanın tamamını yeniden yükler

Question

Gulve görevime karaciğer ek yükünü ekledim. Bir CSS dosyasını düzenlediğim zamanki çalışma, tüm sayfa sadece CSS sayfalarını değil, yenilenir.

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

Güncelleme Ive aşağıdaki bağlantıdan aşağıdaki kodu denedik ama aynı şeyi yapar. Bundan 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"]); 
}); 

aynı davranışı:

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

https://laracasts.com/discuss/channels/tips/proper-way-to-use-livereload-with-laravel-elixir Denedim aşağıdaki ama denemek ve eklentisi canlı yeniden tarayıcısında açtığınızda o canlı yeniden sunucusunu bulamadığını söylüyor. gulp: how to update the browser without refresh (for css changes only)

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); 
    })); 
}); 

Answer 1

Değişikliğin gerçekleştiğinde livereload.changed (dosyaları) aramak gerekir. Bunu yapmak için gulp-seyretmek doktoru.

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

Answer 2

Bu geceye birkaç saat harcadım ve buna rastladım: https://github.com/vohof/gulp-livereload/issues/93.

Bu sizin sourcemaps'leriniz yüzünden görülüyor. gulp-livereload akıllı olmaya çalışır ve yalnızca css değişiklikleri varsa css'yi yeniden yükler. Aksi takdirde, değiştirilen daha fazla dosya olduğunu düşündüğü için tüm sayfayı yeniden yükler.

Bu nedenle, livereload() işlevini çağırmadan önce yalnızca css'nize filtreleyebilirsiniz.

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