Gulp BrowserSync does not refresh

Question

Link to Github Repo: https://github.com/janschloss/boilerplate

My problem is that only scss changes get recognized by BrowserSync in Gulp (no html or js or /img changes). I guess that is because scss changes are streamed directly. Weirdly I had one build which recognized html and img changes though I can't find that again.

Does someone see the mistake?

"use strict";

// Define packages

var gulp            = require('gulp'),
    sass            = require('gulp-sass'),
    clean           = require('gulp-clean'),
    sourcemaps      = require('gulp-sourcemaps'),
    autoprefixer    = require('gulp-autoprefixer'),
    plumber         = require('gulp-plumber'),
    imagemin        = require('gulp-imagemin'),
    uglify          = require('gulp-uglify'),
    concat          = require('gulp-concat'),
    strip           = require('gulp-strip-comments'),
    browserSync     = require('browser-sync');

// Define file paths

var scssSrc = 'src/scss/**/*.scss',
    jsSrc = 'src/js/*.js',
    htmlSrc = 'src/*.html',
    imgSrc = 'src/img/*';

// BrowserSync config

gulp.task('browserSyncInit', function() {
    browserSync.init({
        server: {
            baseDir: 'dist'
        }
    });
    gulp.watch('./dist/*').on('change', browserSync.reload);
});

// Concat scss files, compile compressed to css, prefix css, strip comments and create sourcemap

gulp.task('sass', function() {
    return gulp.src(scssSrc)
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(concat('main.min.scss'))
        .pipe(sass({outputStyle: 'compressed'}))
        .pipe(autoprefixer())
        .pipe(strip.text())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('dist/css'))
        .pipe(browserSync.reload({
            stream: true
        }));
});

// Concatenate, uglify, strip comments and create sourcemap for js files

gulp.task('js', function() {
    return gulp.src(jsSrc)
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(concat('main.min.js'))
        .pipe(uglify())
        .pipe(strip())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('dist/js'));
});

// Image optimization

gulp.task('img', function () {
    return gulp.src(imgSrc)
        .pipe(imagemin({
            progressive: true
        }))
        .pipe(gulp.dest('dist/img'));
});

// Clean task

gulp.task('clean', function() {
    return gulp.src('dist')
        .pipe(clean());
});

// Copy html

gulp.task('copy', function() {
    return gulp.src(htmlSrc)
        .pipe(gulp.dest('dist/'));
});

// Default Task

gulp.task('default', ['clean', 'copy', 'sass', 'js', 'img', 'browserSyncInit'], function () {   //todo asynchronous
  gulp.watch(scssSrc, ['sass']);
  gulp.watch(jsSrc, ['js']);
  gulp.watch(imgSrc, ['img']);
  gulp.watch(htmlSrc, ['copy']);
});

I think

gulp.watch('./dist/*').on('change', browserSync.reload);

is the relevant line. Is there anything wrong with my path?

My relevant folder structure looks like:

gulpfile.js

src

dist

Changes are made in src and copied over to dist on runtime with gulp.

Thanks!

Answer 1

I can't explain it. But when I remove your watch call from the browserSyncInit task and put it in the callback for the default task along side the other watches, everything works fine.

Relevant pieces of code:

// BrowserSync config

gulp.task('browserSyncInit', function() {
    browserSync.init({
        server: {
            baseDir: 'dist'
        }
    });

});


// Default Task

gulp.task('default', ['clean', 'copy', 'sass', 'js', 'img', 'browserSyncInit'], function () {   //todo asynchronous
  gulp.watch(scssSrc, ['sass']);
  gulp.watch(jsSrc, ['js']);
  gulp.watch(imgSrc, ['img']);
  gulp.watch(htmlSrc, ['copy']);
    gulp.watch('./dist/**/*').on('change', function () {

        console.log("Watch hit");
        browserSync.reload();
    });
});

Is this ideal at all for your gulp file? I can kind of understand the thinking of having the watch originally triggered inside the other task.

Very weird thing I noticed; Sometimes the DIST watch would take and all the other watches wouldn't. As if there is a race condition happening on which ones get registered and the others get overwritten. When they were separated like you had them originally, either SRC watches worked or DIST watches worked. I could edit files in DIST directly when the DIST watch was working and trigger reload.

Keeping all the watches together in that CB function works for me using your github project.

I also noticed another unrelated issue. Rerunning your gulp file required me to rm -rf dist first other wise I got errors.

Answer 2

I think the problem is with the glob: './dist/*' - it will only watch the contents of dist . I think you want './dist/**/*' to watch the folder and all subfolders.