問題描述

在我的 assets/ 文件夾下，我有許多子文件夾，每個子文件夾都包含任意數量的圖像，如下所示:

Under my assets/ folder, I have numerous subfolders, each containing an arbitrary number of images, like so:

assets/article1/
assets/article2/

我正在嘗試編寫一個 gulp 任務來定位其中的所有 .jpg 圖像并生成它們的縮略圖版本，以保存在文件夾內的 thumbs/ 子文件夾中每個文件所在的位置:

I'm trying to write a gulp task to locate all .jpg images within and generate their thumbnail versions, to be saved in a thumbs/ subfolder within the folder where each file resides:

assets/article1/               # original jpg images
assets/article1/thumbs/        # thumbnail versions of above..
assets/article2/
assets/article2/thumbs/

我一直在嘗試各種方法，但沒有運氣.我最接近的是:

I've been trying various approaches but no luck. The closest I've come is:

gulp.task('thumbs', function () {
    return gulp.src( './assets/**/*.jpg' )
        .pipe( imageResize( { width: 200 } ) )
        .pipe( gulp.dest( function( file ) { return file.base + '/thumbs/'; } ) );
});

但是，這會在 assets

assets/article1/
assets/article2/
assets/thumbs/article1/
assets/thumbs/article2/

在任何地方都有關于路徑和通配符的好信息嗎?顯然我處理得不好..

Is there a good info on the paths and wildcards anywhere? Clearly I'm not handling it well..

推薦答案

你可以使用 path.dirname:http://nodejs.org/api/path.html#path_path_dirname_p

// require core module
var path = require('path');

gulp.task('thumbs', function () {
    return gulp.src( './assets/**/*.jpg' )
        .pipe( imageResize( { width: 200 } ) )
        .pipe( gulp.dest( function( file ) { return path.join(path.dirname(file.path), 'thumbs'); } ) );
});

這篇關于Gulp:如何設置相對于已處理文件的目標文件夾(使用通配符時)?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！