javascript - 使用 Gulp 将 NPM 模块/库复制到分发文件夹

Question

现在大多数网络应用程序都包含各种预构建的库，例如 Backbone .js。

当我使用 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

我认为 Gulp 要么需要:

• 编译并缩小库/模块并将其写入名为 backbone-min.js 的文件到 scripts 文件夹，或
• 将 Backbone 模块文件夹中的backbone-min.js复制到scripts文件夹中。

这样做的最佳方法是什么？

Answer 1

简答题

gulp-useref连接由 <!--build:js /lib.js--> 封装的主 .html 文件中的所有文件引用对于 javascript 文件和 <!--build:css /lib.css-->其次是 <!--endbuild-->

结果将是:

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

正如您和每个优秀的开发人员所希望的那样。

长答案

我的建议是使用 Bower作为您的应用程序依赖项管理器和 npm作为您的开发依赖项经理。

使用gulp-wiredep在安装/卸载它们时自动注入(inject)依赖项，这样您就不必在 index.html 中维护库 css 和 js 文件。

用户集 gulp-inject在添加/删除它们时自动注入(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。我从来没有对不存在的文件的引用。我从来没有没有引用的文件。