npm - 販売のためのベンダーの管理

Question

私は最近、Gulp.js & npmで遊んでいます。しかし、私はdistのためにプッシュされるパッケージのパッケージマネージャーとしてnpmの考えを実際には得ていません。

例を見てみましょう。

最新のjquery、bootstrap、font-awesomeをダウンロードしたいので、私はそれらをプロジェクトに含めることができます。私は単に彼らのウェブサイトからそれらをダウンロードし、含まれるファイルを得ることができます。もう1つの選択肢は、パケットマネージャ、すなわちNPMであると思われる。

しかし、私のnode_modulesディレクトリはgulpのような他のパッケージのために巨大で、ネストされていません。どのような別のディレクトリに選択したパッケージを移動するための最も簡単な方法だろう - たとえばsrc/vendors/

ため、私は一口タスクによって単に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アレイに追加して、タスクを再度実行することができます。