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

Question

在我的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/

是否有关于路径和通配符的好信息？ 显然我处理得不好..

Answer 1

您可以path.dirname使用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));
   });
});

Answer 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();

}