npm

Question

最近在玩Gulp.js&npm，不错。但是，我并没有真正理解 npm 作为将被推送到 dist 的包的包管理器的想法。

让我们举个例子。

我想下载最新的 jquery、bootstrap 和 font-awesome 以便我可以将它们包含到我的项目中。我可以简单地从他们的网站下载它们并获取要包含的文件。另一种选择似乎是数据包管理器，即 NPM。

但是，由于 gulp 等其他软件包，我的 node_modules 目录非常庞大，而且根本没有嵌套。将所选包移动到另一个目录的最简单方法是什么 - 例如 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'
    }
}

是否有更快 and/or 更好的选择？

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 数组并再次运行任务。

npm - 管理供应商以进行分发

npm - managing vendors for distribution

package

vendors

gulp