Grunt构建工具能做哪些事？

Grunt到底有什么作用？一般用来干嘛？

很多前端的工作，包括Less编译、javascript压缩、Css压缩等零零碎碎的工作，

都可以让Grunt来做。

实际上在项目开发中，一般是前端代码 与 后端代码 完全分离，才会使用Grunt构建工具。

目前很多构建工具已经相当强大了，说说他的强大功能：

1、javascript文件压缩、合并，合并能减少很多HTTP请求，优化网站性能；

2、自动做CSS Sprite，小图标合并的繁琐工作，你完全可以解脱，你告诉他你的图标的图标位置，对应的图标合并、background-position，构建工具帮你搞定；（百度FIS构建工具有这个功能，Grunt应该也有对应的插件完成这样的功能。）

3、Sea.js CMD模块构建；

4、你是不是经常写-webkit-、-moz-？不用在麻烦了，构建工具帮你解决；

5、开发中，改一下Less再手动编译？构建工具可以监听文件修改，自动编译；

6、开发中，改一下CSS，刷新一下页面查看效果？构建工具可以监听文件修改，立即刷新页面；

……

 

国内很多公司Web前端开发人员，

感觉上是：前端附属于后端开发，地位较低。

（在普通的公司是这样的，但是百度、腾讯就会重视前端，而且大的互联网公司，Web前端开发出来的东西也是很赞的。）

 

常见的构建工具：

Grunt、FIS（百度出品）等。

FIS也是一个不错的构建工具。

目前很多的Web前端构建工具都是Node.js写的。

 

 

注意事项：如果你在使用中，grunt-contrib-connect、grunt-contrib-watch两个同时搭配使用，出现不能正常工作的 问题，要注意这个connect的这个配置：keepalive: false。如果没有配合grunt-contrib-watch的时 候，keepalive配置往往是true，配合watch监听的话，这个值就是false。

 

 

我的项目结构：