为什么 gulp browser-sync 在加载时显示空白页面？答案

【问题标题】：Why is gulp browser-sync displaying a blank page on load?为什么 gulp browser-sync 在加载时显示空白页面？
【发布时间】：2018-04-06 17:16:45
【问题描述】：

我正在尝试使用浏览器同步设置一个 gulp 项目，并且一切正常，除了当我运行我的默认任务时，它最初在浏览器中显示一个空白页面。如果我在浏览器中点击刷新或对 css/js/html 文件进行任何编辑，浏览器会重新加载并正确显示所有内容。

谁能告诉我我错过了什么？

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
  )
})

【问题讨论】：

'fileinclude' 任务中的 return 语句可能会有所帮助。

标签： gulp browser-sync

【解决方案1】：

我可以解决这个问题。只需编辑您的主机文件 (/etc/hosts) 并添加一个新的域引用。 121.0.0.1 myvirualdomain.localhost 其中 myvirtualdomain.localhost 是您尝试指向浏览器同步代码的代理。

【讨论】：