Node.js模块与npm item3—各种前端build工具

各种前端build工具


Node, NPM, Grunt, Gulp, Bower, Webpack, Browserify, Yeoman, Brunch…… 前端目前有很多很多名词,看着这些感觉永远也学不完。 不要被这些名词吓唬住,这些工具出现的目的是让我们的工作更加简单。

快速掌握build工具秘诀


快速掌握这些工具,抓住几个核心概念:

帮助你安装
帮助你做事

当你接触到一个新的开发工具的时候,你首先需要搞清楚一个东西:“这个工具的目的是帮我安装东西,还是帮我做事?”

安装类的工具

npm、Bower和Yeoman几乎什么东西都能装,它们可以用来安装前端库,例如Angular.js或是React.js。它们还可以为你的开发环境安装服务器。它们可以安装测试库。它们甚至可以帮你安装其他的前端开发工具。

做事类的工具

Grunt、Webpack、Require.js、Brunchu和Gulp则更加复杂一点。这类工具的目标,是在web开发中帮你完成自动化。有的时候,这类工具所做的事情,被称为“任务(task)”

为了完成这些任务,这类工具经常需要自己的包和插件生态。每一个工具都会使用不同的方式来完成任务。这些工具所做的事情也不尽相同。一些工具,擅长处理那些你所指定的任务,例如Grunt和Gulp等工具。还有一些工具,只只专注于一件事情,例如处理JavaScript的依赖,例如Browserify和Require.js等工具。

build工具的“祖宗”是Node和npm


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工具。

“最正确工具组合”这么个东西不存在


使用哪些工具,完全是你自己说了算的事情。

你也可以选择什么工具都不用。但是要记住,随着项目的发展,复制、黏贴、整合、开启服务器等事情会让你慢慢手忙脚乱起来。

你也可以只使用Node和npm,其他工具一概不用。对于新手来说,这种方式很好,但是和上一条一样,慢慢你会开始感到力不从心。

或者,除了Node和npm之外,你也可以使用少数几个其他工具。那么,你的开发过程将会以Node和npm为核心,然后搭配Grunt和Bower,或是Webpack或是Gulp和Bower。

使用正确的工具,能够帮你将很多繁琐的事情实现自动化。但是使用工具的代价,就是你需要付出学习成本。

build工具学习成本较高,因此你只需要学习你用的上的工具


项目开发本身就已经很复杂了,你可能要使用新的语言或是框架。你可能需要应付复杂的业务逻辑。而引入新的工具,只会让你的学习成本变得更高。

对此,我的建议是,只学习那些你用的上的工具,其他的就先缓一缓吧。

学习任何一种新东西,最好的方式就是进行实践。例如,不要为了学习Grunt而去学习,你可以在你的项目中去尝试运用。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值