只有CSS发生变化时，Gulp livereload才会重新加载整个页面
只有CSS发生变化时，Gulp livereload才会重新加载整个页面
提问于 2015-12-15 01:30:12
我已经将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: 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);
}));
});回答 2
Stack Overflow用户
发布于 2016-03-09 22:03:07
我昨晚花了几个小时在这上面，偶然发现了这个：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());
});Stack Overflow用户
发布于 2015-12-23 11:40:02
当发生变化时，您需要调用livereload.changed(文件)。要做到这一点，请参见gulp watch doc。
watch('**/*.js', function (files) {
livereload.changed(files)
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34273127
复制相关文章
相似问题