I am facing a weird problem right now. So, I am trying to test production build, and the build files generated contain a ?v=${some random number here}
to prevent caching.
However, the browser-sync doesn't load these files.
The way I figured that out is because is that I have in total 3 files, 2 script files and one stylesheet. One of the script files and the stylesheet have the query string generated.
The script file that doesn't contain the query string gets loaded.
My folder structure is
/
index.html
assets/
dist/
mystyle.css?v=1237791723
myscript.js?v=123576231612
And the two gulp tasks are
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))
})
And one replace html task which I use to generate the build index.html is
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('./'))
});
And, the final generated index.html
has the desired files in place:
<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>
And my browser-sync config is
gulp.task('server', [], function() {
browserSync.init({
server: {
baseDir: "./"
},
port: 9001,
});
});
And when I start the server, only scripts.js
gets loaded.
Can anyone explain why?
I am using the latest version of browser-sync