CODEWITHSUNDEEP
gulppugbrowser-sync
MattV
MattV

Reputation: 1383

.jade files update html files, but browser-sync refreshes too early

I've been ponding on this for hours now, I'd love a tip to get my setup going.

Whenever I save my .jade files, the browser does not update immediately. Instead, I need to save a second time before updates are reflected in the browser: the webserver refreshes prior to completing the build-jade task. This seems weird, as I do have the 'build-jade' task as a dependency prior to refreshing.

The .html file is updated after the first save, it's just the refresh occuring too early.

Any tips are greatly appreciated.

gulp-file:

/*global require*/
"use strict";

var gulp = require('gulp'),
  path = require('path'),
  data = require('gulp-data'),
  jade = require('gulp-jade'),
  prefix = require('gulp-autoprefixer'),
  sass = require('gulp-sass'),
  browserSync = require('browser-sync');


/*
 * Change directories here
 */

var public_dir = "dist/"
var settings = {
  sass_files: "applications/**/*.sass",
  jade_files: "applications/**/*.jade",
  js_files: "applications/**/*.js"
};



/**
 * Compile .scss files into public css directory With autoprefixer no
 * need for vendor prefixes then live reload the browser.
 */
gulp.task('build-sass', function() {
  gulp.src(settings.sass_files)
  // gulp.src(settings.sass_files, { base: "./" })
    .pipe(sass({
      outputStyle: 'compressed',
      onError: browserSync.notify
    }))
    .pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
    .pipe(gulp.dest(public_dir))
    // .pipe(gulp.dest("."))
    .pipe(browserSync.reload({ stream: true }));
});


/**
 * Compile .jade files and pass in data from json file
 * matching file name. index.jade - index.jade.json
 */
gulp.task('build-jade', function() {
  gulp.src(settings.jade_files)
  // gulp.src(settings.jade_files, { base: "./" })
    .pipe(jade({ pretty: true })
    .pipe(gulp.dest(public_dir));
});

/**
 * Recompile .jade files and live reload the browser
 */
gulp.task('jade-rebuild', ['build-jade'], function() {
  browserSync.reload();
});


/**
 * Wait for jade and sass tasks, then launch the browser-sync Server
 */
gulp.task('browser-sync', ['build-sass', 'build-jade'], function() {
  browserSync({
    server: {baseDir: public_dir},
    notify: true
  });
});


/**
 * Watch scss files for changes & recompile
 * Watch .jade files run jade-rebuild then reload BrowserSync
 */
gulp.task('watch', function() {
  // gulp.watch(settings.js_files, ['jade-rebuild']);
  gulp.watch(settings.sass_files, ['build-sass']);
  gulp.watch(settings.jade_files, ['jade-rebuild']);
});

/**
 * Default task, running just `gulp` will compile the sass,
 * compile the jekyll site, launch BrowserSync then watch
 * files for changes
 */
gulp.task('default', ['browser-sync', 'watch']);

Upvotes: 2

Views: 540

Answers (1)

shaune
shaune

Reputation: 1030

Although you do have the task in the dependancy list, you are not returning the task, so gulp doesn't actually know when it finishes, fortunately this is quite a simple thing to rectify.

I have taken a sample of your code and added return to the gulp.src() function, you need to follow this procedure with all your functions and then it will work.

Hopefully this is clear enough for you to move forward.

/**
 * Compile .jade files and pass in data from json file
 * matching file name. index.jade - index.jade.json
 */
gulp.task('build-jade', function() {
  return gulp.src(settings.jade_files)
  // gulp.src(settings.jade_files, { base: "./" })
    .pipe(jade({ pretty: true })
    .pipe(gulp.dest(public_dir));
});

Let me know if i can be of any additional help.

Upvotes: 2

Related Questions