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

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

我现在看到,大多数前端项目使用上面的工具,虽然我在我最近的项目中使用它们我正在使用gulp使用脚本来构建HTML,CSS和JavaScript

$ gulp build

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

从本质上讲,随着细节的大量挥手,Gulp和Grunt都是自动化相互依赖任务系统的系统,通常用于定义项目的"构建",就像现代对make工具一样.通常,项目使用其中一个或另一个,但不能同时使用两个(对于相同的部分,无论如何).

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

来自他们网站的Gulp one-liner:

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

来自他们的Grunt单线:

JavaScript任务运行器

和鲍尔:

Web的包管理器

为什么以及何时使用它们？

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

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

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

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

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

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

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

继续担任TJ Crowder的职务,Bower非常类似于NPM,或Composer或Gem.NPM和Bower之间的最大区别在于,bower用于前端包,而NPM用于后端包.NPM现在可以使用前端包和后端包.
此外,您需要NPM来安装Bower.

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

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

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

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

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

Gulp一般来说速度更快.

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