Works in Safari iOS but not in desktop browsers #2
Description
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') ) );