1

gulp-imageminフォルダー内の画像を縮小するために使用していimagesます。dist/imagesタスクの出力は、ディレクトリにストリーミングする必要があります。ただし、ソースフォルダには、圧縮されたコンテンツを にストリーミングする必要がimagesあるサブフォルダがあります。したがって、これはソース フォルダー構造です。images/headersdist/images/headers

-images
  -headers

コンテンツのストリーミング先:

-dist
  -images (contents of `images`)
    -headers (contents of `images/headers`)

現在、私のタスク定義は次のようになっています。

gulp.task('compress', function () {
    return gulp.src('images/*')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        }))
        .pipe(gulp.dest('dist/images'));
});

私の質問は、別のタスクを作成せずに、Gulp にストリーミングするように指示する方法ですimages/headers。dist/images/headers

ソースの配列を渡すことができることは知っていますが、各ソースが異なる宛先を持つように、各宛先の処理済みコンテンツをどこに出力するかを Gulp に指示できますか?

4

1 に答える 1

1

再帰グロブを使用する必要があります。これで、images フォルダー内の変更を直接監視するだけになりました。gulp.src('images/*')を使用する代わりに、gulp.src('images/ ')** を使用する必要があります。

新しいタスクは次のようになります。

gulp.task('compress', function () {
    return gulp.src('images/**')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        }))
        .pipe(gulp.dest('dist/images'));
});

これにより、 imagesフォルダーとその下にあるすべてのイメージがdist/imagesフォルダーに処理されます。

于 2015-11-30T09:54:00.493 に答える