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

【问题标题】：Gulp: How to set dest folder relative to processed file (when using wildcards)?Gulp：如何设置相对于已处理文件的目标文件夹（使用通配符时）？
【发布时间】：2015-03-03 17:25:44
【问题描述】：

在我的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\ 的根目录下创建一个 thumbs\ 文件夹

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

在任何地方都有关于路径和通配符的好信息吗？显然我处理得不好..

【问题讨论】：

标签： javascript node.js gulp

【解决方案1】：

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

【讨论】：

谢谢。更接近，我想，但不完全在那里。制作人：assets/article1/thumbs/article1/ 将更多地挖掘“路径”..
这有点棘手，因为您使用 '*/.js' 进行递归 glob。也许看看这个官方食谱：github.com/gulpjs/gulp/blob/master/docs/recipes/…
我想我得到了他们正在做的事情 - 创建一个文件夹列表，然后分别在每个文件夹上运行一个任务。烧了半天，我只是最终更改了应用程序以查找资产根目录下的 thumbs 文件夹；）但我感谢您的帮助，很高兴下次知道！
更改 gulp.src return gulp.src( './assets/**/*.jpg' , {base : '.'}) 中的基本路径。这应该给你从'。'开始的路径而不是'./assets/'。

【解决方案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));
   });
});

【讨论】：

我觉得这不是处理它的好方法。你能详细说明你的解决方案吗？我的主要问题是 gulp.src() 为您提供了一个乙烯基流，而 gulp.task 中需要一个乙烯基流作为返回值。您正在做的是返回一系列乙烯基流。从 Gulp.js (3.9.x) 的当前稳定版本开始，我猜这可能会导致可怕的副作用。在这里看看这个问题：github.com/gulpjs/gulp/issues/95 - 解决方案：github.com/gulpjs/gulp/blob/master/docs/recipes/…

【解决方案3】：

我发现了另一种方法，可能对任何搜索此帖子的人有用。我最初的目标与您的要求非常相似，并且这种方法几乎可以根据任何特定需求进行调整。

function scss(cb) {
src('./*/scss/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(rename({extname: '.min.css'}))
    .pipe(tap(function(file) {
      //Enrich the file with crucial information about it's original path, you can save anything you may need. In my case filename is quite enough. It's important to move this block before any sourcemap write if you've any.
      file.name = path.basename(file.path);
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(flatten()) //Remove file relative paths.
    .pipe(dest(
      function( file ) {
        //Reconstruct final path using insight we saved before, and using a clean base path provided by flatten.
        return path.join(path.dirname(file.path), file.name.replace(/\.min\..+$/, ''), 'static');
      }));
cb();

}

【讨论】：