2

私は Gulp を使用して複数の SVG ファイルを SVG ストレージに保存しています。これらのファイルは、後でパフォーマンスを最大化するために再利用されます。ただし、パスに交換可能な固定部分と動的部分が含まれる、かなり興味深いフォルダー構造を使用しています。

説明しましょう。これが私が使用しているフォルダー構造です。フォルダーには、などの名前のapp/images/productsフォルダーが含まれています。このフォルダーには、単一のファイルに結合して に保存する準備ができている SVG ファイルでいっぱいのサブフォルダーが含まれています。productAproductBcolor-spritesbuild/images/products/{product name}/color-sprites.svg

root/
    |_ gulpfile.js
    |_ app 
        |_ images
            |_ products
                |_ **productA**
                    |_ color-sprites
                        |_ sprite1.svg
                        |_ sprite2.svg
                        |_ ...
    |_ build
        |_ images
            |_ products
                |_ **productA**
                    |_ color-sprites.svg

これは、必要なことを達成するために使用しようとしているコードの簡略化されたバージョンです (renameのインスタンスであることに注意してくださいgulp-rename)。

gulp.task('svg-color-sprites', function () {
    return gulp.src('app/images/products/**/color-sprites/*.+(svg)')
        .pipe(svgMin())
        .pipe(svgStore())
        .pipe(rename(...))
        .pipe(gulp.dest('build/images/'));
});

問題は、ターゲットを構築するために現在のストリームパラメーターにアクセスする方法が正確にわからないことです。このようgulp-renameに実行するgulpfile.jsと、パスの最初の親要素が前に取得される*か**、再び in というファイルが作成されるためproducts.svgですbuild/images/。ベース名、相対パスなどにアクセスするために使用する例をいくつか見てきましたpathが、gulp ストリームのコンテキストでそれを使用する方法がわかりません。

4

1 に答える 1

1

現在行っている方法では、製品ごとに 1 つの結合 SVG ではなく、すべての SVG に対して1 つの結合 SVG を作成します。実際、次のような 2 つのファイルがあるとします。

productA/color-sprites/sprite1.png
productB/color-sprites/sprite1.png

gulp-svgstoreはファイル名が一意であると想定しているため、すべてが失敗します。

必要なのは、製品ごとに 1 つの gulp ストリームを用意し、それぞれが 1 つの結合された SVG を生成することです。

つまり、productsフォルダー内のすべてのディレクトリを反復処理し、ディレクトリごとに 1 つのストリームを初期化し、それらをマージして、タスクから 1 つのストリームを返すことができるようにする必要があります。

productsフォルダ内のすべてのディレクトリを取得する最も簡単な方法は、 を使用することglobであり、ストリームのマージはmerge-stream.

var glob = require('glob');
var merge = require('merge-stream');
var path = require('path');

gulp.task('svg-color-sprites', function () {
  return merge(glob.sync('app/images/products/*').map(function(productDir) {
    var product = path.basename(productDir);
    return gulp.src(productDir + '/color-sprites/*.+(svg)')
      .pipe(svgMin())
      .pipe(svgStore())
      .pipe(gulp.dest('build/images/products/' + product));
  }));
});

gulp-svgstore結果の結合された SVGは、ベース フォルダーの後に自動的に名前が付けられるため、まったく使用する必要さえありませんgulp-rename。結合された SVG ファイルには、自動的に という名前が付けられcolor-sprites.svgます。

于 2016-09-24T07:24:38.600 に答える