gulp-rev 和 rev-collector 控制版本總是上一個舊版本的bug原因

原因是執行順序的問題


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

現在 問題就解決了

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章