Works in Safari iOS but not in desktop browsers

[aminta]

Hi! These are my Gulp 4 tasks:

gulp.task ('css', function() {
     return gulp
     // Find all .scss files from the paths.css.sources
    .src(config.paths.css.sources)
    .pipe(config.isProduction ? gutil.noop() : $.sourcemaps.init())
    // Run Sass on those files
    .pipe($.sass(
        {outputStyle: config.sassStyle,
         includePaths: require('node-bourbon').includePaths
        }
        ))
    .on('error', gutil.log)
    .pipe($.autoprefixer(
        {
        browsers: ['IE 9']

        }
        ))
    .pipe(config.isProduction ? gutil.noop() : $.sourcemaps.write(config.paths.workingDir) )
    .pipe(config.isProduction ? $.stripCssComments() : gutil.noop() )
    // Write the resulting CSS in the output folder
     .pipe(cachebust.resources())
    .pipe(gulp.dest(config.outputDir))
    .pipe( reload({stream:true}) );
    // .pipe(isProduction ? gutil.noop() : reload({stream:true}) );

});

// copy html files and reload (if !isProduction)
gulp.task ('html', function() {
    return gulp
        .src(config.paths.html.sources)
        .pipe($.inline({
            base: 'components/js/icons/',
            // js: uglify,
            // css: minifyCss,
            disabledTypes: ['svg', 'img', 'css'], // Only inline css files
            // ignore: ['./css/do-not-inline-me.css']
        }))
        .pipe(config.isProduction ? $.htmlmin({collapseWhitespace: true,  conservativeCollapse: true, removeComments: true,}) : gutil.noop() )
        .pipe(cachebust.references())
        .pipe(gulp.dest(config.outputDir))
        .pipe( reload({stream:true}) );
    // .pipe(isProduction ? gutil.noop() : reload({stream:true}) );

})

// gulp-watch + gulp.series to execute tasks synchronously
gulp.task('watch', function (done) {
    $.watch(config.paths.css.sources, gulp.series('css', 'html') );

    $.watch(config.JsSources, gulp.series('js') );

    $.watch(config.paths.html.sources, gulp.series('html') );
       done();
});

// execute synchronously (Gulp 4.0 feature) + asynchronously (gulp.parallel('task') mimics Gulp < 4)
gulp.task('default', gulp.series('svgIcons', 'css', /*'respond',*/ 'js', 'img', 'font', 'html', 'root', /*'critical', */ gulp.parallel('browser-sync', 'watch') ) );

[jhuesos]

I do not understand what's the problem. Can you elaborate?

[aminta]

When I edit and save a .scss file, the cache is cleared on iOS but not on desktop browsers, because the link to new somename21313.css file is not updated: in iOS it is. I have to update an html file to make cache cleared also on the connected desktop browsers...

[jhuesos]

I am sorry but I don't see how this plugin could be browser dependent. I don't see how they could be related. You should be able to reproduce this issue with any browser.

The only thing it could happen is that hash is not calculated correctly on file changed and that's why browser is not updated. You should try to add a gulp.debug entry after calling references to see if the file new hash is calculated correctly.