</br>

grunt是一個優(yōu)秀的前端的自動化生產(chǎn)工具，最開始作者一直不用這類工具，感覺麻煩，但是當后面項目大一些后開始嘗試使用，就一發(fā)不可收拾，但是對于grunt的一些機制原理等，自己也是搗鼓了一些時間，今天就來總結(jié)一下自己的經(jīng)驗，希望對部分同學能有一些幫助。

1.grunt的用處

對于需要反復(fù)重復(fù)的任務(wù)，例如壓縮（minification）、編譯、單元測試、linting等，代碼合并等等，grunt可以減輕你的勞動，簡化你的工作。當你在 Gruntfile 文件正確配置好了任務(wù)，任務(wù)運行器就會自動幫你完成大部分無聊的工作

2.grunt的三要素

• task
• target
• options

先來簡單解釋一下這三個要素吧

1. task

這個就是grunt的任務(wù)，之前提過grunt是用來自動執(zhí)行各種各樣的任務(wù)的，比如壓縮文件，合并文件，單元測試等等，這些都是一系列任務(wù)

2.target

這個是任務(wù)的目標，也就是任務(wù)具體做的事，例如有一個合并文件的任務(wù)，這個任務(wù)可以做兩件具體的事:

• build1：合并a.css和b.css
• build2：合并a.css和c.css

每一個具體的事情就是一個target

3.options

從字面上就可以理解，這個就是配置。task或者target的配置，每個task有自己的配置，每個target也可以有自己的配置

開始做個Demo吧

</br>

咱們按順序開始以下幾步吧

• 裝上node和git，然后新建一個文件夾
• 在文件夾的根目錄中打開git 執(zhí)行 npm init，會新建一個package.json文件，只需填寫一下基本內(nèi)容就好，在此不贅述了。
• 全局安裝grunt命令行，執(zhí)行 npm install -g grunt-cli，這樣后面就可以用grunt命令來執(zhí)行之前我們說的task和target了
• 安裝grunt和四個插件，執(zhí)行命令：

  • npm install grunt --save-dev 安裝grunt

  • npm install grunt-contrib-uglify --save-dev 安裝壓縮插件
  • npm install grunt-contrib-watch --save-dev 安裝監(jiān)控文件變化插件
  • npm install grunt-contrib-cssmin --save-dev 安裝css壓縮插件
  • npm install grunt-contrib-csscomb --save-dev 安裝css合并插件
• 新建一個Gruntfile.js文件，這個文件中主要寫的對各個任務(wù)的配置，直接貼出一個簡單的Gruntfile.js的文件內(nèi)容吧

module.exports=function(grunt){
// 任務(wù)配置，所有插件的配置信息
grunt.initConfig({
    // watch插件配置信息,用于觀察文件的變化
    watch:{
        build:{
            files:['src/js/*.js','src/css/*.css'],
            tasks:['jshint','uglify','cssmin','csscomb'],
            options:{spawn:false}
        }
    },
    // uglify插件配置信息，用于壓縮文件
    uglify: {
      build: {
        files:{
            'build/js/yourName.min.js':['src/js/test.js']
        } 
      }
    },
    // cssmin插件配置信息，用于壓縮css
    cssmin:{
        options: {
            shorthandCompacting: false,
            roundingPrecision: -1
        },
        build: {
            files: {
              'build/css/output.min.css': ['src/css/*.css']
            }
        }
    },
    // csscomb插件配置信息，用于合并css
    csscomb: {
        bulid: {
            files:{
                "src/dest/css/output.restored.css":["src/css/test.css"],
                "src/dest/css/output2.restored.css":["src/css/test2.css"]
            }
        }
    }
});
// 加載包含任務(wù)的插件
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-csscomb');
// 默認被執(zhí)行的任務(wù)列表。
grunt.registerTask('default', ['uglify','cssmin','csscomb','watch']);
};

在上面的代碼中，有watch，uglify，cssmin，csscomb四個task，每個task里面都有自己的options和target(uglify里沒有options因為options并不是必須的，根據(jù)需求而定)</br>

對于每個task的build target里都有files屬性，files屬性里主要是輸入和輸出文件,files中的輸入輸出文件有四種寫法，在grunt中文官網(wǎng)有詳細描述，這里我就不細說了。
</br>
對于每個task的options，不同插件有不同的配置方式，需要各位在使用對應(yīng)的插件時，去grunt插件官網(wǎng)看看基本的配置方法和插件描述

• 在項目根目錄打開git，如果直接執(zhí)行g(shù)runt命令，則會執(zhí)行組合的‘default’任務(wù)，也就是uglify ,cssmin,csscomb,watch四個task,如果需要執(zhí)行指定的單個task，例如uglify，則執(zhí)行命令grunt uglify，如果需要執(zhí)行task的具體target，例如cssmin的build，則執(zhí)行命令grunt cssmin:build

總結(jié)一下，grunt這個工具的目的其實就是讓我們方便地使用各種插件來幫助我們進行開發(fā)，而它的工作機制其實就是：首先我們用node安裝好了基本的環(huán)境后，需要用什么插件就node install 插件名稱，然后在Gruntfile.js中配置這個插件task的options和target就行了，最后按需執(zhí)行插件！

</br>

這篇其實算不上一個grunt的完整Demo，比如路徑配置，files，特殊插件配置和更靈活的用法都沒介紹，我也沒打算做這樣一個教程，因為也已經(jīng)有不少優(yōu)秀的grunt教程了，grunt中文網(wǎng)也有。不過單看教程并不能讓我們更好地使用grunt，后面需要用到的其他插件需要去官網(wǎng)看看插件的基本配置和介紹，一些其他用法也都是需要去官網(wǎng)或者其它大牛博客看看的，我現(xiàn)在只是從理解grunt本身這方面來做的一個淺顯的介紹，希望能幫助到部分同學，共勉！