使用Gulp將NPM模塊/庫複製到分發文件夾

這些天的大多數web應用程序都包括各種預先構建的庫，例如， Backbone.js的。使用Gulp將NPM模塊/庫複製到分發文件夾

我希望在使用Gulp編譯我的Web應用程序時，輸出使用NPM安裝的庫/模塊的單個壓縮JavaScript文件，例如backbone-min.js。

例如，當您從NPM安裝Backbone.js的安裝到node_modules文件夾下面的：

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

我希望能夠運行gulp compile，在我的web應用程序分發文件夾得到以下結果：

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

我看到它咕嘟咕嘟任何方式需要兩種：

編譯，然後再縮小庫/模塊，並將其寫入一個文件名爲backbone-min.js到scripts文件夾，或
在骨幹模塊文件夾複製backbone-min.js到scripts文件夾。

這樣做的最好方法是什麼？

來源

2016-08-03 McShaman

我認爲第二種選擇更好。爲什麼你要編譯，如果你已經有-min.js文件。 – Thakur

但是如何讓Gulp在一個模塊中複製文件 – McShaman

[Gulp將文件從一個目錄複製到另一個目錄]可能的副本（http://stackoverflow.com/questions/24355907/gulp-copying-files-from-one-目錄到另一個） –

簡答

gulp-useref會連接所有的文件引用由的JavaScript文件和封裝你的主要的.html文件之後

結果將是：

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，inject和useref，您再也不需要觸摸您的依賴關係。

這是我的索引標題和正文的到底是什麼模樣：使用的工具，我剛纔提到，爲了讓他們知道在哪裏將感興趣的依賴

<!---------------------------- 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。我從來沒有對不存在的文件的引用。我從來沒有一個沒有參考文件。

來源

2016-08-03 13:57:42

使用Gulp將NPM模塊/庫複製到分發文件夾

回答

相關問題