gulp-responsive проблемы с обработкой svg

12 июня 2021, 10:30

Использую модуль gulp-responsive для изменения изображений, имею ошибку: Код:

[15:41:15] Error in plugin "gulp-responsive" Message: File footer\facebook.svg: Unsupported output format unsupported Details: domainEmitter: [object Object] domain: [object Object] domainThrown: false Цитата

мой код обработки изображений

gulp.task("images", () => {
return gulp.src(paths.images.src)
    .pipe(imagemin([
        imagemin.svgo({
            plugins: [
                { removeViewBox: false },
                { removeUnusedNS: false },
                { removeUselessStrokeAndFill: false },
                { cleanupIDs: false },
                { removeComments: true },
                { removeEmptyAttrs: true },
                { removeEmptyText: true },
                { collapseGroups: true }
            ]
        })
    ]))
    .pipe(responsive({
            'footer/*.svg':{},
             '**/logo*.png': [
                {
                    width: "100%",
                    quality: 100
                },{
                    width: 50,
                    quality: 75,
                    rename: {
                        suffix: '-50w',
                        extname: '.png'
                    }
                },
                {
                    width: 25,
                    quality: 50,
                    rename: {
                        suffix: '-25w',
                        extname: '.png'
                    }
                }
            ],       
        {
            errorOnUnusedConfig: false,
            errorOnUnusedImage: false,
            errorOnEnlargement: false,
            quality: 80,
            progressive: false,
        }))
    .pipe(gulp.dest(paths.images.dist))
    .on("end", browsersync.reload);

}); Задача в том, по сути, чтобы при сборке проекта svg файлы то же переносились, а не пропускались. как это сделать? спасибо!

Answer 1

Согласно документации https://www.npmjs.com/package/gulp-responsive

gulp-responsive depends on sharp. Sharp is one of the fastest Node.js modules for resizing JPEG, PNG, WebP and TIFF images.

То есть, только эти растровые форматы. SVG не поддерживается.

Просто для копирования файлов я обычно использую gulp-newer https://www.npmjs.com/package/gulp-newer

Answer 2

responsive не даст пропустить через себя svg как уже сказал Scriptach. Я использую вот такую конструкцию, думаю вы найдете в ней решение своей проблемы

var gulp         = require('gulp'),
    newer        = require('gulp-newer'),
    rename       = require('gulp-rename'),
    imagemin     = require('gulp-imagemin'),
    responsive   = require('gulp-responsive'),
    merge        = require('merge-stream');
// 'img/_src/.icon/' folder only for favicon
gulp.task('img-processing', function() {
    var iconFold = gulp.src('app/img/_src/.icon/**/*.{svg,png,ico}')
    .pipe(newer('app/img/@icon'))
    .pipe(imagemin())
    .pipe(gulp.dest('app/img/@icon'));
    var specFold = gulp.src(['app/img/_src/**/*.{svg,gif}', '!app/img/_src/.icon'])
    .pipe(newer('app/img/@spec'))
    .pipe(imagemin())
    .pipe(gulp.dest('app/img/@spec'));
    var mainFold = gulp.src(['app/img/_src/**/*.{png,jpg,jpeg}', '!app/img/_src/.icon'])
    .pipe(newer('app/img/@1x'))
    .pipe(imagemin())
    .pipe(responsive({
        '*': [{
            // Produce @2x images
            width: '100%', quality: 90, rename: { prefix: '@2x/', },
        }, {
            // Produce @1x images
            width: '50%', quality: 90, rename: { prefix: '@1x/', }
        }]
    })).on('error', function () { console.log('No matching images found') })
    .pipe(rename(function (path) {path.extname = path.extname.replace('jpeg', 'jpg')}))
    .pipe(gulp.dest('app/img'));
    return merge(iconFold, specFold, mainFold);
});