用构建工具搭建你 web 项目 grunt gulp webpack js

1,491 阅读3分钟

前言

  • 随着js在前端领域的大放异彩以及nodejs平台的兴起,js能做的事情越来越多,前后台逻辑、业务分离已是大势所趋!可能在此之前,前台的工作大致是这样的:写几个静态页面,数据是模拟的,然后写几个页面效果,然后就把这样设计好的页面给后台,后台再套上数据,于是网站的前台部分工作就算是完成了!可是这样是有问题的,因为后台在套数据的时候难免会根据需要改一些样式,这样就导致前后台来来回回频繁沟通,这样的工作流程影响开发效率是一回事,更重要的是时间长了,前后台工作牵连性太强了,导致彼此不能更好地把时间花在真正的逻辑处理上,而是花在业务对接上!频繁“沟通、对接”会影响工程师的开发体验,而且后期你会发现你的项目一团糟,难以维护,每天都是重复做一些重复的开发工作,比如打包、部署等!开发的时候,前台引入的js文件不合并的话,可能会在一个页面里面引用很多文件,增加了http请求,产生更多的tcp/ip和http时延,并且这些文件之间彼此依赖,当然了,项目比较小的时候,可能人工去管理每个js文件的依赖问题还比较轻松,但是如果很多的话,而且频繁的发布上线等操作的话,你整个人会崩溃掉的,当然了,如果你的公司工作没什么事情干,你喜欢做这种重复的工作也是无所谓的!有没有什么好的方法解决这些问题呢!当然有,一切的问题,你可以使用构建工具,让电脑帮你完成这些重复的事情!

  • 其实这些构建工具的原理很简单————就是你把要做的事情,用代码描述成一个一个的任务(task),然后用构建工具去跑一下程序,就可以实现把你要做的事情用机器去做了,还可以帮你管理各种文件的依赖!怎么样,够自动化吧?

  • 本文档建立在你对nodejs平台有一定了解的基础上进行叙述的!如果之前没有接触过这一块的话,可以到这里了解一下:nodenpm!同时基于现在三种流行的构建工具进行介绍,所以本文档分为三个部分:1、grunt;2、gulp;3、webpack。

  • 当然了,这篇文档我的本意是作为一种入门文档用的,能帮助大家了解一下构建项目的一些基本工作原理就好!至于更深层次的内容,你应该多跟相关社区的前辈学习、或者去官网去查看相关文档!这里附上三种构建工具的官网地址:grunt官网gulp官网webpack官网。最后欢迎大家对其中表达有误的地方进行 issue

正文

内容待更新………………


本文对你有帮助?欢迎扫码加入前端学习小组微信群: