各种前端build工具你真的懂吗?

前端与开发的区别吗
前端和开发区别吗
前端设计和前端开发有区别吗

以下整理仅用于个人学习

说起工具,你们估计跟我一样会想到一堆,例如:node、NPM、Grunt、Gulp、Bower、Webpack、Browserify、Yeoman、Brunch…但有些也只说说出个名字而已,具体干嘛的,不晓得。工具很多,你要是像一个个都学会,那还真费点时间,最好是用到什么学什么,自己用的顺手就好。

要想弄明白这些工具是什么,首先要明白以下几点:
第一、build工具的两大核心功能,就是“安装&做事”
工具是用来用的,但是用来干嘛,各种工具有各种工具的用途,而开发工具从本质上来说做的事情就两个:帮你安装东西和帮你做事。
首先说说安装类工具,例如npm、Bower和Yeoman几乎什么东西都能装,它们可以用来安装前端库像angular.js或是React.js;它们可以为你的开发环境安装服务器;它们可以安装测试库;它们甚至还可以帮你安装其他的前端开发工具。简而言之,就是任何你能想到的与代码有关的东西,它们都能安装。
而做事类工具的目标则是,在web开发中帮你完成自动化。例如:Grunt、Webpack和Gulp等。而每一些工具做的事情也不尽相同,一些工具,擅长处理那些你所指定的任务,例如Grunt和Gulp等工具;还有一些工具,只专注于做一件事情,例如处理Javascript的以来,例如Browserify和Require.js等工具。

对常用工具小小分个类:
安装类工具:Npm、Bower、Yeoman等
做事类工具:node、Grunt、gulp、Webpack等

第二、build工具的“祖宗”是node和Npm
node和Npm负责安装和运行所有这些工具,因此你的所有项目中都会有它们的身影。它们一个负责安装,一个负责帮你做事情。
npm可以安装angular.js和React.js等库,它还可以安装服务器,让你的应用在开发阶段可以在本地运行。它还可以安装很多其他工具,帮你完成很多事情,例如简化代码。
node,则是帮你完成事情的,例如运行JavaScript文件,以及服务器等。
如果你刚刚开始学习,那么Node和npm都是必学的东西。随着你的项目不断丰富,你将会逐渐知道这两个工具的极限能力。当它们无法满足你的需要的时候,就是你需要开始安装其他工具的时候了。

第三、build其实就是production-ready版本的应用
我们开发时习惯把JavaScript和css拆分成独立的文件。
独立文件的好处,是让你可以专注于编写针对性较强的代码,让每一部分代码只针对一个问题,以免日后代码多到让你自己都难以管理。但是当你的应用准备好被推向市场的时候,项目内存在多个JavaScript或是css文件并不是一个好主意。当用户访问你的网站的时候,每一个文件都需要独立的HTTP请求,这会让站点加载速度下降。

解决方法就是,给项目创建“build”,它要将所有css文件合并成一个文件,然后再合并JavaScript文件。这样一来,你就可以将文件完成最小化。要想创建这个build,你需要使用build工具。

第四、“安装”和“做事”之间的界限有时会模糊
没有工具只能做一件事情,而无法做另一件事情。所有工具都是“安装”和“做事”的结合体。但是一般来说,一个工具会有自己的强项,或是强于安装,或是强于做事。

有的时候,一个安装类工具也能运行文件。npm就是这样,它也能运行命令和脚本,不仅仅是安装文件。

第五、“最正确工具组合”这么个东西不存在
使用哪些工具,完全是你自己说了算的事情。随意组合,自己用的顺手就好。

第六、build工具学习成本较高,因此你只需要学习你用的上的工具
学习任何一种新东西,最好的方式就是进行实践。例如,不要为了学习Grunt而去学习,你可以在你的项目中去尝试运用。

第七、所有build工具目标都一样:通过对大量低技术含量任务完成自动化,让你的工作变得更轻。
使用build工具最大的好处之一,就是在保存了一个文件之后,你就能创建一个新的build,并且将其发送到你的浏览器中。它能够显著的提升前端开发流程的速度。
那么我们应该在配置和调试build工具的时候,应该付出多少精力?很简单,如果你对当前工具的效果感到满意,那就可以停止配置了。

web前端开发和c\/s的区别
c语言和前端开发区别
前端开发和后台开发的区别
» 本文来自:前端开发者 » 《各种前端build工具你真的懂吗?》
» 本文链接地址:https://www.rokub.com/7016.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!