如何使用Grunt（好文）

時間 2019-11-12

標籤如何使用 grunt 欄目 Node.js 简体版

原文原文鏈接

Grunt 是什麼？javascript

Grunt 基於Node.js之上，是一個以任務處理爲基礎的命令行工具，能夠減小優化開發版本爲發佈版本所需的人力和時間，從而加速開發流程。它的工做原理是把這些工做整合爲不一樣的任務，在你開發時自動執行。基本上，你可讓Grunt完成任何讓你厭煩的任務：那些你須要重複進行的手工設置和運行發佈的任務。css

工具/原料

NodeJs
Windows系統

方法/步驟

要使用Grunt，第一件事是安裝Node.js。（即便你沒用過Node.js也不用擔憂——你只需安裝它讓Grunt能運行。）html

安裝了Node.js以後，用命令行工具執行如下命令：前端

$ npm install -g grunt-clijava

要確認Grunt是否正確安裝，可使用如下命令：node

$ grunt --versionnpm
下一步是在你的項目的根目錄下建立package.json和gruntfile.js兩個文件。json

建立package.json文件sass

這個JSON文件讓咱們指定咱們的開發環境所依賴的必須模塊。有了它，項目的全部開發者都能保證安裝上一致的必須模塊，從而保證全部人擁有同樣的開發環境。app

在項目根目錄下的pacakge.json文件中寫上：

{

    "name" : "SampleGrunt",

    "version" : "0.1.0",

    "author" : "Brandon Random",

    "private" : true,

    "devDependencies" : {

        "grunt" :                   "~0.4.0"

    }

}

而後在命令行工具運行：

$ npm install

該命令告訴npm 須要安裝的必須模塊，npm會安裝它們，自動保存在項目根目錄下一個叫作 node_modules 的文件夾裏。

建立gruntfile.js文件

gruntfile.js 文件本質上就是一個wrapper函數，接受grunt做爲參數：

module.exports = function(grunt){

    grunt.initConfig({

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

    });

    grunt.registerTask('default', []);

};

如今你已經能夠在項目根目錄下運行grunt命令行工具了。

$ grunt

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

這裏咱們只指定了Grunt做爲必須模塊，還沒定義任何任務。接下來咱們就要指定任務和必須模塊。首先來看如何拓展package.json文件。
拓展package.json文件

使用Node.js最好的一點，就是它能夠根據package.json文件的內容，一次性查找和安裝多個package。要安裝咱們項目的全部必須任務，只須在package.json文件中加上如下內容：

{

    "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載入任務

package安裝好後，還必須被Grunt載入才能爲咱們所用。使用 matchdep，咱們用一行代碼就能夠自動載入全部任務。這是開發流程的一大優化，由於如今咱們只須把必須任務列表寫在package.json一個文件裏，便於管理。

在gruntfile.js裏，grunt.initConfig之上，寫上如下代碼：

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

要是沒有matchdep，咱們就必須爲每個必須任務寫一次grunt.loadNpmTasks(「grunt-task-name」); ，隨着咱們使用的任務的增長，這些載入任務的代碼很快就會變得至關繁冗。在Grunt載入這些任務前，咱們還能夠指定設置選項。
如今咱們須要建立咱們的HTML文件（index.html）：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <meta name="viewport"   content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

        <title>Enter your first name</title>

        <link rel="stylesheet" href="build/css/master.css">

    </head>

    <body>

        <label for="firstname">Enter your first name</label>

        <input id="firstname" name="firstname" type="text">

        <p id="namevalidation" class="validation"></p>

        <script type="text/javascript" src="build/js/base.min.js"></script>

    </body>

</html>
用HTMLHint驗證HTML

在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']

    }

}

一般來講，一個plugin的設置方法以下：plugin的名稱（去掉grunt-contrib-或grunt-前綴），選擇使用此plugin的一個或多個對象（在這裏能夠給不一樣文件設置此plugin 的不一樣選項），一個選項object，以及plugin要做用的對象。如今，若是咱們用命令行工具運行grunt htmlhint，該plugin就會檢查咱們在src裏指定的HTML文件，驗證其中有沒有錯誤！可是每一個小時都要手動運行幾回這個任務，很快就讓人以爲很繁瑣了。
自動化任務運行

watch是一個特殊的任務，它能夠在目標文件保存時自動觸發一系列任務的運行。在grunt.initConfig里加入如下設置：

watch: {

    html: {

        files: ['index.html'],

        tasks: ['htmlhint']

    }

}

然後，在命令行工具中運行grunt watch命令。如今，你能夠試試在index.html里加一行註釋，保存文件。你會注意到，保存文件時會自動觸發 HTML的驗證！這是對開發流程的一大優化：在你寫代碼時，watch任務就會默默同時爲你驗證代碼，若是驗證失敗任務就會報告失敗（它還會告訴你問題在哪）。

注意grunt watch任務會一直運行，直到命令行工具關閉，或手動中止（control+c在Mac中)。
保持JavaScript極簡

讓咱們來寫一個驗證用戶輸入的名字的JavaScript文件。簡便起見，咱們這裏只檢查其中是否含有非字母的字符。咱們的JavaScript會使用 strict模式，這能夠防止咱們寫可用但低質量的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來極簡化這個源代碼，在grunt.initConfig中加上如下設置：

uglify: {

    build: {

        files: {

            'build/js/base.min.js': ['assets/js/base.js']

        }

    }

}

UglifyJS會替換全部的變量和函數名，剔除全部空白和註釋，從而生成佔據最小空間的JavaScript文件，對發佈很是有用。一樣地，咱們須要設置一個watch任務來使用它，在watch的設置里加入如下代碼：

watch: {

    js: {

        files: ['assets/js/base.js'],

        tasks: ['uglify']

    }

}
如今咱們有了一個靜態HTML頁面，一個存放Sass和JavaScript源文件的assets文件夾，一個存放優化後的CSS和JavaScript的build文件夾，以及package.json文件和gruntfile.js文件。

至此你已經有了一個不錯的基礎來進一步探索Grunt。像以前提到的，一個很是活躍的開發者社區在爲Grunt開發前端plugin。我建議你如今就到plugin library 去看看那300個以上的plugin。

END