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-min.js复制到scripts文件夹。

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

Answer 1

简答

gulp-useref将封装的主 .html 文件中的所有文件引用连接到javascript文件和后跟 < / p>

结果将是：

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

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

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

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

1 个答案: