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

}