.jade-Dateien aktualisieren HTML-Dateien, aber Browser-Sync wird zu früh aktualisiert

Question

Ich habe schon seit Stunden darauf pondiert, ich würde gerne einen Tipp, um meine Einrichtung in Gang zu bringen.

Immer wenn ich meine .jade Dateien speichere, wird der Browser nicht sofort aktualisiert. Stattdessen muss ich ein zweites Mal speichern, bevor die Aktualisierungen im Browser angezeigt werden: Der Webserver wird vor Abschluss der Build-Jade-Aufgabe aktualisiert. Dies scheint seltsam, da ich die Aufgabe 'Build-Jade' als eine Abhängigkeit vor der Aktualisierung habe.

Die HTML-Datei wird nach dem ersten Speichern aktualisiert, es ist nur die Aktualisierung zu früh.

Alle Tipps werden sehr geschätzt.

schluck-Datei:

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

Answer 1

Obwohl Sie die Aufgabe in der Liste dependancy tun haben, Sie sind nicht die Aufgabe zurückkehren, so schlingen wissen nicht wirklich, wenn es fertig ist, zum Glück ist dies eine ganz einfache etwas zu korrigieren.

Ich habe ein Beispiel Ihres Codes genommen und return zur gulp.src() Funktion hinzugefügt, Sie müssen dieses Verfahren mit all Ihren Funktionen befolgen und dann wird es funktionieren.

Hoffentlich ist dies klar genug für Sie, um voranzukommen.

/** 
* 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)); 
}); 

Lassen Sie mich wissen, ob ich weitere Hilfe sein kann.