GulpとbrowserSyncを使用すると、リロード順序が正しくない

Question

Gulp V4でpug（jade）、javascript、sassファイルをコンパイルしようとしています。これらのファイルが変更されたときにbrowserSyncを使用してブラウザをリロードします。そこには多くのガイドがありますが、どちらの方法でコードを書いても、タスクオーダーを正しく取得できないようです。私はgulp.seriesを使用してタスクの順序を設定していますが、browserSyncはボールを再生したくありません。

ここに私のガルプファイルの印刷です：私は見てファイル内のファイルを変更したときに

$ gulp 
[13:09:33] Using gulpfile ~/Dropbox Aaron/Dropbox (Personal)/01_Me/01_Dev/01_My Work/*Template/gulpfile.js 
[13:09:33] Starting 'default'... 
[13:09:33] Starting 'clean'... 
[13:09:33] Finished 'clean' after 2.64 ms 
[13:09:33] Starting 'build-sass'... 
[13:09:33] Finished 'build-sass' after 443 ms 
[13:09:33] Starting 'build-js'... 
[13:09:33] Finished 'build-js' after 4.42 ms 
[13:09:33] Starting 'build-pug'... 
[13:09:33] Finished 'build-pug' after 3.15 ms 
[13:09:33] Starting 'remove'... 
[13:09:33] Finished 'remove' after 656 μs 
[13:09:33] Starting 'serve'... 
[BS] Access URLs: 
------------------------------------- 
     Local: http://localhost:3000 
    External: http://10.130.91.51:3000 
------------------------------------- 
     UI: http://localhost:3001 
UI External: http://10.130.91.51:3001 
------------------------------------- 
[BS] Serving files from: ./dist/ 

そして、この：がぶ飲みを開始するときに

var gulp = require('gulp'), 
... etc. 

var paths = { 
    sass: ['src/scss/**/*.scss'], 
    js: ['src/js/**/*.js'], 
    pug: ['src/**/*.pug'] 
}; 

// Shared Tasks: 
//*------------------------------------*/ 

gulp.task('clean', function(done){ 
    del(['dist/assets/**/*.css', 'dist/assets/**/*.map', 'dist/assets/**/*.js']); 
    done(); 
}); 

// App Specific Tasks: 
//*------------------------------------*/ 

// Sass 
gulp.task('build-sass', function(){ 
    gulp.src(paths.sass) 
     return sass(paths.sass, { 
      style: 'expanded' 
     }) 
     .on('error', sass.logError) 
     .pipe(prefix('last 2 version', '> 1%', 'ie 8', 'ie 9')) 
     .pipe(sourcemaps.write()) 
     .pipe(gulp.dest('dist/assets/css')) 
     .pipe(cleanCSS({ advanced: false, keepSpecialComments: 0 })) 
     .pipe(rename({suffix: '.min'})) 
     .pipe(gulp.dest('dist/assets/css')); 
}); 

// JS 
gulp.task('build-js', function(done){ 
    gulp.src(paths.js) 
     .pipe(concat('all.js')) 
     .pipe(gulp.dest('dist/assets/js')) 
     .pipe(rename({suffix: '.min'})) 
     .pipe(uglify()) 
     .pipe(gulp.dest('dist/assets/js')) 
     done(); 

// Pug 
gulp.task('build-pug', function buildHTML(done){ 
    gulp.src(['src/**/*.pug'], { 
     base: 'src' 
    }) 
    .pipe(pug()) 
    .pipe(gulp.dest('./dist/')) 
    done(); 
}); 


// Service Tasks: 
//*------------------------------------*/ 

// Delete the compiled views dir. 
gulp.task('remove', function(done){ 
    del(['dist/views/**/']); 
    done(); 
}); 

// Serve the site locally and watch for file changes 
gulp.task('serve', function(done){ 
    browserSync.init({ 
     server: { 
      baseDir: './dist/', 
      notify: false, 
      open: false 
     } 
    }); 

    // Watch & Reload Pug Files 
    gulp.watch([paths.pug], gulp.series('build-pug')).on('change', browserSync.reload); 
    // Watch & Reload Sass Files 
    gulp.watch([paths.sass], gulp.series('build-sass')).on('change', browserSync.reload); 
}); 


gulp.task('default', gulp.series('clean', 'build-sass', 'build-js', 'build-pug', 'remove', 'serve', function(done){ 
    done(); 
})); 

と端末コンソールログを出力する。この

[BS] File changed: src/scss/4_elements/_elements.page.scss 
[13:12:33] Starting 'build-sass'... 
[13:12:34] write ./style.css 
[13:12:34] Finished 'build-sass' after 366 ms 

この場合、ファイルが変更されているように見えますが、browserSyn cがページをリロードし、 'build-sass'が開始されます。どちらが間違った方法です。私は明らかに草を作り、ページをリロードしたいと思う。私が望むコードをリフレッシュするためにブラウザを2回節約しなければならない。

私が使用したコードの一部は、browserSyncのドキュメントから直接です：

https://www.browsersync.io/docs/gulp#gulp-reload

これは動作するようには思えません。

Answer 1

ログ出力が正しく表示されます。まず、「デフォルト」を実行してから一連のタスクを実行します。後でsassファイルを変更すると、 'build-sass'が開始されます。唯一の問題は、browserSync.reload（）でリロードしないことです。だから私は、問題はここにありと信じて：

gulp.watch([paths.sass], gulp.series('build-sass')).on('change', browserSync.reload); 

は、私は非常にgulp4.0レシピは、あなたがやろうとしている正確に何を行うことです

https://github.com/gulpjs/gulp/blob/4.0/docs/recipes/minimal-browsersync-setup-with-gulp4.md

をお勧めします。私は彼らが持っているものをかなり使用しているので、コードを稼動させるのに問題があるなら、私は助けることができます。ここに私の作業コードはあります：

「タスク」の代わりに関数の一般的な使用に注意してください。特にリロード（完了）機能に注意してください。あなたは私のコードのように他のすべての変更を加えることなく、あなたの問題を解決するために十分であるかもしれないリロード機能を追加した後、単に

gulp.watch([paths.sass], gulp.series('build-sass', reload); 

のようなあなたの時計の文にそれを追加してみてください。あるいは、gulpがタスクが完了したことを知るために、単にreturn文を 'build-sass'タスクに追加する必要があります。がんばろう。