gulp-watchとLiveReloadが遅すぎます。

Question

私はgulp-watchとLiveReloadをセットアップしました。それは何とか働くが、ほとんどの時間は間違っている。 LiveReloadは、ブラウザがファイルをリロードするよりも早くリロードイベントを出すように感じます。私はこのようにそれを説明することができます： は時々ページがすでに新しいです

1. いくつかのファイルが私のsrcディレクトリに
2. を変更しましたそれはそれはまだコンパイルされている間
3. をコンパイルするために開始し、ブラウザがページをリロードすると、正しい。ほとんどの場合、古いものです。時にはそのページの唯一の部分。
4. リロードしても問題ありません。

gulp-watchとLiveReloadを統合している間に私は間違いを犯したと思います。あなたは私が1つを見つけるのを助けることができますか？

ここにある私のgulpfile.js：

var gulp = require('gulp'); 
var jade = require('gulp-jade'); 
var sass = require('gulp-sass'); 
var watch = require('gulp-watch'); 
var connect = require('gulp-connect'); 
var favicons = require('gulp-favicons'); 
var ga = require('gulp-ga'); 
var postcss  = require('gulp-postcss'); 
var autoprefixer = require('autoprefixer'); 
var responsive = require('gulp-responsive'); 
var concat = require('gulp-concat'); 
var uglify = require('gulp-uglify'); 
var print = require('gulp-print'); 

gulp.task('default', ['jade', 'sass', 'js', 'connect', 'watch']); 

gulp.task('jade', function() { 
    gulp.src('./src/jade/*.jade') 
    .pipe(jade()) 
    .pipe(ga({url: 'auto', uid: config.gaId, tag: 'body',sendPageView: true, minify: false, anonymizeIp: false})) 
    .pipe(gulp.dest('./public/')); 
}); 

gulp.task('sass', function() { 
    gulp.src('./src/sass/style.scss') 
    .pipe(sass({ 
     includePaths: [ 
     config.bowerDir + '/bootstrap/scss', 
     config.bowerDir + '/font-awesome/scss' 
     ], 
     outputStyle: 'compressed' 
    }) 
    .on('error', sass.logError)) 
    .pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ])) 
    .pipe(gulp.dest('./public/css')); 
}); 

gulp.task('connect', function() { 
    connect.server({ 
    root: 'public', 
    livereload: true 
    }); 
}); 

gulp.task('watch', function() { 
    gulp.watch(['./src/jade/**/*.jade'], ['jade']); 
    gulp.watch(['./src/sass/**/*.scss'], ['sass']); 
    gulp.watch(['./src/js/**/*.js'], ['js']); 
    watch(['./public/**/*.html', './public/**/*.css', './public/**/*.js']).pipe(connect.reload()); 
}); 

gulp.task('js', function() { 
    return gulp.src([ 
    './node_modules/fontfaceobserver/fontfaceobserver.js', 
    './bower_components/jquery/dist/jquery.min.js', 
    './bower_components/bootstrap/js/dist/util.js', 
    './bower_components/bootstrap/js/dist/collapse.js', 
    './bower_components/picturefill/dist/picturefill.js', 
    './src/js/modernizr.js', 
    './src/js/js.js' 
    ]) 
    .pipe(concat({ path: 'js.js'})) 
    .pipe(uglify()) 
    .pipe(gulp.dest('./public/js')); 
}); 

完全なソースはここhttps://gist.github.com/dandaka/3e342158763f9ccbd23305eecfd0b69c

ですありがとうございました！例えばJSなどのタスクのそれぞれの終わりに

Answer 1

@ TheFallenの提案に加えて、別のタスクを作成してウォッチタスクの最後に配置することをお勧めします。

var gulp = require('gulp'); 
var runSequence = require('run-sequence'); 

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

gulp.task('watch', function() { 
    gulp.watch(['./src/jade/**/*.jade'], function() { 
    runSequence('jade', 'reload'); 
    }) 

    gulp.watch(['./src/sass/**/*.scss'], function() { 
    runSequence('sass', 'reload'); 
    }); 

    gulp.watch(['./src/js/**/*.js'], function() { 
    runSequence('js', 'reload'); 
    }); 
}); 

UPD：@Fencerが正しく指摘したように、タスクは前のタスクが完了する前に、ページがリロードされたときに、時にはケースにつながる可能性が同時に実行される、私はこれを回避するためにrun-sequenceパッケージの使用を追加しました問題。

Answer 2

場所.pipe(connect.reload())、：

return gulp.src([ 
    ... 
    ]) 
    .pipe(concat({ path: 'js.js'})) 
    .pipe(uglify()) 
    .pipe(gulp.dest('./public/js')) 
    .pipe(connect.reload()); 

それは時計watch([...]).pipe(connect.reload());上にあるときのコンパイルは必ずしも開始BUていない場合、今それが発生しますので終了しました。

Answer 3

最近同じ問題が発生しましたが、私のコメントで指摘したように、ここで述べた両方の解決策は機能しませんでした。

gulp.task('jade', function() { 
    var stream = gulp.src('./src/jade/*.jade') 
     .pipe(jade()) 
     .pipe(ga({url: 'auto', uid: config.gaId, tag: 'body',sendPageView: true, minify: false, anonymizeIp: false})) 
     .pipe(gulp.dest('./public/')) 
     .on('end', function() { 
      livereload.reload(); 
     }); 
}); 

... 

gulp.task('watch', function() { 
    livereload.listen(); 
    gulp.watch(['./src/jade/**/*.jade'], ['jade']); 
    ... 
}); 

私は方法がわからないがぶ飲みを：（ただし、接続一気のが、実際のソリューションは、一般的なする必要があります私は使用しませんでした）ガルプ3以下であると、私が思い付くことができる唯一の作業溶液を使用して

内部的には動作しますが、on('end'...)はストリームのすべての操作が完了するまで実際に待機しているようです。

Gulp 4を使用すると、@ Constanin Azizovのように見えるソリューションが存在する可能性があります。

だけでも

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

gulp.task('watch', function() { 
    gulp.watch(['./src/jade/**/*.jade'], gulp.series('jade', 'reload')); 
    ... 
}); 

または多分：

gulp.task('watch', function() { 
    gulp.watch(['./src/jade/**/*.jade'], gulp.series('jade', function() { 
     connect.reload(); 
    })); 
    ... 
}); 

私はがぶ飲み4ソリューションをテストしていないことに注意してください。私はまだ正式にリリースされていないので、バージョン4に切り替えるのはちょっと嫌です。しかし、それは非常に魅力的です。