瀏覽器同步不會刷新觀察到的文件gulp-watch

Question

在我的構建過程中，我想將構建步驟的構件放到.tmp/serve目錄中。

當我修改我的工作目錄中的文件時，我設法設置了gulp-watch來觸發特定的任務。 E.q.當我修改HTMLS，它們是建立和文物被粘貼到我在用browser-sync從.tmp/serve重裝文件問題所需.tmp/serve目錄

。當我多次在工作目錄中保存更改時，browser-sync只刷新以前的更改（1更改延遲）。我猜reload函數在gulp-dest完成之前觸發。請注意，如果我手動刷新瀏覽器，則會顯示當前更改。

我做錯了什麼？

構建HTMLS任務

gulp.task('html', ['styles'],() => { 
    return gulp.src('app/*.html') 
    .pipe($.if('*.html', $.minifyHtml({conditionals: true, loose: true}))) 
    .pipe(gulp.dest('.tmp/serve')) 
    ; 
}); 

Sever的任務

const reload = browserSync.reload; 

gulp.task('serve', ['styles', 'fonts', 'build:scripts', 'html', 'images'],() => { 
    browserSync({ 
    notify: false, 
    port: 9000, 
    server: { 
     baseDir: ['.tmp/serve'], 
     routes: { 
     '/bower_components': 'bower_components' 
     } 
    } 
    }); 

    /*********** SEE THE LINES BELOW **************/ 
    gulp.watch([ 
    '.tmp/serve/**/*', 
    ]).on('change', reload); 

    gulp.watch('app/styles/**/*.scss', ['styles']); 
    gulp.watch('app/fonts/**/*', ['fonts']); 
    gulp.watch('app/*.html', ['html']); 
    gulp.watch('app/scripts/**/*', ['build:scripts']); 
    gulp.watch('bower.json', ['wiredep', 'fonts']); 
}); 

Answer 1

可以使用run-sequence構建後重裝。

你gulpfile會變成這個樣子..

var gulp = require('gulp'), 
    runSeq = require('run-sequence') 
    ... 
    ; 

gulp.task('build', ['styles', 'fonts', 'build:scripts', 'html', 'images']); 

gulp.task('serve', ['build', 'watch'],() => { 
    browserSync({ 
    notify: false, 
    port: 9000, 
    server: { 
     baseDir: ['.tmp/serve'], 
     routes: { 
     '/bower_components': 'bower_components' 
     } 
    } 
    }); 

gulp.task('reload', function (callback) { 
    browserSync.reload(); 
    callback(); 
}); 

gulp.task('watch', ['watch-styles', ...]); 

gulp.task('watch-styles', function() { 
    gulp.watch('app/styles/**/*.scss', function() { 
     runSeq('styles', 'reload'); 
    }); 
}); 

/* And so on for every watch task */ 

注意運行序列需要你的任務，要麼返回流或調用回調，否則會造成一飲而盡無限期暫停。閱讀Doc瞭解更多信息。