Question

在我使用单页网站之前，我从未遇到过这个问题。但现在我有几个页面，当我在＆＃39; build＆＃39;中创建第三个文件时文件夹，browsersync开始工作不按预期。

基本上，browsersync现在只在第二次保存时在浏览器中进行更改。您可以在视频中看到此行为：https://youtu.be/lNFEDZMBiQY

这是我的口袋设置：

＆＃13;

// Gulp.js configuration
var
  // modules
    gulp = require('gulp'),
    sass = require('gulp-sass'),
    pug = require('gulp-pug'),
    concat = require('gulp-concat'),
    //uglify = require('gulp-uglify'),
    browserSync = require('browser-sync').create()


// browserSync
gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: 'build',
      directory: true
    },
    notify: false
  })
})

// pug to html
gulp.task('pug', function buildHTML() {
  return gulp.src('src/pug/*.pug')
  .pipe(pug())
  .pipe(gulp.dest('build/'))
  .pipe(browserSync.reload({
    stream: true
  }))
});

// scss to css
gulp.task('sass', function(){
  return gulp.src('src/scss/style.scss')
    .pipe(sass()) // Converts Sass to CSS with gulp-sass
    .pipe(gulp.dest('build/css'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

// js concat and minify
gulp.task('scripts', function() {
  return gulp.src(['src/js/jquery-3.0.0.min.js', 'src/js/jquery-migrate-1.4.1.min.js', 'src/js/swiper.min.js', 'src/js/jquery.photoswipe-global.js', 'src/js/custom.js'])
    .pipe(concat('main.min.js'))
    //.pipe(uglify())
    .pipe(gulp.dest('build/js/'));
});

// watcher
gulp.task('watch', ['browserSync', 'sass', 'pug', 'scripts'], function(){
  gulp.watch('src/scss/**/*.scss', ['sass']);
  gulp.watch('src/pug/**/*.pug', ['pug']);
  gulp.watch('src/js/**/*.js', ['scripts']);
  // Other watchers
})

gulp.task('default', ['watch']);

＆＃13;

也许，这个设置中有错误？我如何解决这个问题？

Browsersync仅适用于第二次保存

0 个答案: