npm - управление поставщиками для распространения

Question

Я недавно играю с Gulp.js & npm, это здорово. Тем не менее, я не совсем понимаю идею npm как менеджера пакетов для пакетов, которые будут вытеснены за dist.

Пойдем с примером.

Я хочу загрузить последние версии jquery, bootstrap и font-awesome, чтобы включить их в свой проект. Я могу просто скачать их со своих сайтов и получить файлы для включения. Другой вариант - это менеджер пакетов, т. Е. NPM.

Тем не менее, мой каталог node_modules огромен из-за других пакетов, таких как gulp, и вообще не вложен. Какой самый простой способ перенести выбранные пакеты в другой каталог - например, src/vendors/

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

Мое текущее решение:

gulp.task('vendors', function() {

    var jquery = gulp.src(vendors.src.jquery)
       .pipe(gulp.dest(vendors.dist.jquery));

    var bootstrap = gulp.src(vendors.src.bootstrap)
       .pipe(gulp.dest(vendors.dist.bootstrap));

    return merge(jquery, bootstrap);
});

vendors = {
    src: {
        jquery: 'node_modules/jquery/dist/**/*',
        bootstrap: 'node_modules/bootstrap/dist/**/*'
    },
    dist: {
        jquery: 'src/resources/vendors/jquery',
        bootstrap: 'src/resources/vendors/bootstrap'
    }
}

Есть ли возможность сделать это быстрее и / или лучше?

Answer 1

Нет необходимости явно указывать исходный и целевой каталог для каждой библиотеки поставщика.

Помните, глоток это просто JavaScript. Это означает, что вы можете использовать циклы, массивы и все остальное, что может предложить JavaScript.

В вашем случае вы можете просто вести список имен папок поставщика, выполнять итерацию по этому списку и создавать поток для каждой папки. Тогда используйте merge-stream объединить потоки:

var gulp = require('gulp');
var merge = require('merge-stream');

var vendors = ['jquery/dist', 'bootstrap/dist'];

gulp.task('vendors', function() {
  return merge(vendors.map(function(vendor) {
    return gulp.src('node_modules/' + vendor + '/**/*')
      .pipe(gulp.dest('src/resources/vendors/' + vendor.replace(/\/.*/, '')));
  }));
});

Единственная сложность в вышеприведенном - правильно определить каталог назначения. Мы хотим все в node_modules/jquery/dist в конечном итоге src/resources/vendors/jquery и не в src/resources/vendors/jquery/dist, так что мы должны отбросить все после первого / используя регулярное выражение.

Теперь, когда вы устанавливаете новую библиотеку, вы можете просто добавить ее в vendors массив и запустить задачу снова.