3

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 用に最適化したりして、数キロバイトを節約したいと考えています。

私のconfiqはgulpfile.js次のようになります：

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"/>

何か提案がありますか、またはこの問題を自分で見て修正しましたか? 乾杯。

4

1 に答える 1

4

あなたは正しい一般的な考えを持っています: に設定cleanupIDsするfalseと、実際に<symbol>周りが保持されます。しかし、あなたのやり方は間違っています。

オプション オブジェクトを に渡そうとしていますimagemin()。にgulp-imageminは実際にはoptions引数がありますが、オプションのみをサポートしていverboseます。指定したオプションはどれも に渡されませんsvgo。

svgoこれらのオプションを明示的にプラグインに渡す必要があります。これを行う方法は、正直かなり奇妙で複雑ですが、次のようになります。

imagemin([
  imagemin.svgo({
    plugins: [
      { optimizationLevel: 3 },
      { progessive: true },
      { interlaced: true },
      { removeViewBox: false },
      { removeUselessStrokeAndFill: false },
      { cleanupIDs: false }
   ]
 }),
 imagemin.gifsicle(),
 imagemin.jpegtran(),
 imagemin.optipng()
])
于 2016-11-17T17:52:42.957 に答える