这是我第一次使用 Gulp 任务运行器或任何类型的任务运行器。我希望我能以一种易于理解的方式陈述我的问题。
我有一个名为 svg-system.svg
的 svg 文件,其中包含:
<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>
我想为我的 dist 压缩文件/优化它以节省一些千字节。
我在 gulpfile.js
中的 confiq 如下所示:
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'));
});
当我运行任务时,它输出我的 svg-system.svg
仅包含以下内容:
<svg xmlns="http://www.w3.org/2000/svg"/>
有什么建议,或者您自己看到并解决了这个问题吗?干杯。
最佳答案
您的总体思路是正确的:设置 cleanupIDs
至 false
确实会保留 <symbol>
大约。但是你这样做的方式是错误的。
您正在尝试将选项对象传递给 imagemin()
.同时 gulp-imagemin
实际上有一个 options
参数,它 only supports the verbose
option .您指定的选项均未传递给 svgo
.
您需要明确地将这些选项传递给 svgo
插入。老实说,您执行此操作的方式非常奇怪和复杂,但现在开始:
imagemin([
imagemin.svgo({
plugins: [
{ optimizationLevel: 3 },
{ progessive: true },
{ interlaced: true },
{ removeViewBox: false },
{ removeUselessStrokeAndFill: false },
{ cleanupIDs: false }
]
}),
imagemin.gifsicle(),
imagemin.jpegtran(),
imagemin.optipng()
])
关于javascript - Gulp imagemin优化去除svg符号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40660984/