Browser Sync Reload Not Rendering .jade Changes

[porgeet]

Hi all

I’ve been trying to improve my understanding of gulp and refining the tasks I make with it.

Below is the problem file. The problem is browser sync reloads are not rendering any changes to .jade files in Chrome.

The tasks are firing, I can see that from the command line. But the results aren’t showing in Chrome. Manually refreshing works. The file also successfully compiles to html. So, I’m stuck. If anyone can shed some light on what is happening and how to fix it, I will be very grateful.

/***********************************************************************************
1. DEPENDENCIES 
/***********************************************************************************/

var gulp = require ('gulp'),                        // gulp core
    plumber = require ('gulp-plumber'),             // disable interuption
    jade = require ('gulp-jade'),                   // jade compiler
    sass = require ('gulp-sass'),                   // sass compiler
    autoprefixer = require ('gulp-autoprefixer'),   // sets missinb browser prefixes
    browserSync = require ('browser-sync'),         // inject code to all devices
    reload = browserSync.reload;                    // browser sync reload

/*********************************************************************************
2. FILE DESTINATIONS (RELATIVE TO ASSETS FOLDER)
**********************************************************************************/

var target = {
    jadeSrc : 'app/jade/<strong>/*.jade',                 // source of jade files
    htmlDest : 'app/',                              // html file destination
    sassSrc : 'app/sass/</strong>/*.sass',                 // source of sass files
    cssDest : 'app/css',                            // minified css destination
};

/**********************************************************************************
3. SASS TASK
***********************************************************************************/

gulp.task ('sass', function (){
    gulp.src(target.sassSrc)                        // get the files
    .pipe(plumber())                                // make sure gulp keeps running on errors
    .pipe(sass())                                   // compile all sass
    .pipe(autoprefixer())                           // complete css with correct vendor prefixes
    .pipe(gulp.dest(target.cssDest))                // file destination
    .pipe(reload({stream:true}));
});

/**********************************************************************************
4. JADE TASKS
**********************************************************************************/

gulp.task('jade', function(){
    var YOUR_LOCALS = {};

`gulp.src(target.jadeSrc)
.pipe(jade({
    locals: YOUR_LOCALS,
    pretty: true
}))
.pipe(gulp.dest(target.htmlDest))
`

});
// separate watcher for browser-sync reaction to '.jade' file changes
gulp.task('jade-watch', ['jade'], reload);

/**********************************************************************************
5. BUILD SEQUENCES
**********************************************************************************/

gulp.task('default', ['sass', 'jade'], function(){
browserSync({server: target.htmlDest});
gulp.watch(target.sassSrc, ['sass']);
gulp.watch(target.jadeSrc, ['jade-watch']);
});

My folder structure is:

project-folder
  /app
    /css
    /jade
    /js
    /sass
    index.html
  gulpfile.js
  package.json

[Author]

Posts