Как манипулировать относительным путем вывода файла винила внутри конвейера gulp? - PullRequest
Новая
       37

Как манипулировать относительным путем вывода файла винила внутри конвейера gulp?

0 голосов
/ 04 апреля 2019

В следующем задании gulp, targetFile.relative (свойство Vinyl instance) будет конкатенация к dest пути. Например, если targetFile.relative равно images/icons/HamburgerMenu__Icon.svg, выходной путь будет <Project absolute path>/dest/images/icons/HamburgerMenu__Icon.svg

gulp.src('source/singletonComponents/**/*.+(png|jpg|gif|svg)')
    .pipe(gulp.dest( targetVinylFile => {          
      return 'dest'
    }));

Что если мы хотим изменить targetFile.relative? Например, мы хотим вывести на dest/pictures/icons/HamburgerMenu__Icon.svg, но не хотим переименовывать исходный фордер для images в pictures.

Поскольку в этом вопросе мы рассматриваем манипулирование выходным путем, пожалуйста, не касайтесь исходных файлов / каталогов, а также 'source/singletonComponents/**/*.+(png|jpg|gif|svg)' в решениях.

А также: если вы считаете, что это невозможно, пожалуйста, ответьте, например.

1 Ответ

1 голос
/ 09 апреля 2019

Используя конкретный пример, который вы дали, вы можете легко получить желаемый эффект: 

gulp.src('source/singletonComponents/images/icons/**/*.+(png|jpg|gif|svg)')
    .pipe(gulp.dest('dest/pictures/icons'));

Шаблон выше меняет то, что хранится в поле relative файлов. Теперь все они относятся к source/singletonComponents/images/icons/, что позволяет вам в gulp.dest изменить путь, чтобы получить желаемый результат.

Если ваша реальная ситуация более сложна, вы можете сами управлять путями через pipe: 

const gulp = require("gulp");
const map = require("map-stream");
const path = require("path");

gulp.task("default", () =>
          gulp.src('source/singletonComponents/**/*.+(png|jpg|gif|svg)')
          .pipe(map((file, cb) => {
            file.path = path.join(file.base, file.relative.replace(/images/, "pictures"));
            cb(null, file);
          }))
          .pipe(gulp.dest('dest')));

Обратите внимание, что Gulp 4 не позволяет изменять file.relative напрямую. Вы получите ошибку, если попытаетесь это сделать. Это потому, что оно получено из file.base и file.path. Поэтому вы должны изменить один из них или оба, если вы хотите изменить file.relative. Помните, что file.path - это абсолютный путь к файлу. Вот почему мы объединяем file.base с измененным значением file.relative.

...