@Ourmine

Галп не сжимает картинки после их изменения?

Галп не обрабатывает фото который я взял с сервака и должен положить его обработанным 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;
  • Вопрос задан
  • 81 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы