Gulp imagemin Optimierung entfernt Svg Symbol

Dies ist das erste Mal, dass ich Gulp Task-Runner oder jede Art von Task-Runner verwenden. Ich hoffe, ich stelle mein Problem verständlich dar.Gulp imagemin Optimierung entfernt Svg Symbol

Ich habe eine SVG-Datei namens svg-system.svg, die enthält:

<svg xmlns="http://www.w3.org/2000/svg"> 
    <!-- facebook icon --> 
    <symbol id="facebook" role="img" aria-labelledby="title desc" viewBox="0 0 9.3 20"> 
     <title id="title">Logo af Facebook</title> 
     <desc id="desc">Logoet bruges til link indikator for at tilgå vores Facebook side eller dele os.</desc> 
     <path d="M9.3,6.5L8.9,10H6.1c0,4.5,0,10,0,10H2c0,0,0-5.5,0-10H0V6.5h2V4.2C2,2.6,2.8,0,6.2,0l3.1,0v3.4 
     c0,0-1.9,0-2.2,0c-0.4,0-0.9,0.2-0.9,1v2.1H9.3z"/> 
    </symbol> 
</svg>

Und ich möchte die Datei komprimieren/optimieren es für meine dist einige Kilobyte zu speichern.

Mein confiq in gulpfile.js wie folgt aussieht:

gulp.task('images', function() { 
    return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)') 
    // Caching images that ran through imagemin 
    .pipe(cache(imagemin({ 
     options: { 
      optimizationLevel: 3, 
      progessive: true, 
      interlaced: true, 
      removeViewBox:false, 
      removeUselessStrokeAndFill:false, 
      cleanupIDs:false 
     } 
    }))) 
    .pipe(gulp.dest('dist/images')); 
});

Wenn ich die Aufgabe ausführen es gibt meine svg-system.svg mit diesem Inhalt nur:

<svg xmlns="http://www.w3.org/2000/svg"/>

Anregungen oder dieses Problem gesehen haben, sich und behoben? Prost.

Quelle

2016-11-17 Mikkel Madsen

Sie haben die richtige allgemeine Idee: Einstellung zu false wird in der Tat halten Sie die <symbol> um. Wie auch immer du es tust, ist falsch.

Sie versuchen, ein Optionsobjekt an imagemin() zu übergeben. Während gulp-imagemin tatsächlich ein options Argument hat, ist es . Keine der Optionen, die Sie angeben, wird an svgo übergeben.

Sie müssen diese Optionen explizit an das svgo Plugin übergeben. Die Art und Weise Sie dies tun, ist ehrlich ziemlich komisch und kompliziert, aber hier geht:

imagemin([ 
    imagemin.svgo({ 
    plugins: [ 
     { optimizationLevel: 3 }, 
     { progessive: true }, 
     { interlaced: true }, 
     { removeViewBox: false }, 
     { removeUselessStrokeAndFill: false }, 
     { cleanupIDs: false } 
    ] 
}), 
imagemin.gifsicle(), 
imagemin.jpegtran(), 
imagemin.optipng() 
])

Quelle

2016-11-17 17:52:42

Thx für Ihre Zeit habe ich versucht, wie diese https://jsfiddle.net/4t2kyj5z/ aber es komprimiert noch die svg in Vergessenheit wie in meiner Frage postet: P –

Das liegt an 'gulp-cache'. Sie müssen [den Cache löschen] (https://github.com/jgable/gulp-cache#clearing-the-cache). –

Hmm, versucht, immer noch nicht die Arbeit:/Hier ist gulpfile.js in einer Geige: https://jsfiddle.net/4t2kyj5z/1/ –

Gulp imagemin Optimierung entfernt Svg Symbol

Antwort

Verwandte Themen