npm -管理分发的供应商

Question

我最近在玩Gulp.js & npm，它很棒。然而，我并不真正理解npm作为包管理器的想法，因为包管理器将被推送到dist。

让我们来看一个例子。

我想下载最新的jquery，bootstrap和font- and，这样我就可以将它们包含到我的项目中。我可以简单地从他们的网站上下载它们，并获得要包含的文件。另一种选择似乎是分组管理器，即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

不需要显式地为每个供应商库指定源目录和目标目录。

记住，gulp就是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数组并再次运行任务即可。