FED实验室 - 专注WEB端开发和用户体验

Grunt——自动化构建工具

AUTOMATION 煦涵 4000℃ 0评论

Preface

随着Web技术的发展,前端工程师需要维护的代码变得极为庞大和复杂,代码维护、压缩、打包、发布等流程也变得极为繁琐,在重复劳动的过程中浪费了大量时间和精力,于此同时,出错的概率也在隐性增加,因为我们的愿景是有一种工具可以取代这种重复劳动,在国内一些大型互联网公司都有自己的工具,如百度的FIS,腾讯的Modjs,阿里的Ant等等,当然也有一些开源的工具,如Grunt、Gulp等。下面来学习下Grunt。

一、What is?

Grunt其实就是一个基于NodeJS,可用于自动化构建、测试、生成文档的项目管理工具。他可以更好的帮助一个团队更好的提高效率、减少错误率。简单来说就是你可以在你的终端机上,用JavaScript去执行一些程序来完成一些任务。比如说验证HTML、CSS、JavaScript的语法,压缩CSS、JavaScript、图像,Sass、LESS和Stylus编译成CSS等等,这些都适合用Grunt来解决。

二、Why use?

我们为什么要使用Grunt? 答案是为了自动化。对于前端项目,为了明确模块分工,我们可以会将JavaScript、CSS代码拆解成很多个模块,他们都有独立的一个个文件,但这样一来用来页面上,增加了文件个数,同时也产生过多的Http请求,可从性能的角度来考虑,不利于页面优化。所以我们需要合并、压缩这些Javascript、CSS、html文件。这样一来,也期望有一种工具能代替我们手工操作,去完成这些任务。

三、What do?

Grunt能做什么呢?
1.编译文档型:编译LESS、Sass、Stylus、Coffeescript等;
2.文件操作型:合并、压缩JavaScript、CSS、图片等;
3.质量保障型:JSHint、Jasmin、Mocha等;
4.类库构建型:Backbone.js、ember.js、angular.js等。

四、Dependence?

Grunt是基于Node.js基础上运行的。使用Grunt前,必须安装Node 和 NPM

 

下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:

FED实验室

行文不易,如有帮助,欢迎打赏!

赞赏支持or喜欢 (0)or分享 (0)
捐赠共勉
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址