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

前言

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

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

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

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

正文

• grunt篇

• gulp篇

• webpack篇

内容待更新………………