Grunt,Gulp.js和Bower有什么区别?为什么&何时使用它们?

时间:2015-12-15 11:03:48

标签: javascript html gruntjs gulp bower

Grunt,Gulp.js和Bower有什么区别?为什么&何时以及如何使用它们?

我现在看到,大多数前端项目使用上面的工具,虽然我在我最近的项目中使用它们,我正在使用gulp来使用像

这样的脚本来构建HTML,CSS和JavaScript
$ gulp build

但对所有这些前端框架没有多少了解,请帮助我全面了解Grunt,Gulp.js和Bower。

4 个答案:

答案 0 :(得分:45)

从本质上讲,随着细节的大量挥手,GulpGrunt都是自动化相互依赖任务系列的系统,通常用于定义"构建& #34;您的项目,如make工具的现代版本。通常情况下,项目使用其中一个或另一个,但不能同时使用两者(对于相同的部分,无论如何)。

Bower不同,经常与Gulp或Grunt一起使用:它是客户端库的包管理器,可以很容易地保持这些库是最新的,指定它们及其依赖关系标准化的方式,等等。

他们网站上的Gulp one-liner:

  

自动化和增强您的工作流程

他们的Grunt单行:

  

JavaScript任务管理器

和鲍尔:

  

网络包管理器

  

为什么&何时使用它们?

我认为以上内容涵盖了Gulp和Grunt的内容:如果您有自动化的任务(例如构建具有缩小,连接,压缩等的网站的发布版本;或者观察文件以进行更改和重新运行当他们改变以支持快速开发时,你可以使用Gulp和Grunt。

但它不仅仅是构建。您可以将Gulp和Grunt用于自动化所需的任何系列任务。

Bower对于管理项目中的客户端库非常有用。您可以使用Bower安装最新版本的Bootstrap,它会将相关文件放在项目的标准位置。如果出现更新的Bootstrap,Bower可以更新这些文件。如果库依赖于其他库(例如,Bootstrap的JS依赖于jQuery),Bower帮助管理该树。 Grunt(我假设为Gulp)有一些有用的任务,甚至可以自动将脚本和链接标签添加到这些库的HTML中,方法是在源HTML中添加一个占位符,基本上说是#34;将Bower库放在这里"

答案 1 :(得分:14)

gulpGrunt是任务运行者。它们是针对同一问题的不同方法。 Grunt使用基于配置的方法,而gulp使用来自node的流来实现结果。您可以使用它们来定义执行的任务和任务(复制文件,添加横幅,替换文本,样式检查等等)。它们(通常)从命令行手动运行。

例如,如果复制和修改文件Grunt将创建中间文件,gulp将利用node的流并动态转换。

何时使用Gruntgulp是不太具体的答案,因为它考虑了个人偏好,技术支持(某些任务的插件),项目细节和配置的简易性。两者都相对容易启动和运行,但通常你最终会选择一个具有更好的插件用于你的项目的技术堆栈(尽管两者都有很好的插件支持)。

Bower是包管理员。它用于安装javascript(主要是客户端)软件包(但npm - 也是数据包管理器 - 也包含几乎所有这些模块/软件包。您可以使用它来自动化依赖项管理和软件包安装。

答案 2 :(得分:9)

继续担任T.J. Crowder,Bower非常类似于NPM,或Composer或Gem。 NPM和Bower之间的最大区别在于,bower用于前端包,而NPM用于后端包。 NPM现在提供前端包和后端包 此外,您需要NPM来安装Bower。

Grunt是第一批可用的前端任务自动化程序。它提供了比当时可用的更好的体验。它仍然有很大的追随者和活跃的社区。

Gulp在某种程度上来自咕噜声,并通过使用流而不是文件来改进它。

Grunt将更改写入文件,并加载到该文件中以操作更多文件。 Gulp读取文件,并对数据流执行所有转换,并且只在完成所有操作后才写入。 这意味着它比grunt更加异步和快速。而且我相信Gulp应该被用于支持咕噜声的新项目 可能有很好的用例,其中grunt preforms比gulp更好,但通常gulp更快。

答案 3 :(得分:6)

我刚刚完成了对Gulp vs Grunt(我们之前的标准)的分析,虽然我认为对于前端开发人员来说,知道两者都很重要并且两者都是很好的解决方案我因为以下原因而向Gulp学习未来的项目:

  1. Gulp通常更简洁(插件只做一件事,流程接近)并且可读。我在Gulp中重新编写的一个Grunt脚本导致只有四分之一的代码行产生相同的结果。

  2. Gulp一般来说速度更快。

  3. 虽然Gulp拥有更少的插件和更薄的文档密钥插件,用于缩小,连接,列表,LESS转换等目前可用并且运行良好。