jquery - 如何部署 Bower 安装的包?

标签 jquery angularjs twitter-bootstrap gulp bower

我已经使用 Bower 安装了一些软件包,但我不知道如何部署它们。

例如,我的第一个想法是创建一个 Gulp 任务来连接它们 - 我用我的 Angular 包做到了这一点:

gulp.task('libs', function () {
    'use strict';
    return gulp
        .src([
            './public/assets/libs/angular/angular.min.js',
            './public/assets/libs/angular-animate/angular-animate.min.js',
            './public/assets/libs/angular-routes/angular-route.min.js'
        ])
        .pipe(concat('libs.js'))
        .pipe(uglify())
        .pipe(gulp.dest('public/dist'));
});

然而,虽然上面的这些包非常简单,但其他一些包(准确地说是 Bootstrap 和 jQuery)附带了我不需要的源。我应该将 bootstrap.min.cssjquery.min.js 复制到我的 dist 文件夹吗?

坦白说,我可以包含来自 CDN 的所有这些文件,我还不明白为什么要使用 Bower(我一直在关注使用 Bower 的教程)。

感谢您的帮助!

最佳答案

首先,我认为这是使用 Bower 的原因。

在“过去”,在应用程序中包含特定 JavaScript 库(比如说 jQuery)的方法是访问 jQuery 网站,单击下载链接,然后移动下载的 .zip 文件复制到您的项目目录中并解压缩。然后,您将添加一个包含该库的 script 标记。

包含 JavaScript 库的“现代”方法(仍然使用 jQuery 作为示例)是简单地运行 bower install jquery --save,这将 a) 将 jQuery 添加到您的 Bower.json 文件列出了应用程序的所有依赖项,b) 获取 jQuery 文件并将它们放在适当的位置。如果您正在使用称为注入(inject)的东西(您可能已经遇到过,也可能没有遇到过),您甚至不必担心 script 标记,因为这是由您的构建系统处理的。

(顺便说一句,我认为 Bower 受到了其他语言的包管理工具(例如 RubyGems for Ruby)的启发,据我所知,该工具早在 JavaScript 世界中的类似工具之前就已经存在了好几年。您可能会感兴趣看一下也可以使用类似的工具。)

其次,我会回答您有关部署的问题。

这取决于您的部署位置。我个人在所有生产环境中都使用 Heroku。我不会将 JavaScript 供应商库 checkin Git,因为将构建工件保留在版本控制中并不是一个好主意。相反,我只需检查 Heroku 能够检测到的 bower.json。 Heroku 在生产环境中运行 bower install 来提取所有适当的库文件。这就是我的部署的工作原理,尽管这不是唯一的方法。

如果您想知道如何部署到特定平台,最好编辑此问题或创建一个单独的问题,其中包含有关您的部署环境的更多详细信息。

关于jquery - 如何部署 Bower 安装的包?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31090342/

相关文章:

javascript - 将图像从远程服务器保存到磁盘

javascript - AngularJS 与 jQuery 用于选择父元素

html - 在 Bootstrap 4 中向右浮动导航项?

jQuery fadeOut、replaceWith、animate 几乎可以工作

javascript - 修改 Jquery 以在不同位置展开每张照片

javascript - 如何更改 <span> 类名?

javascript - JQuery 检查多个 Selects 值

javascript - 如何从 html javascript/angularjs 中删除特定元素

twitter-bootstrap - Bootstrap - 具有输入最大宽度的输入组插件

javascript - Bootstrap.js 可以在 GAS (Google Apps Script) 中使用吗?