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。
我的项目结构: