浏览器同步重新加载注入工作,但重新加载后
browser sync reloading injecting works, but reloads after
我似乎缺少一些东西 - 我只是想让 css 注入在这个项目上工作。
服务器代理有效
文件观察者也是
注射有效,
但是页面总是在半秒后重新加载...
我在 Mac osx 10.11.6 (15G1108)
节点 v4.1.1
这是我的 gulpfile:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var notify = require("gulp-notify");
var src = {
scss: 'assets/scss/**',
css: 'assets/css/',
html: 'app/*.html'
};
gulp.task('serve', ['sass'], function() {
browserSync.init({
proxy: "intouch.local",
open: false,
reloadOnRestart: false,
injectChanges: true,
});
gulp.watch(src.scss, ['sass']);
});
gulp.task('sass', function() {
var onError = function(err) {
notify.onError({
title: "Gulp",
subtitle: "Failure!",
message: "Error: <%= error.message %>",
sound: "Beep"
})(err);
this.emit('end');
};
return gulp.src(src.scss)
.pipe(plumber({errorHandler: onError}))
.pipe(sass())
.pipe(gulp.dest(src.css))
// NOTE: i've tried with all of these lines, all do the same...
// .pipe(reload({stream: true}))
// .pipe(browserSync.stream())
.pipe(browserSync.reload({
stream: true
}))
.pipe(notify({
title: 'Gulp',
subtitle: 'success',
message: 'Sass task',
sound: "Pop"
}));
});
gulp.task('default', ['serve']);
调整要编译的 sass 个文件的 glob 以仅匹配 .scss
(或 .sass
)个文件:
例如在您的代码示例中,将 assets/scss/**
更改为 assets/scss/**/*.scss
.
广泛的 glob 会导致意外的文件(通常是源映射)被传递到管道中,而 Browsersync 在遇到无法流式传输的修改文件时的默认行为是重新加载页面,因此您可以成功注入对于 CSS,然后硬重新加载一些您可能没想到/不关心的文件。
我似乎缺少一些东西 - 我只是想让 css 注入在这个项目上工作。
服务器代理有效 文件观察者也是 注射有效, 但是页面总是在半秒后重新加载...
我在 Mac osx 10.11.6 (15G1108) 节点 v4.1.1
这是我的 gulpfile:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var notify = require("gulp-notify");
var src = {
scss: 'assets/scss/**',
css: 'assets/css/',
html: 'app/*.html'
};
gulp.task('serve', ['sass'], function() {
browserSync.init({
proxy: "intouch.local",
open: false,
reloadOnRestart: false,
injectChanges: true,
});
gulp.watch(src.scss, ['sass']);
});
gulp.task('sass', function() {
var onError = function(err) {
notify.onError({
title: "Gulp",
subtitle: "Failure!",
message: "Error: <%= error.message %>",
sound: "Beep"
})(err);
this.emit('end');
};
return gulp.src(src.scss)
.pipe(plumber({errorHandler: onError}))
.pipe(sass())
.pipe(gulp.dest(src.css))
// NOTE: i've tried with all of these lines, all do the same...
// .pipe(reload({stream: true}))
// .pipe(browserSync.stream())
.pipe(browserSync.reload({
stream: true
}))
.pipe(notify({
title: 'Gulp',
subtitle: 'success',
message: 'Sass task',
sound: "Pop"
}));
});
gulp.task('default', ['serve']);
调整要编译的 sass 个文件的 glob 以仅匹配 .scss
(或 .sass
)个文件:
例如在您的代码示例中,将 assets/scss/**
更改为 assets/scss/**/*.scss
.
广泛的 glob 会导致意外的文件(通常是源映射)被传递到管道中,而 Browsersync 在遇到无法流式传输的修改文件时的默认行为是重新加载页面,因此您可以成功注入对于 CSS,然后硬重新加载一些您可能没想到/不关心的文件。