Gulp：如何设置相对于处理文件的dest文件夹（使用通配符时）？ [英] Gulp: How to set dest folder relative to processed file (when using wildcards)?

问题描述

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

  assets / article1 / 
 assets / article2 / 
  

我正在尝试编写一个gulp任务来查找其中的所有 .jpg 图片并生成缩略图版本，以保存在拇指中/ b
$ assets / article1 /＃原始jpg图片$ / b $ / code>子文件夹在每个文件所在的文件夹中：

b $ b assets / article1 / thumbs /＃缩略图版本以上..
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 /';}））; 
}）; 
  

但是，这会创建一个 thumbs \ 文件夹中的 assets \

$ b

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

有没有关于路径和通配符的很好的信息？很明显，我没有很好地处理它。

解决方案

您可以使用 path.dirname 为此： http://nodejs.org/api/path.html#path_path_dirname_p

  //需要核心模块
 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'）;}））; 
}）; 
  

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

assets/article1/
assets/article2/

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

However, this creates a single thumbs\ folder at the root of 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..

解决方案

You could use path.dirname for that: 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：如何设置相对于处理文件的dest文件夹（使用通配符时）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！