Gulpを使用してNPMモジュール/ライブラリを配布フォルダにコピー

Question

最近のほとんどのWebアプリケーションには、さまざまな事前構築されたライブラリが含まれています。 Backbone.js。

WebアプリケーションをGulpでコンパイルして、NPMを使用してインストールしたライブラリ/モジュールの圧縮された単一のJavaScriptファイルを出力したいとします。 backbone-min.js。

たとえば、あなたがNPMからBACKBONE.JSをインストールする場合は、次のnode_modulesのフォルダにインストールされています：私は私のWebアプリケーションの配布フォルダにgulp compileを実行すると、以下の結果を得ることができるようにしたい

. 
├── backbone 
│   ├── LICENSE 
│   ├── README.md 
│   ├── backbone-min.js 
│   ├── backbone-min.map 
│   ├── backbone.js 
│   └── package.json 

：私はそれがいずれかの一口を参照

. 
├── index.html 
├── scripts 
│   ├── backbone-min.js // this is the file I want to copy or generate 
│   ├── main.min.js 

の方法のいずれかを行う必要があります。

フォルダへ
• コンパイルおよびライブラリ/モジュールを縮小化してファイルに書き込むscriptsフォルダにbackbone-min.jsと呼ばれる、または
• コピーバックボーンモジュールフォルダにbackbone-min.js。

これを行う最善の方法は何ですか？ <!--endbuild-->

続くメインの.html JavaScriptファイル用<!--build:js /lib.js-->によってカプセル化されたファイルや<!--build:css /lib.css-->内のすべてのファイル参照

Answer 1

短い答え

gulp-useref連結し、結果は以下のようになります。

index.html 
├── scripts 
│ ├── backbone-min.js // this is the file I want to copy or generate 
│ ├── main.min.js 

あなたとすべての優れた開発者がさあ。

ロング回答

私の推薦は、開発の依存関係マネージャーとしてあなたのアプリケーションの依存関係マネージャーとしてBowerとnpmを使用することです。

gulp-wiredepを使用すると、インストール/アンインストール時に依存関係が自動的に挿入され、index.htmlにライブラリのcssファイルとjsファイルを保持する必要がなくなります。

Uset gulp-injectは、自分のcssファイルとjsファイルを追加/削除する際に自動的に挿入します。これにより決してはアプリケーションの依存関係を手動で維持する必要がありません。

wiredepを使用すると、依存関係をもう一度触れる必要はありません。コメントは、私はちょうど彼らが関心の依存関係を挿入するために知っておくためには言及ツールで使用されるタグです

<!---------------------------- Bower Managed Styles -----------------------------> 

<!--build:css css/lib.css--> 
<!--bower:css--> 

<link rel="stylesheet" href="../bower_components/..." 

<!--endbower --> 
<!--endbuild --> 

<!---------------------------- Application Styles -------------------------------> 

<!--build:css css/app.css--> 
<!--inject:css--> 

<link rel="stylesheet" href="content/css/bootstrap ..." 

<!--endinject--> 
<!--endbuild--> 


<!--------------------------- Bower Managed Javascript -------------------------> 

    <!--build:js js/lib.js--> 
    <!--bower:js --> 

    <script src="../bower_components/ ..."> </script> 

    <!--endbower --> 
    <!--endbuild --> 

    <!-------------------------- Application Javascript ---------------------------> 

    <!--build:js js/app.js--> 
    <!--inject:js--> 

    <script src="app/ ..."> </script> 

    <!--endinject--> 
    <!--inject:templates:js--> 
    <!--endinject--> 
    <!--endbuild--> 

：

これは私のインデックスヘッダと本文の末尾がどのように見えるかです。

私のアプリケーション入力は、単一のテンプレート参照です。言うまでもなく私はindex.htmlを訪れることはありません。私は決して存在しないファイルへの参照を持っていません。私は参照を持っていないファイルを持っていません。