當只有CSS發生變化時，Gulp livereload重新加載整個頁面

Question

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

更新Ive從下面的鏈接中嘗試了以下代碼，但它做了同樣的事情。從這個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: 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

你需要調用livereload.changed（文件）時會發生變化。要做到這一點，請參閱gulp-watch doc。

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

Answer 2

我在這個昨晚花了幾個小時，碰到這個：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()); 
});