前端构建工具grunt

grunt是什么

grunt是目前非常流行的前端构建工具，支持自定义插件，有丰富的插件帮助我们完成构建任务

自动化完成我们指定的任务，例如压缩、编译、单元测试、linting等

前端为什么需要构建工具

先看下前端的开发场景

小项目中，css文件和js文件并不多，前端部分是很轻的，几乎不需要我们特别的关注

而在一个大项目中，css文件和js文件的数量会达到几十个上百个，一个页面中会引用很多css和js文件，js的开发方式也已经模块化，不再像之前那样 经常把很多函数写在一个文件中，css的开发开始使用SASS或LESS来提高开发效率

这时问题就产生了，页面中引用过多的css和js，会增加网络请求时间，使网页加载变慢，为了解决这个问题，就需要把多个文件合并，来减少网络请求的数量，也需要把文件压缩，来提高网络传输速度

开发js的人多了，互相的协作调用也就多了，js文件的数量同样会变多，这就需要单元测试来保证质量，也需要做好代码的语法检查

由于js的开发越来越复杂，那么我们就需要生成文档，来描述各个模块和方法

这时我们就会发现，开发之外的工作繁琐了很多，不仅需要写好代码，还需要做好 合并压缩、单元测试 等一系列的工作，我们就会渴望有一个便利的构建工具来完成这些工作

grunt能做什么

我们在grunt中定义好各个任务，让grunt来自动完成这些任务

例如：

（1）合并压缩，把多个js或css文件合并、压缩

（2）对js进行语法检查

（3）js单元测试

（4）执行编译

现在很多项目使用了SASS、LESS进行css开发，那么我们就可以定义一个任务，把SASS、LESS自动编译成正常的css文件

（5）生成项目文档

这几个例子只是grunt功能的一部分，它还可以做很多事情

现在我们就对grunt有了一个大概的了解：

grunt其实就是帮助我们简化项目的发布流程，只要定义好任务，然后执行一下grunt命令，就可以一键完成代码的编译、语法检查、单元测试、合并压缩、生成文档、打包、发布等一系列的工作