Mykola MASTEMA
Mykola MASTEMA

Reputation: 44

Gulp does not work with images (reads only one .jpg file)

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.

enter image description here

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

Answers (2)

OlgaPj
OlgaPj

Reputation: 21

try to remove the spaces

"/img/**/*.{jpg, png, svg, gif, ico, webp}" 

=>

"/img/**/*.{jpg,png,svg,gif,ico,webp}"

Upvotes: 2

Замените 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

Related Questions