Gulp：如何设置相对于处理文件的dest文件夹（使用通配符时）？

在我的assets/文件夹下，我有许多子文件夹，每个都包含任意数量的图像，如下所示：

 assets/article1/ assets/article2/ 

我正在尝试编写一个gulp任务来查找所有的.jpg图像，并生成缩略图版本，并将其保存在每个文件所在文件夹内的thumbs/子文件夹中：

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

我一直在尝试各种方法，但没有运气。 我最近来的是：

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

但是，这会在assets\的根目录下创build一个thumbs\文件夹assets\

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

有没有关于path和通配符的很好的信息？ 显然我没有处理好..

Answer 1

你可以使用path.dirname ： http : path.dirname

 // 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'); } ) ); }); 

Answer 2

给我下面的目录结构，以下是我的工作原理（我简化了一下，专注于将文件放在正确的位置）

 assets/article1/1.jpg assets/article2/2.jpg 

以期望的结果

 assets/article1/1.jpg assets/article1/thumbs/1.jpg assets/article2/2.jpg assets/article2/thumbs/2.jpg 

这是什么为我工作（从这个配方修改https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-task-steps-per-folder.md ）

 var gulp = require('gulp'), rename = require('gulp-rename'), path = require('path'), fs = require('fs'); var scriptsPath = 'assets'; // folder to process function getFolders(dir) { return fs.readdirSync(dir) .filter(function(file) { return fs.statSync(path.join(dir, file)).isDirectory(); }); } gulp.task('thumbs', function() { var folders = getFolders(scriptsPath); return folders.map(function(folder) { return gulp.src(path.join(scriptsPath, folder, '/**/*.jpg')) .pipe(rename({dirname: folder + '/thumbs/'})) .pipe(gulp.dest(scriptsPath)); }); });