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

时间:2017-02-27 17:39:23

标签: npm gulp package vendors

我在玩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'
    }
}

是否有更快和/或更好的选择?

1 个答案:

答案 0 :(得分:3)

无需为每个供应商库明确指定源和目标目录。

请记住,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阵列并再次运行该任务即可。