Gulp.js - Использовать путь из Gulp.src() в Gulp.dest()

Попытка создать задачу gulp, которая будет передавать кучу файлов из разных папок через LESS, а затем выводить их в папку на основе исходного источника. Рассмотрим эту структуру папок:

Project
+-- /Module_A
|   +- /less
|   |  +- a.less
|   +- a.css
|
+-- /Module_B
    +- /less
    |  +- b.less
    +- b.css

Вот мой gulpfile:

var gulp = require('gulp');
var gutil = require('gulp-util');
var less = require('gulp-less');

gulp.task('compileLess', function () {
  gulp.src('./*/less/*.less')
    .pipe(less())
    .pipe(gulp.dest( ??? ));
});

gulp.task('default', ['compileLess']);

Я знаю, что gulp.dest() ожидает, что путь будет передан, но в моем примере путь будет отличаться в зависимости от исходного файла. Итак, как я могу получить путь от источника, изменить его, а затем передать его в gulp.dest()?

Или я об этом ошибаюсь?

Ответ 1

Вы должны посмотреть gulp-rename

В значительной степени:

gulp.src('./*/less/*.less')
  .pipe(less())
  .pipe(rename(function(path){
    // Do something / modify the path here         
  }))
  .pipe(gulp.dest('./finalRootDestination'))

Вы оставляете gulp.dest, указывая на конечный выходной каталог, но изменяете на ходу отдельные пути к файлу на основе любой логики, которая вам нужна внутри обратного вызова gulp -rename.

Ответ 2

в вашем src установите параметр base, и он сохранит исходный путь вашего меньшего файла.

gulp.task('compileLess', function () {
  gulp.src('./*/less/*.less', {base: './'})
    .pipe(less())
    .pipe(gulp.dest( './dist' ));
});

Пункт назначения ./dist может быть любым. Где бы вы ни разместили свою файловую структуру.

Дополнительная информация: https://github.com/wearefractal/glob-stream#options

Ответ 3

Просто в случае динамического src, и вы хотите соответствующее же назначение (как получено в src), тогда вы можете использовать следующие

Пример Предположим, у нас есть массив файла scss:

var gulp = require('gulp');
var sass = require('gulp-sass');

var scssArr = [
    'src/asdf/test2.scss',
    'src/qwerty/test1.scss'
];


function runSASS(cb) {
    scssArr.forEach(function(p){
        gulp.src(p, {base:'.'})
        .pipe(sass({outputStyle: 'compressed'}))//outputStyle is optional or simply sass()
        .pipe(gulp.dest('.')); //if othe folder including src path then use '/folder-name' instead of '.', so output path '/folder-name/{src-received-path}'
    })
    cb();
}

exports.runSASS = runSASS; // gulp runSASS

Выполнить команду gulp runSASS Это создаст следующие файлы:

src/asdf/test2.css

src/qwerty/test1.css

Удачного кодирования..