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和通配符的很好的信息? 显然我没有处理好..

       

网上收集的解决方案 "Gulp:如何设置相对于处理文件的dest文件夹(使用通配符时)?"

你可以使用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'); } ) ); }); 

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

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