Gulp Browsersync task not reloading on file changes with new file structure

Question

After changing my project to be organized into src/ and dist/ folders, my changes aren't being compiled and my browsersync task is no longer reloading the page. If I change the color of a div for instance, the color is not updated even if I stop and restart the gulp task. So my question is, how do I change my gulp tasks to watch for changes in the new file structure I am using, and how do I trigger the reload task once the watch task recognizes a change to a file? I think the reload task works, on a previous working version of this gulpfile gulp.watch was working so it doesn't appear to be a problem with that. I tried changing gulp.watch to browserSync.watch as per this answer but that didn't fix it.

I'm guessing this is a problem with my watch task or the browsersync.init but I'm totally stumped.

To be clear, I am making a static webpage using Jade, Bourbon Neat, SCSS, Gulp, and Browsersync.

Here's a link to the full GitHub repo for this project if that helps!

This is my current file structure:

/
  dist/
    css/
    js/
    index.html
  node_modules/
  src/
    jade/
    js/
    scss/
  .gitignore
  gulpfile.js
  package.json

And this is my gulpfile.js:

// VARIABLES

var gulp                    = require('gulp');
var jade                    = require('gulp-jade');
var sass                    = require('gulp-sass');
var sourcemaps              = require('gulp-sourcemaps');
var autoprefixer            = require('gulp-autoprefixer');
var cssmin                  = require('gulp-cssmin');
var neat                    = require('node-neat').includePaths;
var concat                  = require('gulp-concat');
var uglify                  = require('gulp-uglify');
var rename                  = require('gulp-rename');
var browserSync             = require('browser-sync');
var reload                  = browserSync.reload;


// TASKS



// Jade task
gulp.task('jade', function() {
    return gulp.src('src/jade/**/*.jade')
    .pipe(jade({ pretty: true }))
    .pipe(gulp.dest('dist/'))
});


// SCSS task
gulp.task('scss', function() {
    return gulp.src('src/scss/**/*.scss')
    .pipe(sass({ style: 'compressed', 
        noCache: true,
        includePaths: neat }))
    .pipe(autoprefixer())
    .pipe(cssmin())
    .pipe(rename({
        suffix: '.min'
    }))
    .pipe(gulp.dest('dist/css'))
});

// JS task
gulp.task('js', function() {
    return gulp.src('src/js/**/*.js')
    .pipe(uglify())
    .pipe(rename({
        suffix: '.min'
    }))
    .pipe(gulp.dest('dist/js/'))
});

// Watch files for changes
gulp.task('watch', ['browser-sync'], function() {
    gulp.watch('dist/**/*.html', reload);
    gulp.watch('src/scss/**/*.scss', ['scss', reload]);
    gulp.watch('src/**/*.jade', ['jade']);
    gulp.watch('src/**/*.js', ['js']);
});

// Start Browsersync server
gulp.task('browser-sync', function() {
    browserSync.init(['dist/css/**/*.css', 'dist/js/**/*.js'], {
        server: {
            baseDir: "dist/"
        }
    });
});

// Default task
gulp.task('default', ['scss', 'jade', 'js', 'watch', 'browser-sync']);

Have you checked this answer? http://stackoverflow.com/a/32988499/731782 — DavidP, Jul 29 '16 at 21:12

score 2 · Accepted Answer · answered Jul 29 '16 at 21:45

2

I have pulled your repo and made some fixes, will push under the "fixes" branch. Few things:

Your index.html was referencing your unminified css, while you only exporting minified.
the watch list needed the subfolders prefxied, so gulp.watch('src/js/**/*.js', ['js']); and not gulp.watch('src/**/*.js', ['js']);
Your browserSync.init was referencing the wrong directories (src and not dist).

answered Jul 29 '16 at 21:45

DavidP

1,788
1
15
23

Thanks so much! I thought I tried all of those changes, but it turns out I didn't try each of them together. You rock! – Oskar Jul 29 '16 at 21:49

score 0 · Answer 2 · answered Jan 28 '18 at 08:16

0

What worked for me was to switch gulp.watch to browserSync.watch. BrowserSync's documentation indicates that this feature requires at least version 2.6.0. So you may need to update your version of BrowserSync if you are not using that version.

answered Jan 28 '18 at 08:16

Douglas Rogers

398
2
9

Gulp Browsersync task not reloading on file changes with new file structure

2 Answers2