[英]Why is gulp browser-sync displaying a blank page on load?
I am trying to set up a gulp project using browser-sync and everything is working fine except that when I run my default task it initially shows a blank page in the browser. 我试图使用浏览器同步来建立一个gulp项目,并且一切正常,除了运行默认任务时,它最初在浏览器中显示空白页面。 If I hit refresh in the browser or make any edits to the css/js/html files, the browser reloads and shows everything correctly. 如果我在浏览器中单击“刷新”或对css / js / html文件进行了任何编辑,则浏览器将重新加载并正确显示所有内容。
Can anyone tell me what I am missing? 谁能告诉我我想念的东西吗?
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var cssnano = require('gulp-cssnano');
var del = require('del');
var runSequence = require('run-sequence');
var fileinclude = require('gulp-file-include');
var notify = require('gulp-notify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
.pipe(concat('styles.scss'))
.pipe(sass())
.pipe(cssnano())
.pipe(rename('styles.min.css'))
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.reload({
stream: true
}))
.pipe( notify({ message: "sass tasks have been completed!"}) );
});
// Concatenate & Minify JS
gulp.task('scripts', function() {
return gulp.src('app/js/**/*.js')
.pipe(concat('js/main.js'))
.pipe(gulp.dest('dist'))
.pipe(rename('main.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
.pipe(browserSync.reload({
stream: true
}))
.pipe( notify({ message: "scripts tasks have been completed!"}) );
});
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'dist'
},
})
});
gulp.task('fileinclude', function() {
gulp.src(['app/**/*.html'])
.pipe(fileinclude())
.pipe(useref())
.pipe(gulp.dest('dist'))
.pipe(browserSync.reload({
stream: true
}))
.pipe( notify({ message: "fileInclude tasks have been completed!"}) );
});
gulp.task('watch', ['browserSync', 'sass', 'scripts', 'fileinclude'], function (){
gulp.watch('app/scss/**/*.scss', ['sass']);
gulp.watch('app/**/*.html', ['fileinclude']);
gulp.watch('app/js/**/*.js', ['scripts']);
});
gulp.task('useref', function(){
return gulp.src('app/*.html')
.pipe(useref())
.pipe(gulp.dest('dist'))
.pipe( notify({ message: "useref tasks have been completed!"}) );
});
gulp.task('clean:dist', function() {
return del.sync('dist/**/*');
})
gulp.task('default', function (callback) {
runSequence(['clean:dist', 'sass', 'scripts', 'fileinclude', 'useref', 'browserSync', 'watch'],
callback
)
})
gulp.task('build', function (callback) {
runSequence(
'clean:dist',
'sass',
'scripts',
'fileinclude',
['useref'],
callback
)
})
I can resolve this issue. 我可以解决这个问题。 Just edit your hosts file (/etc/hosts) and add a new domain reference. 只需编辑您的主机文件(/ etc / hosts)并添加新的域引用即可。 121.0.0.1 myvirualdomain.localhost Where myvirtualdomain.localhost is the proxy where you try to point your browsersync code. 121.0.0.1 myvirualdomain.localhost,其中myvirtualdomain.localhost是您尝试将浏览器同步代码指向的代理。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.