Gulp:如何设置相对于已处理文件的目标文件夹(使用通配符时)?-前端问题

Gulp: How to set dest folder relative to processed file (when using wildcards)?(Gulp:如何设置相对于已处理文件的目标文件夹(使用通配符时)?)

本文介绍了Gulp:如何设置相对于已处理文件的目标文件夹(使用通配符时)?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在我的 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:如何设置相对于已处理文件的目标文件夹(使用通配符时)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！