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

Question

如今，大多数 Web 应用程序都包含各种预构建的库，例如骨干网.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-min.js复制到scripts文件夹中。

最好的方法是什么？

Answer 1

简答

gulp-useref 连接主 .html 文件中的所有文件引用，该文件由 <!--build:js /lib.js--> 封装用于 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 在您安装/卸载它们时自动注入依赖项，这样您就不必在 index.html 中维护库 css 和 js 文件。

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

cmets 是我刚才提到的工具使用的标签，以便它们知道在哪里插入感兴趣的依赖项。

我的应用程序条目是单个模板引用。不用说我从不访问 index.html。我从来没有引用不存在的文件。我从来没有没有没有参考的文件。