本文主要介紹前端開發(fā)中常用的構(gòu)建工具Grunt俩垃，具體包括Grunt的基本情況、安裝、使用和常見插件的安裝纷责、配置和使用等內(nèi)容。

1.1 Grunt簡(jiǎn)單介紹

Grunt的優(yōu)點(diǎn)

? Grunt擁有龐大的生態(tài)系統(tǒng)灾杰，并且一直在增長(zhǎng)。
? Grunt支持我們自己創(chuàng)作插件并發(fā)布熙参。

由于Grunt擁有數(shù)量龐大的插件艳吠，所以幾乎任何的任務(wù)都可以利用Grunt來自動(dòng)完成，你也可以根據(jù)自己項(xiàng)目的特點(diǎn)來創(chuàng)作合適的插件發(fā)布孽椰。

Grunt的工作方式

Grunt為開發(fā)者提供了一個(gè)工具包昭娩，用于創(chuàng)建命令行程序來執(zhí)行項(xiàng)目構(gòu)建過程中的重復(fù)性任務(wù)，比如壓縮js代碼黍匾、編譯Sass樣式等栏渺。Grunt不僅僅能創(chuàng)建簡(jiǎn)單任務(wù)以解決特定工程遇到的特定需求，還能將任務(wù)打包為可復(fù)用的插件锐涯。這些插件可以被發(fā)布磕诊、分享，使用以及被其他人進(jìn)行改進(jìn)纹腌。

Grunt的運(yùn)轉(zhuǎn)依賴于四個(gè)核心的組件：分別是Gruntfile霎终、Tasks 、Plugins以及任務(wù)配置升薯。

① Gruntfile

Gruntfile指的是在項(xiàng)目根目錄下面名為Gruntfile.js的Node模塊莱褒。該文件使得我們可以加載Grunt插件，創(chuàng)建自定義任務(wù)覆劈，并根據(jù)項(xiàng)目需求對(duì)它們進(jìn)行配置保礼。

Grunt每次運(yùn)行時(shí)的首要任務(wù)都是接受該模塊發(fā)出的指令沛励。

② Tasks

Tasks作為Grunt的基本構(gòu)建模塊，它實(shí)際上是由Grunt的registerTask（）方法注冊(cè)的具名函數(shù)炮障。

③ Plugins

Plugins是一系列能夠用于不同項(xiàng)目的可配置任務(wù)的集合目派。

④ 任務(wù)配置

Grunt強(qiáng)調(diào)配置優(yōu)先，任務(wù)和插件的功能都可以通過配置文件進(jìn)行定制胁赢，以適應(yīng)不同工程的需求企蹭。這種代碼和配置相分離的特性，使開發(fā)者能夠創(chuàng)造出高復(fù)用的插件智末。

相關(guān)參考

現(xiàn)在最新版本 v1.0.2
其它構(gòu)建工具 gulp谅摄、webpack、fis3等

Grunt官網(wǎng)
Grunt官網(wǎng)(中文)
Grunt相關(guān)的插件列表

1.2 Grunt的安裝

Grunt和相關(guān)的插件都通過 npm 安裝并管理系馆。

Grunt基于Node.js送漠，安裝之前要先安裝Node.js。

Node.js的安裝

① 打開Node.js官網(wǎng)找到Download選項(xiàng)由蘑，選擇對(duì)應(yīng)的版本下載闽寡。
② 下載之后，根據(jù)對(duì)應(yīng)的提示進(jìn)行安裝即可尼酿。
③ 安裝完成之后爷狈，可以通過$ node --version和$ npm --version命令查看是否安裝成功。

wendingding:~ wendingding$ node --version
v8.9.3
wendingding:~ wendingding$ npm --version
5.5.1
wendingding:~ wendingding$

安裝注意點(diǎn)

? ?Grunt依賴于nodejs的v0.8.0及以上版本裳擎；
? ?奇數(shù)版本號(hào)的 Node.js 被認(rèn)為是不穩(wěn)定的開發(fā)版涎永；
?? 需確保當(dāng)前環(huán)境中所安裝的 npm 已經(jīng)是最新版本（$ npm update -g npm）

安裝Grunt命令行

注意 在使用Grunt之前，需要先安裝Grunt命令行到全局環(huán)境中鹿响。

安裝命令：$ npm install -g grunt-cli

安裝完之后羡微，可以通過$ grunt命令來驗(yàn)證Grunt命令行是否安裝完成并生效，命令行中的-g表示全局安裝抢野。

具體的執(zhí)行情況

wendingding:~ wendingding$ npm install -g grunt-cli
/usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt
+ grunt-cli@1.2.0
added 16 packages in 9.289s
wendingding:~ wendingding$ grunt
grunt-cli: The grunt command line interface (v1.2.0)

Fatal error: Unable to find local grunt.

If you're seeing this message, grunt hasn't been installed locally to
your project. For more information about installing and configuring grunt,
please see the Getting Started guide:

http://gruntjs.com/getting-started

Grunt命令行的作用

Grunt命令行用于調(diào)用與Gruntfile在同一目錄中 Grunt拷淘。每次運(yùn)行Grunt 時(shí)，都會(huì)根據(jù)node提供的require()系統(tǒng)查找本地安裝的 Grunt（因此我們可以在項(xiàng)目的任意子目錄中運(yùn)行g(shù)runt） 指孤，如果找到一份本地安裝的 Grunt，命令行就將其加載贬堵，并傳遞Gruntfile中的配置信息恃轩，然后執(zhí)行指定的任務(wù)。

1.3 Grunt的安裝和使用

1.3.1 Grunt使用的基本步驟

Grunt使用的基本步驟

① 生成package.json和Gruntfile.js文件
② 命令行安裝項(xiàng)目中需要用到的插件
③ 編輯Gruntfile文件定義Task并進(jìn)行配置
④ 命令行以grunt task的方式執(zhí)行任務(wù)

1.3.2 Grunt的安裝

接下來黎做，我們通過一個(gè)完整的Grunt案例來介紹Grunt的常規(guī)使用方法叉跛。首先創(chuàng)建的對(duì)應(yīng)的項(xiàng)目文件目錄，這里命名為Grunt_demo文件夾蒸殿，然后創(chuàng)建package.json文件和Gruntfile.js文件并進(jìn)行相關(guān)配置,安裝相應(yīng)的插件并執(zhí)行Task筷厘。

① 創(chuàng)建package.json文件

創(chuàng)建package.json文件有兩種方式鸣峭，一種是直接創(chuàng)建然后以json格式的字段來進(jìn)行配置，第二種是通過執(zhí)行npm install來創(chuàng)建酥艳，推薦通過命令行的方式來創(chuàng)建摊溶。

?直接創(chuàng)建package.json文件?

wendingding:~ wendingding$ mkdir Grunt_Demo
wendingding:~ wendingding$ cd Grunt_Demo/
wendingding:Grunt_Demo wendingding$ PWD
/Users/文頂頂/Grunt_Demo
wendingding:Grunt_Demo wendingding$ touch package.json
wendingding:Grunt_Demo wendingding$ open package.json

命令行說明

$ mkdir Grunt_Demo 表示創(chuàng)建文件夾
$ cd Grunt_Demo/ 表示進(jìn)入文件目錄
$ PWD 表示查看當(dāng)前路徑
$ touch package.json 表示創(chuàng)建package.json文件
$ open package.json 表示使用記事本打開文件并編輯

wendingding:Grunt_Demo wendingding$ open package.json
wendingding:Grunt_Demo wendingding$ cat package.json
{
    "name":"Grunt_Demo",
    "version":"1.0.0",
    "dependencies":{}
}

$ cat package.json 表示查看文件內(nèi)容

創(chuàng)建好package.json文件后，可以根據(jù)需要添加內(nèi)容字段到文件中充石。該json文件中最基本字段主要有name莫换、version和dependencies，其中name和version對(duì)應(yīng)的是Grunt項(xiàng)目的名稱和版本骤铃，而dependencies字段中則列出該項(xiàng)目的依賴拉岁。

package.json文件用于被npm存儲(chǔ)項(xiàng)目的元數(shù)據(jù)，以便將此項(xiàng)目發(fā)布為npm模塊惰爬。我們可以在此文件中列出項(xiàng)目依賴的Grunt和Grunt插件喊暖，保存在devDependencies（開發(fā)依賴）配置段內(nèi)。

? 初始化命令創(chuàng)建package.json文件 ?

除手動(dòng)創(chuàng)建外撕瞧，我們還能夠通過命令行來進(jìn)行初始化操作哄啄，會(huì)以交互的方式來生成一個(gè)包含基本配置信息的package.json文件。

初始化命令：$ npm init

下面列出具體的命令行執(zhí)行情況

wendingding:Grunt_Demo wendingding$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (grunt_demo)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/文頂頂/Grunt_Demo/package.json:

{
  "name": "grunt_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes) yes
wendingding:Grunt_Demo wendingding$ cat package.json
{
  "name": "grunt_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

在執(zhí)行npm init命令創(chuàng)建基本package.json文件的時(shí)候风范，可以設(shè)置名稱咨跌、版本、依賴等選項(xiàng)硼婿，如果不設(shè)置直接回車表示以默認(rèn)(建議)的方式來進(jìn)行配置锌半。

package.json文件注意點(diǎn)
? package.json應(yīng)當(dāng)放置于項(xiàng)目的根目錄中，并同項(xiàng)目源代碼一起管理寇漫。
? 如果在根目錄中運(yùn)行npm install命令刊殉，那么將依據(jù)package.json列出的依賴項(xiàng)來自動(dòng)安裝適當(dāng)版本的依賴。

② 創(chuàng)建Gruntfile文件

Gruntfile文件是Grunt項(xiàng)目中最核心的文件州胳，可以被命名為 Gruntfile.js 或者是Gruntfile.coffee记焊，該文件同package.json文件一起存放在項(xiàng)目的根目錄中，主要用來配置或定義任務(wù)（task）并加載Grunt插件栓撞。

標(biāo)準(zhǔn)的grunt項(xiàng)目中必須擁有package.json和Gruntfile這兩個(gè)文件遍膜。

wendingding:Grunt_Demo wendingding$ touch Gruntfile.js
wendingding:Grunt_Demo wendingding$ tree -L 2
.
├── Gruntfile.js
└── package.json

0 directories, 2 files

$ tree -L 2 表示以樹狀圖的方式列出當(dāng)前目錄下面的二級(jí)文件結(jié)構(gòu)，具體使用可以參考網(wǎng)絡(luò)編程系列 Mac系統(tǒng)中Tree的使用

③ 安裝Grunt

在創(chuàng)建Grunt項(xiàng)目的過程中瓤湘，我們可以通過$ npm install <module> --save-dev模式的命令來安裝Grunt和Grunt插件瓢颅。該命令在安裝<module>的同時(shí)，會(huì)自動(dòng)將其添加到package.json文件的devDependencies 配置段中弛说。

接下來我們演示安裝Grunt最新版本到項(xiàng)目目錄中挽懦，并將其添加到devDependencies內(nèi)。

命令行：$ npm install grunt --save-dev

wendingding:Grunt_Demo wendingding$ npm install grunt --save-dev
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN grunt_demo@1.0.0 No description
npm WARN grunt_demo@1.0.0 No repository field.

+ grunt@1.0.2
added 94 packages in 33.833s

命令行執(zhí)行完畢之后木人，會(huì)發(fā)現(xiàn)package.json的配置段中信息發(fā)生了變更，在devDependencies配置項(xiàng)中增加了grunt字段和對(duì)應(yīng)的版本信息。

wendingding:Grunt_Demo wendingding$ cat package.json
{
  "name": "grunt_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^1.0.2"
  }
}

項(xiàng)目的根目錄中增加了node_modules文件中吞获，該目錄列出了必要的依賴文件，下面給出文件結(jié)構(gòu)进鸠。

wendingding:Grunt_Demo wendingding$ tree -L 2
.
├── Gruntfile.js
├── node_modules
│   ├── abbrev
│   ├── ansi-regex
│   ├── ansi-styles
│   ├── argparse
│   ├── array-find-index
│   ├── async
│   ├── balanced-match
│   ├── brace-expansion
│   ├── builtin-modules
│   ├── camelcase
│   ├── camelcase-keys
│   ├── chalk
│   ├── coffeescript
│   ├── colors
│   ├── concat-map
│   ├── currently-unhandled
│   ├── dateformat
│   ├── decamelize
│   ├── error-ex
│   ├── escape-string-regexp
│   ├── esprima
│   ├── eventemitter2
│   ├── exit
│   ├── find-up
│   ├── findup-sync
│   ├── fs.realpath
│   ├── get-stdin
│   ├── getobject
│   ├── glob
│   ├── graceful-fs
│   ├── grunt
│   ├── grunt-known-options
│   ├── grunt-legacy-log
│   ├── grunt-legacy-log-utils
│   ├── grunt-legacy-util
│   ├── has-ansi
│   ├── hooker
│   ├── hosted-git-info
│   ├── iconv-lite
│   ├── indent-string
│   ├── inflight
│   ├── inherits
│   ├── is-arrayish
│   ├── is-builtin-module
│   ├── is-finite
│   ├── is-utf8
│   ├── isexe
│   ├── js-yaml
│   ├── load-json-file
│   ├── lodash
│   ├── loud-rejection
│   ├── map-obj
│   ├── meow
│   ├── minimatch
│   ├── minimist
│   ├── nopt
│   ├── normalize-package-data
│   ├── number-is-nan
│   ├── object-assign
│   ├── once
│   ├── parse-json
│   ├── path-exists
│   ├── path-is-absolute
│   ├── path-type
│   ├── pify
│   ├── pinkie
│   ├── pinkie-promise
│   ├── read-pkg
│   ├── read-pkg-up
│   ├── redent
│   ├── repeating
│   ├── resolve
│   ├── rimraf
│   ├── safer-buffer
│   ├── semver
│   ├── signal-exit
│   ├── spdx-correct
│   ├── spdx-exceptions
│   ├── spdx-expression-parse
│   ├── spdx-license-ids
│   ├── sprintf-js
│   ├── strip-ansi
│   ├── strip-bom
│   ├── strip-indent
│   ├── supports-color
│   ├── trim-newlines
│   ├── underscore.string
│   ├── validate-npm-package-license
│   ├── which
│   └── wrappy
├── package-lock.json
└── package.json

91 directories, 3 files

至此，Grunt項(xiàng)目的基本配置以及Grunt的安裝已經(jīng)完成圃伶，在開發(fā)中使用Grunt主要是用Grunt相關(guān)的一些插件來實(shí)現(xiàn)特定的功能堤如。Grunt的生態(tài)中提供了非常豐富的插件，我們可以直接在官方搜索查看窒朋，接下來給大家介紹幾個(gè)在前端項(xiàng)目構(gòu)建中常用到的插件搀罢。

1.3.3 Grunt插件的安裝和使用

? 文件合并插件concat的安裝和使用 ?

concat插件的地址：https://github.com/gruntjs/grunt-contrib-concat

concat插件安裝命令：$ npm install grunt-contrib-concat --save-dev

--save-dev參數(shù)表示插件安裝完成后，記錄相關(guān)信息到package.json文件中的devDependencies配置項(xiàng)侥猩。

下面列出具體的執(zhí)行情況

wendingding:Grunt_Demo wendingding$ npm install grunt-contrib-concat --save-dev
npm WARN grunt_demo@1.0.0 No description
npm WARN grunt_demo@1.0.0 No repository field.

+ grunt-contrib-concat@1.0.1
added 2 packages in 3.165s
wendingding:Grunt_Demo wendingding$ cat package.json
{
  "name": "grunt_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^1.0.2",
    "grunt-contrib-concat": "^1.0.1"
  }
}

插件安裝完成后榔至，在項(xiàng)目的node_modules文件目錄會(huì)新增加grunt-contrib-concat模塊。接下來我們通過編輯Gruntfile文件來定義和配置Task欺劳。

在項(xiàng)目的根目錄中創(chuàng)建src文件夾唧取，在該文件夾下面創(chuàng)建兩個(gè)示例的js文件，分別為demo_one.js和demo_two.js

demo_one.js文件的內(nèi)容

//聲明demoOne函數(shù)并執(zhí)行
function demoOne() {
    console.log("demoOne.js文件中的內(nèi)容");
}
demoOne();

demo_two.js文件的內(nèi)容

//聲明demoTwo函數(shù)并執(zhí)行
function demoTwo() {
    console.log("demoTwo.js文件中的內(nèi)容");
}
demoTwo();

編輯Gruntfile文件定義和配置Task

接下來我們需要編輯Gruntfile文件划提，在該文件中告訴grunt具體的任務(wù)(Task)是什么枫弟，以及這些任務(wù)(Task)應(yīng)該如何執(zhí)行，下面給出示例代碼

//包裝函數(shù),規(guī)定所有的代碼都需要寫在該函數(shù)內(nèi)部
module.exports = function (grunt) {

    //項(xiàng)目配置信息
    grunt.initConfig({
        //表示從package文件中加載json數(shù)據(jù),并保存到pkg屬性中
        pkg:grunt.file.readJSON("package.json"),
        //concat任務(wù)的配置信息
        "concat":{
            dist: {
                //把src目錄下面的demo_one和demo_two文件合并成demo.js文件保存到dist目錄
                src: ['src/demo_one.js', 'src/demo_two.js'],
                dest: 'dist/demo.js',
            }
        }

    })

    //加載包含concat任務(wù)的插件
    grunt.loadNpmTasks("grunt-contrib-concat");

    //設(shè)置默認(rèn)執(zhí)行的任務(wù)列表
    grunt.registerTask("default",["concat"]);
};

代碼說明

上面的示例代碼主要由三部分組成：配置任務(wù)相關(guān)代碼 + 加載插件相關(guān)代碼 + 注冊(cè)任務(wù)相關(guān)代碼,所有的代碼都需要寫在module.exports這個(gè)包裝函數(shù)內(nèi)部鹏往，grunt作為包裝函數(shù)的參數(shù)傳遞淡诗。

這里代碼中的pkg部分并非必要，loadNpmTasks方法用于從node_modules中加載對(duì)應(yīng)的插件伊履，registerTask方法表示把concat這個(gè)任務(wù)加入到默認(rèn)的任務(wù)隊(duì)列中(該行代碼并非必需)韩容，如果不寫該行代碼則可以直接以$ grunt concat的方式執(zhí)行合并任務(wù)。當(dāng)然也可以通過registerTask方法來給Task注冊(cè)個(gè)別名唐瀑，然后通過$ grunt 別名指令來執(zhí)行該Task群凶。

當(dāng)前的目錄結(jié)構(gòu)如下(注：省略node_modules目錄細(xì)節(jié))

wendingding:Grunt_Demo wendingding$ tree -L 1
.
├── Gruntfile.js
├── node_modules
├── package-lock.json
├── package.json
└── src
    ├── demo_one.js
    └── demo_two.js

不同插件的使用方式可能也不盡相同，插件的具體用法請(qǐng)參考對(duì)應(yīng)的文檔說明哄辣。通過編輯Gruntfile文件指定任務(wù)的配置項(xiàng)请梢、加載插件并注冊(cè)任務(wù)后，就可以通過命令行來執(zhí)行Task了柔滔。

執(zhí)行Task

執(zhí)行Task的命令行：$ grunt 或者是$ grunt default 或者是$ grunt concat
命令行輸出結(jié)果

wendingding:Grunt_Demo wendingding$ grunt default
Running "concat:dist" (concat) task

Done.

Task執(zhí)行結(jié)束后溢陪，src目錄下面的demo_one.js和demo_two.js兩個(gè)文件會(huì)被合并成demo.js文件并保存到dist目錄下，如果指定的目錄不存在那么將會(huì)直接創(chuàng)建睛廊。

? 壓縮插件uglify和cssmin的安裝和使用 ?

創(chuàng)建新的文件目錄Grunt_Test來演示javaScript的壓縮插件uglify以及CSS的壓縮插件cssmin的使用，創(chuàng)建好文件目錄之后杉编，同樣通過$ npm init初始化命令來生成基礎(chǔ)的package.json文件超全。

先安裝grunt到本地的項(xiàng)目中咆霜，具體命令如下：

$ npm install grunt --save-dev

然后下載需要用到的對(duì)應(yīng)插件到本地的項(xiàng)目中，具體命令如下 ：

$ npm install grunt-contrib-uglify --save-dev 表示安裝uglify插件

$ npm install grunt-contrib-cssmin --save-dev 表示cssmin插件

上面的命令行執(zhí)行完畢后嘶朱，grunt就會(huì)把兩個(gè)壓縮插件下載到node_modules文件目錄下蛾坯，可以通過在該目錄下查找grunt-contrib-uglify和grunt-contrib-cssmi文件進(jìn)行驗(yàn)證。

--save--dev參數(shù)會(huì)把下載記錄更新到package.json文件中的devDependencies字段疏遏。

"devDependencies": {
"grunt": "^1.0.2",
    "grunt-contrib-cssmin": "^2.2.1",
    "grunt-contrib-uglify": "^3.3.0"
  }

為了演示壓縮插件的具體使用脉课，下面我們?cè)陧?xiàng)目根目錄下創(chuàng)建index.js文件，并新建style文件夾财异，并在該目錄下創(chuàng)建index.css文件倘零，具體的目錄結(jié)構(gòu)如下:

.
├── node_modules
│   ├── ...(省略)
│   ├── grunt-contrib-cssmin
│   ├── grunt-contrib-uglify
├── package-lock.json
├── package.json
└── src
    ├── index.js
    └── style
        └── index.css

index.js文件內(nèi)容為

/**
 * Created by wendingding on 18/5/19.
 */

var a = 123;
var b = "文頂頂";
function sum(a,b) {
    return a + b;
}

(function (c) {
    console.log("______" + c);
})(window);

index.css文件內(nèi)容為

body{
    background: red;
}
*{
    margin: 0;
    padding: 0;
    list-style: none;
}

接下來我們創(chuàng)建并編輯Gruntfile文件，通過特定的代碼定義和配置Task戳寸。

//包裝函數(shù)
module.exports = function (grunt) {

    var app = {
        src:"src/",
        dist:"dist/"
    };

    //(1) 項(xiàng)目配置信息
    //說明：initConfig方法等價(jià)于grunt.config.init()方法;
    grunt.initConfig({
    //定義js文件壓縮Task: 表示把src目錄下面的index.js文件壓縮到dist目錄中的index.min.js
        "uglify":{
            target:{
                src:app.src + "index.js",
                dest:app.dist + "index.min.js"
            }
        },
    //定義css文件壓縮Task: 表示把src/style目錄中的index.css文件壓縮到dist目錄中的index.min.css
        "cssmin":{
            target:{
                src:app.src + "style/index.css",
                dest:app.dist + "index.min.css"
            }
        }
    });

    //(2) 加載對(duì)應(yīng)的插件
    grunt.loadNpmTasks("grunt-contrib-uglify");
    grunt.loadNpmTasks("grunt-contrib-cssmin");

    //(3) 注冊(cè)任務(wù)
    //002 注冊(cè)任務(wù)的第一種方式
    //① 這種方式可以不寫任何注冊(cè)任務(wù)相關(guān)的代碼
    //② 我們可以通過$ grunt uglify和$ grunt cssmin命令來分別執(zhí)行這兩個(gè)Task
    //③ 支持以$ grunt uglify cssmin的方式來依次執(zhí)行多個(gè)Task

    //002 注冊(cè)任務(wù)的第二種方式
    //① 這種方式相當(dāng)于給每個(gè)任務(wù)都起一個(gè)Task名稱呈驶，通過$ grunt task名稱的方式執(zhí)行
    //② 執(zhí)行命令 $ grunt uglifyTask 表示執(zhí)行js文件的壓縮操作
    //③ 執(zhí)行命令 $ grunt cssminTask 表示執(zhí)行css文件的壓縮操作
    //④ 執(zhí)行命令 $ grunt cssminTask uglifyTask 表示先執(zhí)行css文件的壓縮，再執(zhí)行js文件的壓縮
    //grunt.registerTask("uglifyTask","uglify");
    //grunt.registerTask("cssminTask","cssmin");

    //003 注冊(cè)任務(wù)的第三種方式
    // ① 這種方式把多個(gè)任務(wù)添加到default任務(wù)隊(duì)列中疫鹊，執(zhí)行$ grunt default的時(shí)候袖瞻，所有的Task依次執(zhí)行
    // ② 執(zhí)行命令為 $ grunt default 或者是$ grunt  因?yàn)閐efault可以被省略
    // grunt.registerTask("default",["uglify","cssmin"]);
};

根據(jù)任務(wù)注冊(cè)的不同方式來執(zhí)行Task，下面分別給出三種方式的執(zhí)行命令

方式1 先執(zhí)行$ grunt cssmin再執(zhí)行 $ grunt uglify拆吆，或者通過$ grunt cssmin uglify命令來依次執(zhí)行多個(gè)任務(wù)聋迎。

方式2 先執(zhí)行$ grunt cssminTask再執(zhí)行 $ grunt uglifyTask，或者通過$ grunt cssminTask uglifyTask命令來依次執(zhí)行多個(gè)任務(wù)枣耀。

方式2 通過$ grunt或者是$ grunt default命令來依次執(zhí)行多個(gè)任務(wù)霉晕。

wendingding:Grunt_Test wendingding$ grunt default
Running "uglify:target" (uglify) task
>> 1 file created 174 B → 93 B

Running "cssmin:target" (cssmin) task
>> 1 file created. 89 B → 57 B

Done.

當(dāng)兩個(gè)任務(wù)執(zhí)行完畢后，項(xiàng)目中會(huì)創(chuàng)建dist目錄奕枢，該目錄中新增兩個(gè)文件分別對(duì)應(yīng)壓縮版的js文件和壓縮版的css文件娄昆，新的目錄結(jié)構(gòu)如下。

.
├── node_modules
│   ├── ...(省略)
│   ├── grunt-contrib-cssmin
│   ├── grunt-contrib-uglify
├── package-lock.json
├── package.json
├── dist
│   ├── index.min.js
│   └── index.min.css
└── src
    ├── index.js
    └── style
        └── index.css

上文列出了代碼合并插件concat和壓縮插件uglify|uglify的安裝和基本使用過程缝彬，grunt生態(tài)系統(tǒng)擁有數(shù)量龐大的高質(zhì)量插件群體萌焰，無法一一介紹，可以到Grunt相關(guān)的插件列表頁面-中文或Grunt相關(guān)的插件列表頁面-官網(wǎng)自行查看谷浅。

Grunt插件使用總結(jié)

? 創(chuàng)建package.json文件(簡(jiǎn)單配置)和Gruntfile文件($ npm init)
? 通過命令行把Grunt下載和安裝到本地項(xiàng)目中($ npm install grunt --save-dev)
? 通過命令行把Grunt插件下載和安裝到本地項(xiàng)目中($ npm install grunt-contrib-xxx)
? 在Gruntfile文件中對(duì)Grunt插件的Task進(jìn)行配置（grunt.initConfig）
? 在Gruntfile文件中通過代碼來加載對(duì)應(yīng)的插件（grunt.loadNpmTasks）
? 在Gruntfile文件中通過代碼來注冊(cè)任務(wù)（grunt.registerTask）
? 在命令行中通過grunt + 任務(wù)名的方式來執(zhí)行Task或加入到default隊(duì)列以grunt命令執(zhí)行扒俯。

• 獲取更多、更專業(yè)的IT技能一疯，請(qǐng)猛戳~小碼哥教育?
• Posted by 博客園·文頂頂 ~ 文頂頂?shù)膫€(gè)人博客_花田半畝
• 聯(lián)系作者 簡(jiǎn)書·文頂頂 新浪微博·Coder_文頂頂
• 原創(chuàng)文章撼玄，版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名 | 文頂頂