使用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模块/库复制到分发文件夹

回答

相关问题