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。

我的项目结构:

原文地址:https://www.cnblogs.com/koleyang/p/5579524.html