Галп не обрабатывает фото который я взял с сервака и должен положить его обработанным webp поменяв соурс в js. После этого img src стоит правильно в браузере а source srcset от gulp imagemin не изменяет картинку.
let project_folder="dist";
let source_code="src";
let path={
build:{
html: project_folder + "/",
css: project_folder + "/css/",
js: project_folder + "/js/",
img: project_folder + "/img/",
font: project_folder + "/font/",
},
src:{
html: [source_code + "/*.html", "!" + source_code + "/_*.html"],
css: source_code + "/scss/style.scss",
js: source_code + "/js/main.js",
img: source_code + "/img/**/*.{jpg,png,svg,gif,ico,webp}",
font: source_code + "/font/*.ttf",
},
watch:{
html: source_code + "/**/*.html",
css: source_code + "/scss/**/*.scss",
js: source_code + "/js/**/*.js",
img: source_code + "/img/**/*.{jpg,png,svg,gif,ico,webp}",
},
clean:"./" + project_folder + "/"
}
let {src, dest} = require('gulp'),
gulp = require ("gulp"),
browsersync = require ("browser-sync").create(),
fileinclude = require ("gulp-file-include"),
del = require ("del"),
scss = require ("gulp-sass"),
autoprefixer = require ("gulp-autoprefixer"),
media_queries = require ("gulp-group-css-media-queries"),
clean_css = require ("gulp-clean-css"),
rename = require ("gulp-rename"),
uglify = require ("gulp-uglify-es").default,
imagemin = require ("gulp-imagemin"),
webp = require ("gulp-webp"),
webphtml = require ("gulp-webp-html"),
webpcss = require ("gulp-webpcss"),
ttf2woff = require ("gulp-ttf2woff"),
tt2woff = require ("gulp-ttf2woff2");
function browserSync(params){
browsersync.init({
server:{
baseDir:"./" + project_folder + "/"
},
port:3000,
notify:false
})
}
function html(){
return src(path.src.html)
.pipe(fileinclude())
.pipe(webphtml())
.pipe(dest(path.build.html))
.pipe(browsersync.stream())
}
function css(){
return src(path.src.css)
.pipe(
scss({
outputStyle:"expanded"
})
)
.pipe(
media_queries()
)
.pipe(
autoprefixer({
overrideBrowserlist: ["last 5 versions"],
cascade: true
})
)
.pipe(webpcss())
.pipe(dest(path.build.css))
.pipe(clean_css())
.pipe(
rename({
extname:".min.css"
})
)
.pipe(dest(path.build.css))
.pipe(browsersync.stream())
}
function js(){
return src(path.src.js)
.pipe(fileinclude())
.pipe(dest(path.build.js))
.pipe(
uglify()
)
.pipe(
rename({
extname:".min.js"
})
)
.pipe(dest(path.build.js))
.pipe(browsersync.stream())
}
function images(){
return src(path.src.img)
.pipe(dest(path.build.img))
.pipe(src(path.src.img))
.pipe(
webp({
quality:70
})
)
.pipe(
imagemin({
interlaced:true,
progressive:true,
optimizationLevel:3,
svgoPlugins:[{removeViewBox:true}]
})
)
.pipe(dest(path.build.img))
.pipe(browsersync.stream())
}
gulp.task('fonts', function() {
return gulp.src('src/fonts/**/*')
.pipe(gulp.dest('dist/fonts'))
})
function watchFiles(params){
gulp.watch([path.watch.html], html);
gulp.watch([path.watch.css], css);
gulp.watch([path.watch.js], js);
gulp.watch([path.watch.img], images);
}
function clean(params){
return del(path.clean);
}
let build = gulp.series(clean, gulp.parallel(js, css, html, images));
let watch=gulp.parallel(build, watchFiles, browserSync);
exports.images = images;
exports.js = js;
exports.css = css;
exports.html = html;
exports.build = build;
exports.watch = watch;
exports.default = watch;