Gulp: Как установить папку dest относительно обработанного файла (при использовании подстановочных знаков)?

В моей папке 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/'; } ) );
});

Однако это создает одну папку thumbs\ в корне assets\

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

Есть ли хорошая информация о путях и подстановочных знаках где угодно? Ясно, что я плохо справляюсь с этим.

Ответ 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'); } ) );
});

Ответ 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));
   });
});