1

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

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

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

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

我的文件夹结构是

/
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加载。

谁能解释为什么？

我正在使用最新版本的浏览器同步

4

0 回答 0