Конкатенация Gulp с настраиваемым порядком итераций

Я пытаюсь объединить несколько файлов js во вложенной структуре каталогов в один файл в другом месте. Они должны быть объединены в определенном порядке, и я не могу найти способ изменить порядок по умолчанию, в котором глобальный поиск gulp извлекает вложенные файлы. Я пробовал различные шаблоны глобусов безрезультатно.

Моя структура каталогов выглядит следующим образом:

components

 - componentA
  - controllers
   - controllerA1.js
   - controllerA2.js
  - services
   - serviceA1.js
  - configA.js
  - moduleA.js

  - componentB
   - controllers
    - controllerB1.js
    - controllerB2.js
   - services
    - serviceB1.js
   - configB.js
   - moduleB.js

Я хочу, чтобы файлы объединялись в один файл в следующем порядке:

configA.js
moduleA.js
controllerA1.js
controllerA2.js
serviceA1.js

configB.js 
moduleB.js
controllerB1.js
controllerB2.js
serviceB.js

Таким образом, gulp выполняет итерацию по каждому компоненту и выполняет итерацию, насколько это возможно, прежде чем перейти к следующему компоненту и сделать то же самое.

Вместо этого он объединяется в следующем порядке:

configA.js
moduleA.js
configB.js
moduleB.js
controllerA1.js
controllerA2.js
serviceA1.js
controllerB1.js
controllerB2.js
serviceB1.js

Другими словами, он переходит в каталог верхнего уровня, выполняет итерацию по каждому из файлов верхнего уровня в этом каталоге, а затем переходит к следующему каталогу верхнего уровня и делает то же самое, прежде чем вернуться в первый каталог верхнего уровня и выполнить итерацию по следующему уровню. вниз и т.д.

Я пробовал несколько разных методов, каждый из которых представлял проблемы.

Я попытался использовать плагин gulp-recursive-folder для настройки порядка итерации следующим образом:

gulp.task('generateTree', recursivefolder({
        base: './components',
        exclude: [    // exclude the debug modules from thus build 
            //'debug-modules'
        ] 
    }, function(folderFound){
    //This will loop over all folders inside pathToFolder main and recursively on the children folders, secondary 
    //With folderFound.name gets the folderName 
    //With folderFound.path gets all folder path found 
    //With folderFound.pathTarget gets the relative path beginning from options.pathFolder 
    return gulp.src(folderFound.path + "/**/*.js")
            .pipe($.concat("app.js"))
            .pipe(gulp.dest('./build/assets/js/'));
}));

Это повторяется в том порядке, в котором я хочу, но я считаю, что он записывает первый каталог верхнего уровня как один поток, а затем записывает второй каталог как другой поток, так что второй поток перезаписывает первый. Итак, у меня остались только следующие объединенные файлы:

configB.js
moduleB.js
controllerB1.js
controllerB2.js
serviceB.js

Поэтому я также попытался использовать плагин add-stream для рекурсивного добавления в тот же поток перед записью в файл. Я не буду никого утомлять деталями, но в основном я тоже не могу заставить это работать так, как хотелось бы. Может ли кто-нибудь порекомендовать пост/учебник/плагин? Спасибо.


gulp gulp-concat
person jonnjo2005    schedule 10.09.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

gulp.src() учитывает порядок передаваемых ему глобусов и выдает файлы в том же порядке. Это означает, что если вы явно передадите glob для каждого компонента в gulp.src(), он сначала выдаст файлы для первого компонента, затем для второго компонента и так далее:

gulp.task('default', function() {
  return gulp.src([
      'components/componentA/**/*.js',
      'components/componentB/**/*.js'
    ])
    .pipe($.concat('app.js'))
    .pipe(gulp.dest('./build/assets/js/'));
});

Очевидно, вы не хотите поддерживать этот массив вручную. Что вы хотите сделать, так это сгенерировать массив на основе компонентов, доступных в вашем проекте. Для этого вы можете использовать модуль glob:

var glob = require('glob');

gulp.task('default', function() {
  return gulp.src(glob.sync('components/*').map(c => c + '/**/*.js'))
    .pipe($.concat('app.js'))
    .pipe(gulp.dest('./build/assets/js/'));
});
person Sven Schoenung    schedule 10.09.2016