.jadeファイルはhtmlファイルを更新しますが、ブラウザ同期のリフレッシュが早すぎます

Question

私は何時間もこれを熟考しています。

私の.jadeファイルを保存すると、ブラウザはただちに更新されません。代わりに、アップデートがブラウザに反映される前にもう一度保存する必要があります。ビルド・ジェード・タスクを完了する前にWebサーバーがリフレッシュされます。これは奇妙に思えます。私は、リフレッシュする前に依存関係としてビルドジェイドの仕事をしています。

.htmlファイルは、最初の保存後に更新されます。リフレッシュが早すぎるだけです。

どのようなヒントも大歓迎です。

一気ファイル：あなたが依存リストでタスクを持っていますが、タスクを返却していないので、それが完了したときに一口が実際に知らない

/*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

、幸いこれは非常に簡単です是正すること。

コードのサンプルをとり、returnをgulp.src()関数に追加しました。すべての関数でこの手順を実行する必要があります。

これは、あなたが前進するのに十分です。

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

もし私が他の助けになることができたら教えてください。