Oskar Oskar - 4 months ago 87
Javascript Question

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

Answer

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).
Comments