原文地址：http://www.smashingmagazine.com/2013/10/29/get-up-running-grunt/

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),盤(pán)州企業(yè)網(wǎng)站建設(shè),盤(pán)州品牌網(wǎng)站建設(shè),網(wǎng)站定制,盤(pán)州網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,盤(pán)州網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

這篇文章中，我們將介紹如何在項(xiàng)目使用Grunt讓你的網(wǎng)站更快。我們簡(jiǎn)要分析下grunt能夠做什么，如何創(chuàng)建和使用各種插件完成各種繁重的任務(wù)。我們將看看如何構(gòu)建一個(gè)簡(jiǎn)單的表單驗(yàn)證器，使用Sass預(yù)處理器，如何使用grunt-cssc和CssMin結(jié)合壓縮我們的CSS，如何使用HTMLHint確保我們的HTML書(shū)寫(xiě)正確，以及如何快速地構(gòu)建我們的壓縮資源，最后，也會(huì)看看使用UglifyJS減小我們JavaScript的大小和確保我們的網(wǎng)站使用盡可能少的帶寬。

Grunt.js是一個(gè)JavaScript任務(wù)構(gòu)建器，他可以幫助你執(zhí)行重復(fù)性任務(wù)，比如壓縮，編譯，單元測(cè)試等。

開(kāi)始使用Grunt

大多數(shù)開(kāi)發(fā)人員都一致認(rèn)為，JavaScript開(kāi)發(fā)的速度和節(jié)奏在過(guò)去的幾年里已經(jīng)相當(dāng)驚人。不管是Backbone.js和Ember.js的框架還是JS Bin社區(qū)，這種語(yǔ)言的發(fā)展變化不僅提高我們網(wǎng)站的用戶體驗(yàn)還有構(gòu)建方式。

當(dāng)使用JavaScript，你可能需要定期執(zhí)行多個(gè)任務(wù)。雖然這在大多項(xiàng)目中都存在，但切實(shí)是一個(gè)耗時(shí)的和重復(fù)的工作方式。在這樣一個(gè)活躍的社區(qū)，假設(shè)有工具都可以實(shí)現(xiàn)自動(dòng)化，加快這個(gè)過(guò)程。此時(shí)就出現(xiàn)了Grunt。

什么是Grunt

建立在Node.js之上，Grunt是一個(gè)基于命令行的工具，用于加快工作流程，減少所需的準(zhǔn)備工作。將作業(yè)打包到任務(wù)中，可以自動(dòng)編譯?；旧?，你可以使用Grunt的大部分任務(wù)來(lái)幫你處理，通常需要手工配置和運(yùn)行。

雖然早期版本附帶了JSHint和Uglyify插件，但最近的版本（0.4版本）依賴于插件來(lái)完成所有的工作。

都有什么樣的任務(wù)呢？這有一個(gè)詳細(xì)的列表。我只想說(shuō)，Grunt可以處理大部你想處理的事情，從壓縮到加載JavaScript。他也可以用于與JavaScript無(wú)關(guān)的一系列任務(wù)，比如說(shuō)將Sass和LESS編譯成CSS。我們甚至使用blink當(dāng)構(gòu)建失敗時(shí)通知我們。

為什么要使用Grunt

最爽的事情之一就是Grunt讓團(tuán)隊(duì)做到一致性。如果你的工作是協(xié)作型的，你將要知道在代碼中不一致性多么令人煩惱的。Grunt工作使用團(tuán)隊(duì)具有統(tǒng)一的命令，從而確保團(tuán)隊(duì)中的每個(gè)人都使用相同的標(biāo)準(zhǔn)來(lái)編寫(xiě)代碼。畢竟，因?yàn)樵趫F(tuán)隊(duì)中如何編寫(xiě)代碼這樣的小問(wèn)題引起項(xiàng)目失敗更讓人感到沮喪.

Grunt也有一個(gè)令人難以置信的活躍社區(qū)，開(kāi)發(fā)人員會(huì)在社區(qū)中定期發(fā)布新插件。進(jìn)入的門(mén)檻相對(duì)較低，因?yàn)閺V泛的工具和自動(dòng)執(zhí)行的任務(wù)可以使用。

安裝

使用Grunt的首要事情就是安裝Node.js。(如果你對(duì)Node.js一無(wú)所知，別擔(dān)心，它只是為Grunt能夠運(yùn)行而安裝)。

一旦安裝好了Node.js，你可以終端命令中輸入：

npm install -g grunt-cli

為了確保Grunt已經(jīng)正確安裝，你可以運(yùn)行下面的命令：

grunt --version

接下來(lái)在你項(xiàng)目的根目中創(chuàng)建一個(gè)package.json和一個(gè)Gruntfile.js文件。

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

該JSON文件使我們能跟蹤和安裝我們所有開(kāi)發(fā)依賴項(xiàng)。然后，對(duì)項(xiàng)目工作的人會(huì)擁有當(dāng)前開(kāi)發(fā)依賴性，最終有助于保持開(kāi)發(fā)環(huán)境的同步。

在你項(xiàng)目根目錄下創(chuàng)建一個(gè)文件，并且包含下面的信息：

{
    "name" : "SampleGrunt",
    "version" : "0.1.0",
    "author" : "Brandon Random",
    "private" : true,

    "devDependencies" : {
        "grunt" :   "~0.4.0"
    }
}

完成后，運(yùn)行如下命令：

 npm install

告訴npm所需的依賴關(guān)系，然后把它們安裝在node_modules目錄中。這個(gè)時(shí)候，你的項(xiàng)目的根目錄下會(huì)新增加一個(gè)node_modules的目錄：

創(chuàng)建Gruntfile.js文件

Gruntfile.js本質(zhì)上是一個(gè)包裝后函數(shù)，參數(shù)是grunt。

module.exports =function(grunt){ 
    grunt.initConfig({ 
        pkg: grunt.file.readJSON('package.json') 
    }); 
    grunt.registerTask('default',[]); 
};

現(xiàn)在可以在項(xiàng)目根根目錄下運(yùn)行Grunt命令。但是在這個(gè)階段你這樣做，你將會(huì)看到以下的警告信息：

grunt
> Task "default" not found. Use --force to continue.

得到這樣的信息是因?yàn)槲覀兂薌runt之外沒(méi)有指定任何任務(wù)和依賴。所以，我們必須得制定。但首先，讓我們看看如何擴(kuò)展package.json文件。

擴(kuò)展package.json文件

最好是通過(guò)Node.js來(lái)處理，它可以找到安裝包并將他們一次性安裝，而且只基于包文件的內(nèi)容。為了安裝所有的依賴項(xiàng)，只需要在文件中添加下面的內(nèi)容：

{
	"name": "SampleGrunt",
	"version": "0.1.0",
	"author": "Mike Cunsolo",
	"private": true,
	"devDependencies": {
		"grunt": "~0.4.0",
		"grunt-contrib-cssmin": "*",
		"grunt-contrib-sass": "*",
		"grunt-contrib-uglify": "*",
		"grunt-contrib-watch": "*",
		"grunt-cssc": "*",
		"grunt-htmlhint": "*",
		"matchdep": "*"
	}
}

輸入以下命令：

npm install

在Grunt中加載npm任務(wù)

現(xiàn)在任務(wù)包已安裝好了，他們已經(jīng)加載到Grunt中。使用matchdep我們可以使用一行代碼加載所有的任務(wù)。這是很好的一點(diǎn)，因?yàn)楝F(xiàn)在依賴關(guān)系的列表都只包括了包文件。 在Gruntfile.js的頂部grunt.initConfig上面粘貼下面的一段代碼： 

require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);

沒(méi)有matchdep，我們需要為每個(gè)依賴關(guān)系寫(xiě)grunt.loadNpmTasks('grunt-task-name'), matchdep提高了增加和安裝其他插件的速度。插件加載到Grunt中，我們有可能會(huì)指定選項(xiàng)。首先是HTML文件(index.html)，包含下面的內(nèi)容：

    

        
        

        

        

    

    

        Enter your first name
        
        


        

    

使用HTMLHint驗(yàn)證

在grunt.initConfig中添加這樣的配置：

htmlhint: {
    build: {
        options: {
            'tag-pair': true,
            'tagname-lowercase': true,
            'attr-lowercase': true,
            'attr-value-double-quotes': true,
            'doctype-first': true,
            'spec-char-escape': true,
            'id-unique': true,
            'head-script-disabled': true,
            'style-disabled': true
        },
        'src': ['index.html']
    }
}

一個(gè)插件的配置通常是這樣的：插件的名稱(不帶grunt-contrib-/grunt-前綴)，然后是選擇的一個(gè)或更多的目標(biāo)（可以用于創(chuàng)建自定義插件的文件），一個(gè)options對(duì)象和這個(gè)文件作用效果?，F(xiàn)在你在終端運(yùn)行g(shù)runt htmlhint，它會(huì)查看源文件，并確保我們的HTML沒(méi)有錯(cuò)誤！然而，一小時(shí)手動(dòng)輸入這個(gè)命令數(shù)次，會(huì)讓你的工作很快變得乏味。

每次保存文件自動(dòng)化運(yùn)行任務(wù)

watch任務(wù)是一個(gè)可以根據(jù)被保存的文件運(yùn)行獨(dú)特的任務(wù)。在grunt.initConfig加入下面的代碼：

watch: {
    html: {
        files: ['index.html'],
        tasks: ['htmlhint']
    }
}

現(xiàn)在，在終端中運(yùn)行g(shù)runt watch。給index.html中添加一個(gè)注釋，就會(huì)發(fā)現(xiàn)當(dāng)保存文件是，驗(yàn)證的任務(wù)會(huì)自動(dòng)執(zhí)行。這對(duì)開(kāi)發(fā)者來(lái)說(shuō)是一個(gè)很好的工具，因?yàn)楫?dāng)你寫(xiě)代碼時(shí)watch會(huì)默默的執(zhí)行，如果沒(méi)有通過(guò)相應(yīng)的測(cè)試，就會(huì)報(bào)錯(cuò)（還會(huì)告訴你錯(cuò)誤的原因是什么）。

注意 grunt watch會(huì)繼續(xù)運(yùn)行除非你手動(dòng)停止（Mac上使用control + C）

盡可能讓JavaScript文件小

讓我們創(chuàng)建一個(gè)JavaScript文件來(lái)驗(yàn)證一個(gè)用戶名。盡可能簡(jiǎn)單，將檢查的只是非字母字符。我們也會(huì)利用JavaScript的strict模式，它阻止我們寫(xiě)有效但質(zhì)量差的JavaScript。把下面的代碼粘貼到assets/js/base.js:

function Validator()
{
    "use strict";
}

Validator.prototype.checkName = function(name)
{
    "use strict";
    return (/[^a-z]/i.test(name) === false);
};

window.addEventListener('load', function(){
    "use strict";
    document.getElementById('firstname').addEventListener('blur', function(){
        var _this = this;
        var validator = new Validator();
        var validation = document.getElementById('namevalidation');
        if (validator.checkName(_this.value) === true) {
            validation.innerHTML = 'Looks good! :)';
            validation.className = "validation yep";
            _this.className = "yep";
        }
        else {
            validation.innerHTML = 'Looks bad! :(';
            validation.className = "validation nope";
            _this.className = "nope";
        }

    });
});

我們使用UglifyJS來(lái)壓縮這個(gè)文件，在grunt.initConfig中加入下面代碼：

uglify: {
    build: {
        files: {
            'build/js/base.min.js': ['assets/js/base.js']
        }
    }
}

UglifyJS壓縮源文件中所有的變量和函數(shù)名，讓文件盡可能少的占用空間，然后去掉空白和注釋——非常適合用于生產(chǎn)的JavaScript。接著，我們需要為我們的Uglify的JavaScript創(chuàng)建一個(gè)watch任務(wù)。將下面的代碼添加到watch配置中：

watch: {
    js: {
        files: ['assets/js/base.js'],
        tasks: ['uglify']
    }
}

從Sass源文件創(chuàng)建CSS

Sass用來(lái)處理CSS是令人難以置信的有用，特別是在一個(gè)團(tuán)隊(duì)。通常在源文件中寫(xiě)更少的代碼，因?yàn)镾ass可以使用函數(shù)和變量產(chǎn)生大的CSS代碼塊。如何使用Sass本身有點(diǎn)超出了本文的范圍，所以，在這個(gè)階段你還不習(xí)慣和學(xué)習(xí)一個(gè)預(yù)處理器，你可以跳過(guò)這一節(jié)。我們將介紹一個(gè)非常簡(jiǎn)單的用例，使用具有變量和混合的SCSS，這非常類似于CSS!

Grunt的Sass插件需要sass gem。你將需要在你的系統(tǒng)上安裝Ruby(Mac 上已經(jīng)預(yù)裝了)。你可以在你的終端使用下面的命令檢查你的系統(tǒng)是否安裝了Ruby：

ruby -v

通過(guò)命令安裝Sass

gem install sass

根據(jù)您的配置，你可以需要通過(guò)sudo命令來(lái)運(yùn)行這個(gè)命令——例如sudo gem install sass——這個(gè)時(shí)候終端會(huì)要求你輸入你的電腦登錄密碼。當(dāng)Sass安裝好后，創(chuàng)建一個(gè)新的目錄叫作assets，并在里面創(chuàng)建另一個(gè)叫sass目錄。在這個(gè)目錄中創(chuàng)建一個(gè)新的文件名master.scss，并將下面的代碼粘貼進(jìn)行：

@mixin prefix($property, $value, $prefixes: webkit moz ms o spec) {
    @each $p in $prefixes {
        @if $p == spec {
            #{$property}: $value;
        }
        @else {
            -#{$p}-#{$property}: $value;
        }
    }
}
$input_field:            #999;
$input_focus:           #559ab9;
$validation_passed:     #8aba56;
$validation_failed:     #ba5656;
$bg_colour:             #f4f4f4;
$box_colour:            #fff;
$border_style:          1px solid;
$border_radius:         4px;

html {
    background:         $bg_colour;
}

body {
    width:              720px;
    padding:            40px;
    margin:             80px auto;
    background:         $box_colour;
    box-shadow:         0 1px 3px rgba(0, 0, 0, .1);
    border-radius:      $border_radius;
    font-family:        sans-serif;
}

input[type="text"] {
    @include            prefix(appearance, none, webkit moz);
    @include            prefix(transition, border .3s ease);
    border-radius:      $border_radius;
    border:             $border_style $input_field;
    width:              220px;
}

input[type="text"]:focus {
    border-color:       $input_focus;
    outline:            0;
}

label,
input[type="text"],
.validation {
    line-height:        1;
    font-size:          1em;
    padding:            10px;
    display:            inline;
    margin-right:       20px;
}

input.yep {
    border-color:       $validation_passed;
}

input.nope {
    border-color:       $validation_failed;
}

p.yep {
    color:              $validation_passed;
}

p.nope {
    color:              $validation_failed;
}

你將發(fā)現(xiàn)SCSS擴(kuò)展起來(lái)比傳統(tǒng)的Sass更像CSS。這個(gè)樣式表中使用了Sass的兩個(gè)特性：混合(mixins)和變量(variables)。Mixins就像一個(gè)函數(shù)，可以將一些參數(shù)傳遞給它，用來(lái)構(gòu)造CSS塊，然后重用。

變量是特別有用的十六進(jìn)制顏色，我們可以是構(gòu)建一個(gè)調(diào)色板，可以在一個(gè)地方改變，非?？斓恼{(diào)整整個(gè)方面設(shè)計(jì)。Mixin可以用于前綴等規(guī)則上，例如appearance和transition等屬性，它可以減少寫(xiě)很多重復(fù)性代碼。

在處理大型樣式表時(shí)，當(dāng)一個(gè)團(tuán)隊(duì)的其他成員想要更新一個(gè)樣式，什么方法可以減少行數(shù)使用文件易于閱讀。

除了Sass，Grunt-cssc和CSS規(guī)則結(jié)合在一起，確保生成的CSS有最和的重復(fù)代碼。在中大型項(xiàng)目是有很多風(fēng)格是重復(fù)的，這顯得非常的有用。然而，輸出的文件并不總是總小的。這樣就出現(xiàn)了cssmin任務(wù)。它不僅可以去掉代碼中的空格，而且琮可以將顏色轉(zhuǎn)換成最短值(因此，white將轉(zhuǎn)換成#fff)。在Gruntfile.js中加入下面的任務(wù)：

cssc: {
    build: {
        options: {
            consolidateViaDeclarations: true,
            consolidateViaSelectors:    true,
            consolidateMediaQueries:    true
        },
        files: {
            'build/css/master.css': 'build/css/master.css'
        }
    }
},

cssmin: {
    build: {
        src: 'build/css/master.css',
        dest: 'build/css/master.css'
    }
},

sass: {
    build: {
        files: {
            'build/css/master.css': 'assets/sass/master.scss'
        }
    }
}

現(xiàn)在，我們有一些在適當(dāng)?shù)牡胤教幚順邮奖?，這些任務(wù)也應(yīng)該自動(dòng)運(yùn)行。build目錄是Grunt自動(dòng)創(chuàng)建的，用來(lái)放置腳本，CSS和(如果這是一個(gè)完整的網(wǎng)站)壓縮圖像。這意味著assets目錄是用于放置開(kāi)發(fā)的文件，里面文件內(nèi)容有可能有大量的注釋或很多文件，然而build目錄，是用來(lái)放置用于生產(chǎn)環(huán)境所需的文件，里面只留下了心樣能優(yōu)化后的文件。

我們將定義一組新的任務(wù)來(lái)處理CSS。在gruntfile.js中添加下面的代碼，下面是默認(rèn)的task:

grunt.registerTask('buildcss',  ['sass', 'cssc', 'cssmin']);

現(xiàn)在，當(dāng)運(yùn)行g(shù)runt buildcss，所有CSS任務(wù)將一個(gè)接一個(gè)執(zhí)行。這遠(yuǎn)比運(yùn)行g(shù)runt sass,接著grunt cssc，接著grunt cssmin更快。我們可以通過(guò)配置watch做所有更新，自動(dòng)運(yùn)行。

watch: {
    css: {
        files: ['assets/sass/**/*.scss'],
        tasks: ['buildcss']
    }
}

這路徑你看起來(lái)有點(diǎn)奇怪。基本上，它會(huì)依次檢查assets/sass目錄下所有目錄中的.scss文件，它充行我們創(chuàng)建盡可能多的Sass文件，而無(wú)需在gruntfile.js中添加路徑。添加這個(gè)之后，gruntfile.js將會(huì)像下面這樣：

module.exports = function(grunt){

    "use strict";
   require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);

    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        cssc: {
            build: {
                options: {
                    consolidateViaDeclarations: true,
                    consolidateViaSelectors:    true,
                    consolidateMediaQueries:    true
                },
                files: {
                    'build/css/master.css': 'build/css/master.css'
                }
            }
        },

        cssmin: {
            build: {
                src: 'build/css/master.css',
                dest: 'build/css/master.css'
            }
        },

        sass: {
            build: {
                files: {
                    'build/css/master.css': 'assets/sass/master.scss'
                }
            }
        },

        watch: {
            html: {
                files: ['index.html'],
                tasks: ['htmlhint']
            },
            js: {
                files: ['assets/js/base.js'],
                tasks: ['uglify']
            },
            css: {
                files: ['assets/sass/**/*.scss'],
                tasks: ['buildcss']
            }
        },

        htmlhint: {
            build: {
                options: {
                    'tag-pair': true,
// Force tags to have a closing pair
                    'tagname-lowercase': true,
// Force tags to be lowercase
                    'attr-lowercase': true,
// Force attribute names to be lowercase e.g.  is invalid
                    'attr-value-double-quotes': true,
// Force attributes to have double quotes rather than single
                    'doctype-first': true,
// Force the DOCTYPE declaration to come first in the document
                    'spec-char-escape': true,
// Force special characters to be escaped
                    'id-unique': true,
// Prevent using the same ID multiple times in a document
                    'head-script-disabled': true,
// Prevent script tags being loaded in the  for performance reasons
                    'style-disabled': true
// Prevent style tags. CSS should be loaded through 
                },
                src: ['index.html']
            }
        },

        uglify: {
            build: {
                files: {
                    'build/js/base.min.js': ['assets/js/base.js']
                }
            }
        }

    });

    grunt.registerTask('default',   []);
    grunt.registerTask('buildcss',  ['sass', 'cssc', 'cssmin']);

};

我們現(xiàn)在有一個(gè)靜態(tài)的HTML頁(yè)面，一個(gè)放了Sass和JavaScript資源的assets目錄，以及一個(gè)放了整理的CSS和JavaScript文件在build目錄中，以及一個(gè)package.json和gruntfile.js文件。

現(xiàn)在，你應(yīng)該有一個(gè)很堅(jiān)實(shí)的基礎(chǔ)，可以進(jìn)一步探討Grunt。正如前面所提到的，一個(gè)令人難以置信的活躍的開(kāi)發(fā)者社區(qū)在不斷的提供前端插件。我的建議是，請(qǐng)到插件庫(kù)查閱這300多個(gè)插件。