Gulp 更改后浏览器同步不刷新页面
browser-sync does not refresh page after changes with Gulp
我是 Gulp 的新手,我想利用它的自动 scss 编译和浏览器同步功能。但是我无法让它工作。
我删除了所有内容,只留下 Browsersync 网站上示例的内容:
http://www.browsersync.io/docs/gulp/#gulp-sass-css
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./app"
});
gulp.watch("app/scss/*.scss", ['sass']);
gulp.watch("app/*.html").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("app/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("app/css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
我可以叫gulp发球。该网站正在显示,我从 Browsersync 收到一条消息。当我修改 HTML 时,页面重新加载。然而,当我修改 scss 时,我可以看到:
[BS] 1 file changed (test.css)
[15:59:13] Finished 'sass' after 18 ms
但我必须手动重新加载。我错过了什么?
这是因为您在 html 手表而不是 scss 手表上调用 browserSync.reload
。
试试这个:
gulp.watch("app/scss/*.scss", ['sass']).on('change', browserSync.reload);
gulp.watch("app/*.html").on('change', browserSync.reload);
如果愿意,您可以直接注入更改,而不必在 SASS 编译时强制刷新浏览器。
browserSync.init({
injectChanges: true,
server: "./app"
});
gulp.task('sass', function() {
return gulp.src("app/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("app/css"))
.pipe(browserSync.stream({match: '**/*.css'}));
});
这就是我使用的,它在 sass 或任何其他文件中工作正常
gulp.task('browser-sync', function () {
var files = [
'*.html',
'css/**/*.css',
'js/**/*.js',
'sass/**/*.scss'
];
browserSync.init(files, {
server: {
baseDir: './'
}
});
});
我将其包含在我的 html 正文标签下方。有效。
<script type='text/javascript' id="__bs_script__">//<![CDATA[
document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.2.11.1.js'><\/script>".replace("HOST", location.hostname));//]]>
</script>
运行 遇到同样的问题,试图重新加载 php
和 js
文件并流式传输 css
文件。我只能通过使用 pipe
方法来使用流,这是有道理的。无论如何,这对我有用:
gulp.watch(['./**/*.css']).on('change', function (e) {
return gulp.src( e.path )
.pipe( browserSync.stream() );
});
但是,我其实更喜欢修改@pixie 的回答:
gulp.task('default', function() {
var files = [
'./**/*'
];
browserSync.init({
files : files,
proxy : 'localhost',
watchOptions : {
ignored : 'node_modules/*',
ignoreInitial : true
}
});
});
我也遇到了同样的问题。当我将重新加载方法作为单独的任务调用时,它起作用了。
gulp.task('browserSync', function() {
browserSync.init(null, {
server: {
baseDir: './'
},
});
})
gulp.task('reload', function(){
browserSync.reload()
})
gulp.task('watch', ['sass', 'css', 'browserSync'], function(){
gulp.watch('*.html', ['reload']);
})
当我刚开始使用 browser-sync 时,我也遇到了类似的问题,命令行显示 "reloading browsers" 但浏览器根本没有刷新,问题是我没有包含 body 标签在我的 HTML 页面中,浏览器同步可以为其功能注入脚本,确保您的 HTML 页面有 body 标签。
有时在使用 CLI 时,您没有在 HTML 主文件中插入脚本,因此您应该手动添加或使用 gulp.
<!-- START: BrowserSync Reloading -->
<script type='text/javascript' id="__bs_script__">
//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.js'><\/script>".replace("HOST", location.hostname));
//]]>
</script>
<!-- END: BrowserSync Reloading -->
我是 Gulp 的新手,我想利用它的自动 scss 编译和浏览器同步功能。但是我无法让它工作。
我删除了所有内容,只留下 Browsersync 网站上示例的内容:
http://www.browsersync.io/docs/gulp/#gulp-sass-css
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./app"
});
gulp.watch("app/scss/*.scss", ['sass']);
gulp.watch("app/*.html").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("app/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("app/css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
我可以叫gulp发球。该网站正在显示,我从 Browsersync 收到一条消息。当我修改 HTML 时,页面重新加载。然而,当我修改 scss 时,我可以看到:
[BS] 1 file changed (test.css)
[15:59:13] Finished 'sass' after 18 ms
但我必须手动重新加载。我错过了什么?
这是因为您在 html 手表而不是 scss 手表上调用 browserSync.reload
。
试试这个:
gulp.watch("app/scss/*.scss", ['sass']).on('change', browserSync.reload);
gulp.watch("app/*.html").on('change', browserSync.reload);
如果愿意,您可以直接注入更改,而不必在 SASS 编译时强制刷新浏览器。
browserSync.init({
injectChanges: true,
server: "./app"
});
gulp.task('sass', function() {
return gulp.src("app/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("app/css"))
.pipe(browserSync.stream({match: '**/*.css'}));
});
这就是我使用的,它在 sass 或任何其他文件中工作正常
gulp.task('browser-sync', function () {
var files = [
'*.html',
'css/**/*.css',
'js/**/*.js',
'sass/**/*.scss'
];
browserSync.init(files, {
server: {
baseDir: './'
}
});
});
我将其包含在我的 html 正文标签下方。有效。
<script type='text/javascript' id="__bs_script__">//<![CDATA[
document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.2.11.1.js'><\/script>".replace("HOST", location.hostname));//]]>
</script>
运行 遇到同样的问题,试图重新加载 php
和 js
文件并流式传输 css
文件。我只能通过使用 pipe
方法来使用流,这是有道理的。无论如何,这对我有用:
gulp.watch(['./**/*.css']).on('change', function (e) {
return gulp.src( e.path )
.pipe( browserSync.stream() );
});
但是,我其实更喜欢修改@pixie 的回答:
gulp.task('default', function() {
var files = [
'./**/*'
];
browserSync.init({
files : files,
proxy : 'localhost',
watchOptions : {
ignored : 'node_modules/*',
ignoreInitial : true
}
});
});
我也遇到了同样的问题。当我将重新加载方法作为单独的任务调用时,它起作用了。
gulp.task('browserSync', function() {
browserSync.init(null, {
server: {
baseDir: './'
},
});
})
gulp.task('reload', function(){
browserSync.reload()
})
gulp.task('watch', ['sass', 'css', 'browserSync'], function(){
gulp.watch('*.html', ['reload']);
})
当我刚开始使用 browser-sync 时,我也遇到了类似的问题,命令行显示 "reloading browsers" 但浏览器根本没有刷新,问题是我没有包含 body 标签在我的 HTML 页面中,浏览器同步可以为其功能注入脚本,确保您的 HTML 页面有 body 标签。
有时在使用 CLI 时,您没有在 HTML 主文件中插入脚本,因此您应该手动添加或使用 gulp.
<!-- START: BrowserSync Reloading -->
<script type='text/javascript' id="__bs_script__">
//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.js'><\/script>".replace("HOST", location.hostname));
//]]>
</script>
<!-- END: BrowserSync Reloading -->