javascriptsassgulpbrowser-syncneat

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

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

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