看完这篇让你对各种前端build工具不再懵逼!
本文原标题为:我终于弄懂了各种前端build工具
译者:@Christian
译文:https://www.sdk.cn/news/5412
原文:https://medium.freecodecamp.com/making-sense-of-front-end-build-tools-3a1b3a87043b#.khi6r16h2
现在对于原文做的一些笔记,要看更详情的,可点击这里
Node, NPM, Grunt, Gulp, Bower, Webpack, Browserify, Yeoman, Brunch……诸多的名词让你一时间感到手足无措,好像根本学不完。
其实关键就是,不要被它们唬住。要知道,所有这些工具,其最初的设计目的,都是要让你的工作变得更简单。
要想弄明白这些工具是什么、如何工作以及为何要使用它们,你其实只需要抓住少数几个核心概念。
概念1:build工具的两大核心功能,就是“安装vs做事”
从本质上说,开发工具做的事情就两个:
- 帮你安装东西
- 帮你做事
当你接触到一个新的开发工具的时候,你首先需要搞清楚一个东西:“这个工具的目的是帮我安装东西,还是帮我做事?”
安装类的工具,例如npm、Bower和Yeoman几乎什么东西都能装,它们可以用来安装前端库,例如Angular.js或是React.js。它们还可以为你的开发环境安装服务器。它们可以安装测试库。它们甚至可以帮你安装其他的前端开发工具。
帮你做事类的工具,例如Grunt、Webpack、Require.js、Brunchu和Gulp则更加复杂一点。这类工具的目标,是在web开发中帮你完成自动化。有的时候,这类工具所做的事情,被称为“任务(task)”。
在你理解了前端工具分为安装类工具和帮你做事的工具之后,你就可以轻松的对它们进行归类:
概念2:build工具的“祖宗”是Node和npm
Node和npm负责安装和运行所有这些工具,因此你的所有项目中都会有它们的身影。Node是做事工具,而npm则是安装工具。
npm可以安装Angular.js和React.js等库。它还可以安装服务器,让你的应用在开发阶段可以在本地运行。它还可以安装很多其他工具,帮你完成很多事情,例如简化代码。
而Node,则是帮你完成事情的,例如运行JavaScript文件,以及服务器等。
概念3:build其实就是production-ready版本的应用
给项目创建“build”,它要将所有CSS文件合并成一个文件,然后再合并JavaScript文件。这样一来,你就可以将文件完成最小化。要想创建这个build,你需要使用build工具。它的作用不过是节省用户几毫秒的时间。如果你只是在学习开发的阶段,或者你的站点流量较低,你没有必要花时间和精力去生成build。
概念4:“安装”和“做事”之间的界限有时会模糊
没有工具只能做一件事情,而无法做另一件事情。所有工具都是“安装”和“做事”的结合体。但是一般来说,一个工具会有自己的强项,或是强于安装,或是强于做事。
概念5:“最正确工具组合”这么个东西不存在
使用哪些工具,完全是你自己说了算的事情。
使用正确的工具,能够帮你将很多繁琐的事情实现自动化。但是使用工具的代价,就是你需要付出学习成本。
概念6:build工具学习成本较高,因此你只需要学习你用的上的工具
只学习那些你用的上的工具,其他的就先缓一缓吧。