CODEWITHSUNDEEP
puggulpbrowser-sync
magicspon
magicspon

Reputation: 926

BrowserSync and Jade auto reload

I'm having some issues getting browsersync to play nice with my jade setup.

I have split out my jade files into lots of smaller partials to be included in each of my master templates.

The folder structure is as follows.

jade
   source
      _includes
         _header.jade
         _footer.jade
      template.jade

Gulp task:

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

  };

  gulp.src(config.src)
    .pipe(changed(config.dest, {extension: '.html'}))
    .pipe(jade({
      locals: YOUR_LOCALS,
      pretty: true,
      basedir: config.basedir
    }))

    .on('error', handleErrors)
    .pipe(gulp.dest(config.dest))
    .pipe(browserSync.reload({stream:true}));
});

gulp.task('browserSync', function() {
  browserSync(
    server: {
        baseDir: "./"
    });
});

gulp.task('watch', ['browserSync'], function() {
    gulp.watch(config.jade.watch, ['jade']);
});

nb. all of my paths are defined in a big ole' config object

My gulp watcher is looking at all of the jade files ('jade/source/**/*.jade')

The setup works perfectly well when i make a change to my template.jade file. However, if I make an edit to one of my partials the task is not run.

This is because of .pipe(changed('./', {extension: '.html'}))

If I remove this line, all of the jade files will compile and the browser will reload a number of times before the change has been rendered in the browser (i quite often have to manually refresh the page to see the changes).

I feel like i need to use .pipe(changed('./', {extension: '.html'})) in some form to stop ALL of the templates from being process, but in away which captures the changes made in partial templates.

Any ideas? Thanks Dave

Upvotes: 1

Views: 3572

Answers (1)

donnywals
donnywals

Reputation: 7591

I'm not 100% this will solve your problem but if you pass browserSync.reload as a second task when a jade file changes you should always see a refresh:

gulp.task('watch', ['browserSync'], function() {
    gulp.watch(config.jade.watch, ['jade', browserSync.reload]);
});

Note: this will cause an actual refresh and doesn't use streams.

Upvotes: 1

Related Questions