前端工程化系列[03]-Grunt构建工具的运起色制

在前端工程化系列[02]-Grunt构建工具的基本使用这篇文章中，已经对Grunt作了简单的介绍，此外，咱们还知道了该如何来安装Grunt环境，以及使用一些常见的插件了，这篇文章主要介绍Grunt的核心组件和运起色制。

Grunt是一套前端自动化构建工具，能够帮助咱们简化开发中须要反复处理的任务，甚至能够实现自动构建等功能。

Grunt拥有数量庞大的插件，这些插件可以帮助咱们处理开发中遇到的绝大多数构建任务，好比代码的预编译、压缩、代码检查、单元测试等。但为何在终端输入Grunt相关命令，就可以执行对应的任务，Grunt究竟是怎么运转的？这些知识对于深刻研究Grunt很是重要,下面咱们从Grunt运转的组件和运起色制两方面来展开讨论。

2.1 Grunt的核心组件

node和npm

Grunt项目基于Node.js，Grunt和相关的插件都经过 npm 安装并管理。

Grunt-cli

Grunt命令行用于调用与Gruntfile文件在同一目录中的 Grunt模块，经过-g参数把Grunt命令行安装到全局环境中，这样的话在全部文件目录中均可以调用grunt相关的命令。

在命令行中运行Grunt 相关命令时(好比 $grunt default)，内部会根据node提供的require系统查找来当前目录中安装的 Grunt，若是找到那么加载，并把加载的grunt做为参数传递到Gruntfile文件中，而后执行指定的任务。

Task

Task就是任务的意思，grunt支持自定义任务，也支持使用现成的插件任务。好比向控制台输出一句问候这能够被认为是一个Task，对全部的js文件进行压缩这也是一个Task，一般任务(Task)都是可配置的。

Grunt本地依赖

安装了grunt命令行不等于就安装了grunt，这只是让咱们拥有了在命令行中使用grunt相关命令的能力，对于每一个须要使用grunt的工程，仍然须要为其配置grunt本地依赖。

Grunt插件(Plugins)

Grunt插件是一系列可以用于不一样项目的可配置任务的集合。Grunt插件一般以npm包的形式发布。Grunt官网的插件列表列出了全部可用的Grunt插件，截止当前的插件数量为6,393个，其中带有contrib前缀的插件由Grunt官方开发和维护。

package.json文件

package.json文件用于被npm存储项目的元数据，以便将此项目发布为npm模块。咱们能够在此文件中列出项目依赖的Grunt和Grunt插件，保存在devDependencies（开发依赖）配置字段内，咱们能够经过$ npm install命令来加载该文件中的全部依赖项。

Gruntfile.js文件

Gruntfile文件是Grunt项目中最核心的文件，该文件同package.json文件一块儿存放在项目的根目录中，主要用来配置或定义任务（task）并加载Grunt插件。标准的grunt项目中必须拥有package.json和Gruntfile这两个文件。

node_modules文件夹

node_modules文件目录存放着从远程仓库下载的grunt以及全部相关的grunt插件。

2.2 Grunt的运起色制

上面给出了Grunt项目中各主要组件的关系图示，是根据我的的理解绘制的，因此可能并不是彻底准确，但基本上已经可以说清楚Grunt的运起色制了。

咱们在使用Grunt做为项目构建工具的时候，所作的事情大概能够分红三块：准备、配置、执行。

   ① 准备阶段   

准备阶段主要进行如下操做

❏  node环境的安装、npm的安装(在安装node的时候默认安装)

❏  grunt-cli命令行的安装(经过$ npm install -g grunt-cli命令)

❏  建立package.json文件(手动建立或经过$ npm init命令交互式建立)

❏  配置grunt本地依赖(经过$ npm install grunt --save-dev下载grunt到项目)

❏  安装须要的grunt插件(经过$ npm install grunt-contrib-xx --save-dev命令把须要的插件下载到node_modules目录)

   ② 配置阶段   

配置阶段主要就是建立和编辑Gruntfile文件，在该文件中接收grunt参数并配置Task，注册Task。Task简单说就是任务的意思，咱们能够自定义任务，也能够直接使用现成的、一些其余优秀开发者定义好并打包为node模块发布的任务（其实就是grunt插件）。

通常来讲，咱们老是经过grunt为咱们提供的grunt.initConfig方法来对Task(插件)进行配置，若是是该Task是Grunt插件那么还须要先从node_modules目录中加载。

若是对多个Task的执行有指定的顺序或者依赖关系，那么咱们能够经过grunt.registerTask方法来注册Task。

   ③ 执行阶段   

在执行阶段，经过在命令行中输入$ grunt task名称的方式来执行指定的任务。

执行Task的时候，能够单个执行，例如：

$ grunt taskName1
$ grunt taskName2

也能够用单条命令执行多个Task，每一个Task都将按照参数的传入顺序依次执行，例如：

$ grunt taskName1 taskName2

在使用构建工具的时候，这些Task具体怎么执行，执行的顺序等并不是是固定不变的，须要结合特定的需求来特殊处理。若是老是有一组Task须要按顺序执行，通常能够使用grunt.registerTask方法来给这组Task设置个别名，这一组的Task以数组的形式传递。

例如：要依次执行js文件的合并、语法检查、代码压缩、css代码压缩等任务，则配置好相关Task后能够像下面这样来设置。

grunt.registerTask( "customTask",["concat","jshint","uglify","cssmin"]);

要执行这组任务的时候，直接执行$ grunt customTask命令便可。