Question

我现在面临一个奇怪的问题。所以，我正在尝试测试生产版本，生成的构建文件包含?v=${some random number here}以防止缓存。

但是，浏览器同步不会加载这些文件。

我想出来的方式是因为我总共有3个文件，2个脚本文件和1个样式表。其中一个脚本文件和样式表生成了查询字符串。

加载不包含查询字符串的脚本文件。

我的文件夹结构是

/
index.html
assets/
  dist/
    mystyle.css?v=1237791723
    myscript.js?v=123576231612

两个gulp任务是

gulp.task('localScripts', function() {
    return gulp.src(['assets/js/app.js', 'node_modules/owl.carousel/dist/owl.carousel.min.js', 'assets/dist/js/style.js'])
        .pipe(babel({ presets: ['babili'] }))
        .pipe(concat(`myscript.js?v=${date}`))
        .pipe(gulp.dest(dist))
})

gulp.task('joinCss', function() {
    return gulp.src(['node_modules/bootstrap/dist/css/bootstrap.min.css', 'assets/dist/css/style.min.css'])
        .pipe(concat(`mystyle.css?v=${date}`))
        .pipe(gulp.dest(dist))
})

我用来生成构建index.html的一个替换html任务是

gulp.task('replaceHtml', function () {
     gulp.src('./start.html').pipe(htmlReplace({
        'js': ['assets/dist/scripts.js', `assets/dist/myscript.js?v=${date}`],
         'css': `assets/dist/mystyle.css?v=${date}`
    })).pipe(rename('index.html'))
         .pipe(gulp.dest('./'))
});

并且，最终生成的index.html具有所需的文件：

<link rel="stylesheet" href="assets/dist/mystyle.css?v=1508761436559">

<script src="assets/dist/scripts.js"></script>
<script src="assets/dist/myscript.js?v=1508761436559"></script>

我的浏览器同步配置

gulp.task('server', [], function() {

    browserSync.init({
        server: {
            baseDir: "./"
        },
        port: 9001,
    });
});

当我启动服务器时，只加载scripts.js。

任何人都可以解释原因吗？

我使用的是最新版本的browser-sync

Browser-sync gulp不会加载带有查询字符串的文件

0 个答案: