0

I never encountered this issue before cause I worked with one-page websites. But now I have several pages, and when I created third file in 'build' folder, browsersync started to work not as expected.

Basically, browsersync now makes changes in browser only on second save. You can see this behavior on video: https://youtu.be/lNFEDZMBiQY

Here's my gulp setup:

// 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']);

Maybe, there's an error in this setup? How I can fix this issue?

Rob
  • 14,746
  • 28
  • 47
  • 65

0 Answers0