Reputation: 44
I have a project, where there are .jpg, .png, .svg images. I installed the imagemin plugin to compress all of them. When I start the task, gulp compresses only one .jpg file. what it can be?
But I tried to simply watch the images and copy them to dist folder, but the result is the same.
Yesterday, when I wrote the gulpfile and tested, all was fine ... Maybe it is the problem with browsersync, but I tried to reinstall the plugins and the result is none.
Here are the images files in src and dist folder and the code of gulpfile.js
Thanks a lot.
const projectFolder = require('path').basename(__dirname);
const sourceFolder = "src";
const path = {
build: {
html: projectFolder + "/",
css: projectFolder + "/css/",
js: projectFolder + "/js/",
img: projectFolder + "/img/",
fonts: projectFolder + "/fonts/"
},
src: {
html: [sourceFolder + "/*.html",
"!" + sourceFolder + "/_*.html"
],
css: sourceFolder + "/scss/style.scss",
js: sourceFolder + "/js/script.js",
img: sourceFolder + "/img/**/*.{jpg, png, svg, gif, ico, webp}",
fonts: sourceFolder + "/fonts/*.ttf"
},
watch: {
html: sourceFolder + "/**/*.html",
css: sourceFolder + "/scss/**/*.scss",
js: sourceFolder + "/js/**/*.js",
img: sourceFolder + "/img/**/*.{jpg, png, svg, gif, ico, webp}"
},
clean: "./" + projectFolder + "/"
}
// === MODULES ===
const fs = require('fs');
const gulp = require('gulp');
const {
src,
dest
} = gulp;
const browser_sync = require('browser-sync').create();
const fileInclude = require('gulp-file-include');
const del = require('del');
const scss = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const group_media = require('gulp-group-css-media-queries');
const clean_css = require('gulp-clean-css');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify-es').default;
const imagemin = require('gulp-imagemin');
const webp = require('gulp-webp');
const webp_html = require('gulp-webp-html');
const webp_css = require('gulp-webp-css');
const ttf_woff = require('gulp-ttf2woff');
const ttf_woff2 = require('gulp-ttf2woff2');
const fonter = require('gulp-fonter');
// === === ===
// === FUNCTIONS FOR SOURCE FILES ===
const html = () =>
src(path.src.html)
.pipe(fileInclude())
.pipe(webp_html())
.pipe(dest(path.build.html))
.pipe(browser_sync.stream());
const css = () =>
src(path.src.css)
.pipe(scss({
outputStyle: 'expanded'
}))
.pipe(group_media())
.pipe(autoprefixer({
overrideBrowserslist: ["last 5 versions"],
cascade: true
}))
.pipe(webp_css())
.pipe(dest(path.build.css))
.pipe(clean_css())
.pipe(rename({
extname: ".min.css"
}))
.pipe(dest(path.build.css))
.pipe(browser_sync.stream());
const js = () =>
src(path.src.js)
.pipe(fileInclude())
.pipe(dest(path.build.js))
.pipe(uglify())
.pipe(rename({
extname: ".min.js"
}))
.pipe(dest(path.build.js))
.pipe(browser_sync.stream());
const images = () => {
return src(path.src.img)
.pipe(webp({
quality: 70
}))
.pipe(dest(path.build.img))
.pipe(src(path.src.img))
.pipe(imagemin({
progressive: true,
svgoPlugins: [{ removeViewBox: false }],
interlaced: true,
optimizationLevel: 3
}))
.pipe(dest(path.build.img))
.pipe(browser_sync.stream());
}
const fonts = () =>
src(path.src.fonts)
.pipe(ttf_woff())
.pipe(dest(path.build.fonts))
.pipe(src(path.src.fonts))
.pipe(ttf_woff2())
.pipe(dest(path.build.fonts));
// === TASK FOR OTF FONT FILES ===
gulp.task('otf_ttf', () =>
src([sourceFolder + "/fonts/*.otf"])
.pipe(fonter({
formats: ['ttf']
}))
.pipe(dest(path.build.fonts))
);
// === FUNCTION FOR IMPORTING THE FONTS INTO (S)CSS ===
const fontsStyle = () => {
let fileContent = fs.readFileSync(sourceFolder + '/scss/fonts.scss');
if (fileContent == '') {
fs.writeFile(sourceFolder + '/scss/fonts.scss', '', cb);
return fs.readdir(path.build.fonts, function (err, items) {
if (items) {
let cFontname;
for (var i = 0; i < items.length; i++) {
let fontname = items[i].split('.');
fontname = fontname[0];
if (cFontname != fontname) {
fs.appendFile(sourceFolder + '/scss/fonts.scss', '@include font("' + fontname + '", "' + fontname + '", "400", "normal");\r\n', cb);
}
cFontname = fontname;
}
}
})
}
}
// === === ===
const browserSync = () => {
browser_sync.init({
server: {
baseDir: path.clean
},
port: process.env.PORT || 3000,
notify: false
})
};
const watchFiles = () => {
gulp.watch([path.watch.html], html);
gulp.watch([path.watch.css], css);
gulp.watch([path.watch.js], js);
gulp.watch([path.watch.img], images);
}
const clean = () => del(path.clean);
// === === ===
const build = gulp.series(clean, gulp.parallel(html, css, js, images, fonts), fontsStyle);
const watch = gulp.parallel(build, watchFiles, browserSync);
// === EXPORTS ===
exports.html = html;
exports.css = css;
exports.js = js;
exports.images = images;
exports.fonts = fonts;
exports.fontsStyle = fontsStyle;
exports.build = build;
exports.watch = watch;
exports.default = watch;
Upvotes: 0
Views: 1257
Reputation: 21
try to remove the spaces
"/img/**/*.{jpg, png, svg, gif, ico, webp}"
=>
"/img/**/*.{jpg,png,svg,gif,ico,webp}"
Upvotes: 2
Reputation: 1
Замените img: sourceFolder + "/img/**/*.{jpg, png, svg, gif, ico, webp}" на
img: source_folder + "/img/**/*.+(png|jpg|gif|ico|svg|webp)"
src:{
html: [source_folder + "/*.html", "!"+ source_folder + "/_*.html"],
css: source_folder + "/scss/style.scss",
js: source_folder + "/js/script.js",
img: source_folder + "/img/**/*.+(png|jpg|gif|ico|svg|webp)",
fonts: source_folder + "/fonts/*.ttf"
},
Upvotes: 0