457188

什么是grunt?

Grunt是一个基于JavaScript上的一个很强大的任务管理器(task runner),或许这么一说让很多人觉得费解,简单来说就是你可以在你的终端机上,用JavaScript去执行一些程序来完成一些任务。比如说验证HTML、CSS、JavaScript的语法,压缩CSS、JavaScript、图像,Sass、LESS和Stylus编译成CSS等等,这些东西佛教徒吧很适合用Grunt来解决。

Grunt其实就是一个基于NodeJS,可用于自动化构建、测试、生成文档的项目管理工具。他可以更好的帮助一个团队更好的提高效率、减少错误率。

简单点来说,Grunt不仅仅是构建工具,实际上他只是任务运行器,管理每个子任务的自动化运行,我们还能使用他做更多东西。

为什么用Grunt?

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

大家都非常清楚,在项目发布之前,我们都需要做一个步骤,那就是尽可能的将项目中的文件进行尽可能压缩,比如JavaScript、CSS、images甚至是HTML文件,主要目的是减小加载文件的带宽。另外,在很多情况为了安全性考虑,我们需要对我们项目的源代码做一些单元测试和回归测试。然而这些工作都是一些重复性的、乏味的工作。对于一个小型项目来说,或许没有太大的感觉,但对于一个大中型的项目,特别的参与人员过多的项目时,这些工作就显得更重要了。同时让大家更觉得自动化工具是多么的重要。

Grunt能做什么

Grunt就是一个工具箱,就像一个百宝箱,拥有非常丰富的任务插件,可以帮助开发人员实现各式各样的构建目标。

在Grunt工具箱中,按任务目标我们可以分为:

  • 编译文档型:比如编译LESS、Sass、Stylus、Coffeescript等;
  • 文件操作型:比如说合并、压缩JavaScript、CSS、图片等;
  • 质量保障型:比如JSHint、Jasmin、Mocha等;
  • 类库构建型:比如说Backbone.js、ember.js、angular.js等。

这些任务都依赖于给Grunt提供的插件来完成的,但很多工作依旧需要在命令终端手工输入命令来完成这些操作。为此在Grunt中可以使用watch任务来实现一些监听文件改变、自动触发构建等功能。从而减少人工去每次操作任务。

运行Grunt需要什么?

前面也说过,Grunt是基于Node.js基础上运行的。需要能正常运行Grunt,必先在你的系统上正确安装Node.jsNPM

如果你从未接触过node.js并不用太担心,只需要根据教程可以很容易帮助您在系统上安装Node.js。

环境好了之后,可以通过终端命令中安装grunt运行工具:

详细的Grunt安装教程请移步另外一个教程,非常详细,按照步骤一点点使用你就能轻松的了解Grunt了;

Grunt安装配置教程

gongzhonghao
关注“小K前端杂谈”,得到更多学习资源