工程化起步（一）：Grunt

一、什么是Grunt

Grunt是一个任务管理器，可以使用它来校验Javascript语法、css压缩、Sass编译等一些前端工程化的任务。借用官网的说法就是“对于需要反复重复的任务，例如压缩、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。”

二、安装及原理

2.1 安装命令

Grunt是基于Node.js运行并通过npm安装和管理的，安装命令如下

npm install -g grunt-cli

在安装的时候，可能会遇到权限问题，所以，我们在linux/mac系统上需要

sudo npm install -g grunt-cli

windows环境下需要用管理员模式来执行该命令。

2.2 原理工作

运行grunt的时候，它就是利用Node.js提供的require方法来找到本地安装的grunt。找到后，脚手架(CLI)加载Grunt，然后通过Gruntfile中的配置信息，执行你自己配置的任务，所以说，一个Grunt管理工具，最重要的是Gruntfile这个文件，因为里面存放着我们的task任务。

Gruntfile文件的主要作用有两个:

• 配置或定义自己的任务task

• 加载grunt插件

三、搭建

对于一个新的前端项目搭建，我们会如何配合grunt来做呢？

• 1.首先创建一个文件夹(目录)，例如叫project

• 2.然后进入project的根目录，我们通过npm init先把package.json这个文件创建起来，新手的话，可以直接一直按回车一直按到创建完毕，以后会详细说这个npm init创建package.json里面的内容究竟有什么用。

• 3.现在在package.json同级目录下（即project的根目录），创建一个名字为Gruntfile.js,然后编写以下代码

但是现在执行grunt的话就会报错，为什么呢，因为需要安装Gruntfile当中使用了的插件，例如现在用到了grunt-contrib-uglify所以我们需要通过以下命令安装一下。

npm install grunt-contrib-uglify --save-dev

这时候grunt-contrib-uglify这个名称和对应它的版本会写入到package.json

OK！，到了这里就可以去到project的根目录运行grunt命令了，如果没有任何参数带上，就是执行default定义的任务。registerTask函数有2个参数，自定义的任务名和任务列表，任务列表就是一个字符串数组，可以指定一个或多个任务。

grunt.registerTask注册完任务后，就可以执行grunt命令了，例如"grunt", "grunt default", "grunt uglify"等。

现在的目录结构就是

四、插件介绍

Grunt的插件是有很多的，但是经常用的，就那几个，现在就总结一下，哈。

插件名称	插件描述
grunt-contrib-watch	监控文件有修改的时候，运行指定的任务
grunt-contrib-clean	删除指定的文件和文件夹
grunt-contrib-copy	复制指定的文件和文件夹
grunt-contrib-uglify	使用uglifyJS压缩js文件
grunt-contrib-jshint	使用JSHint验证Js文件
grunt-contrib-concat	合并多个文件
grunt-contrib-less	将Less文件编译成css文件
grunt-contrib-cssmin	压缩css文件

目前这些就是最常用的插件，用在项目上比较多，如果需要的话，可以上官网http://www.gruntjs.net/plugins来查看插件列表。

五，总结

Grunt的使用大概就是这样，到这里应该感觉到工程化的魅力，但是本人在实际开发grunt是用得较少，因为有gulp的出现后，grunt我可以说是弃用了，但是为什么我还要介绍grunt呢，其实就想大家对工程化中的任务管理task这个东西有一个了解，因为到了后面gulp的使用，也是和grunt差不多，可能就是一些配置上的写法差异，到这里，希望大家多练习一下，跟着例子，搭建一个属于自己的一个grunt工程化项目，以后就可以复用你自己搭建的工程化项目来进行开发了。

 上图就是Grunt的Logo，大家请认识下，以后可以适当的在面试装装逼，哈。