原因是執行順序的問題
// css處理
gulp.task('css',function() {
return gulp.src(css_path)
.pipe(stylus(config.stylus))
.pipe(autoprefixer(config.autofx))
.pipe(csso())
.pipe(rev()) //定義一個流,將所有匹配到的文件名全部生成相應的版本號
.pipe(gulp.dest(base_dist + '/styles'))
.pipe(rev.manifest()) //把所有生成的帶版本號的文件名保存到json文件中
.pipe(gulp.dest('./dev/rev/css')) //把json文件保存到指定的路徑,自己記住就好
.pipe(reload({ stream: true }));
});
// js處理
gulp.task('js',function() {
return gulp.src(js_path)
.pipe(babel())
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest(base_dist))
.pipe(rev.manifest())
.pipe(gulp.dest('./dev/rev/js'))
.pipe(reload({ stream: true }));
});
// view頁面處理
gulp.task('views',function() {
return gulp.src(view_path)
.pipe(useref())
.pipe(gulp.dest('./dev'))
.pipe(reload({ stream: true }));
});
// 文件版本號更新
gulp.task('version', function(){
return gulp.src(['./dev/rev/**/*.json','./dev/**/*.html'])
.pipe(revCollector({
replaceReved: true
}))
.pipe(gulp.dest('./dev')); //html更換css,js文件版本,更改完成之後保存的地址
})
// 監聽文件改動
gulp.task('watch',function () {
gulp.watch(css_path, ['css', 'version']);
gulp.watch(js_path, ['js', 'version']);
gulp.watch(img_path, ['images']);
gulp.watch(view_path, ['views']).on('change', reload);
})
上述的寫法中, gulp.watch() 後面的 命令數組是沒有先後執行順序的,是並行執行的, 導致了先執行version後執行css的版本更新
所以, 導致延遲一個版本的自動刷新時肯定的, 應該改成下面的, 串行執行命令
// css處理
gulp.task('css',function() {
return gulp.src(css_path)
.pipe(stylus(config.stylus))
.pipe(autoprefixer(config.autofx))
.pipe(csso())
.pipe(rev()) //定義一個流,將所有匹配到的文件名全部生成相應的版本號
.pipe(gulp.dest(base_dist + '/styles'))
.pipe(rev.manifest()) //把所有生成的帶版本號的文件名保存到json文件中
.pipe(gulp.dest('./dev/rev/css')) //把json文件保存到指定的路徑,自己記住就好
.pipe(reload({ stream: true }));
});
// js處理
gulp.task('js',function() {
return gulp.src(js_path)
.pipe(babel())
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest(base_dist))
.pipe(rev.manifest())
.pipe(gulp.dest('./dev/rev/js'))
.pipe(reload({ stream: true }));
});
// view頁面處理
gulp.task('views',function() {
return gulp.src(view_path)
.pipe(useref())
.pipe(gulp.dest('./dev'))
.pipe(reload({ stream: true }));
});
// 文件版本號更新
gulp.task('version', function(){
return gulp.src(['./dev/rev/**/*.json','./dev/**/*.html'])
.pipe(revCollector({
replaceReved: true
}))
.pipe(gulp.dest('./dev')); //html更換css,js文件版本,更改完成之後保存的地址
})
// css文件監聽
gulp.task('watch-css',function () {
runSequence('css', 'version')
})
// js文件監聽
gulp.task('watch-js',function () {
runSequence('js', 'version')
})
// 監聽文件改動
gulp.task('watch',function () {
gulp.watch(css_path, ['watch-css']);
gulp.watch(js_path, ['watch-js']);
gulp.watch(img_path, ['images']);
gulp.watch(view_path, ['views']).on('change', reload);
})
現在 問題就解決了