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

149
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);
});
READ ALSO
Как с помощью lodash вытащить элемент
javascript

Как с помощью lodash вытащить элемент

Всем привет, не до конца разобралась с lodash Подскажите, пожалуйста как вытащить из данных элемент

 143
Как правильно експортнуть классы чтобы не ругался ESlint?
javascript

Как правильно експортнуть классы чтобы не ругался ESlint?

 130
Баг с blur(), помогите пожалуйста!
CSS

Баг с blur(), помогите пожалуйста!

Доброго времени суток!

 151
Вложенные блоки не заполняют всю высоту родителя без явного указания height
CSS

Вложенные блоки не заполняют всю высоту родителя без явного указания height

Если задать блоку min-height вместо явного height, то в IE внутренние блоки не будут заполнять его по высоте полностью; в других браузерах все нормальноЕсть...

 127