摘要：世界的構(gòu)建工具為何要用構(gòu)建工具一句話自動(dòng)化。由于擁有數(shù)量龐大的插件可供選擇，因此，你可以利用自動(dòng)完成任何事，并且花費(fèi)最少的代價(jià)。要想使用，首先必須將安裝到全局環(huán)境中，使用的進(jìn)行安裝。

grunt是一套前端自動(dòng)化工具，一個(gè)基于nodeJs的命令行工具，一般用于：壓縮文件，合并文件，簡(jiǎn)單語(yǔ)法檢查。
GRUNT JavaScript 世界的構(gòu)建工具

一句話：自動(dòng)化。對(duì)于需要反復(fù)重復(fù)的任務(wù)，例如壓縮（minification）、編譯、單元測(cè)試、linting等，自動(dòng)化工具可以減輕你的勞動(dòng)，簡(jiǎn)化你的工作。當(dāng)你在 Gruntfile 文件正確配置好了任務(wù)，任務(wù)運(yùn)行器就會(huì)自動(dòng)幫你或你的小組完成大部分無(wú)聊的工作。

Grunt生態(tài)系統(tǒng)非常龐大，并且一直在增長(zhǎng)。由于擁有數(shù)量龐大的插件可供選擇，因此，你可以利用Grunt自動(dòng)完成任何事，并且花費(fèi)最少的代價(jià)。如果找不到你所需要的插件，那就自己動(dòng)手創(chuàng)造一個(gè)Grunt插件，然后將其發(fā)布到npm上吧。

你所需要的大多數(shù)task都已經(jīng)作為Grunt插件被開(kāi)發(fā)了出來(lái)，并且每天都有更多的插件誕生。插件列表頁(yè)面列出了完整的清單。
Grunt和 Grunt 插件是通過(guò) npm 安裝并管理的，npm是 Node.js 的包管理器。
提前感受一下 Grunt 吧！
安裝 grunt 雖然很簡(jiǎn)單，更多涉及到如何運(yùn)行項(xiàng)目。看看下面的演示

“CLI”被翻譯為“命令行”。要想使用grunt，首先必須將grunt-cli安裝到全局環(huán)境中，使用nodejs的“npm install…”進(jìn)行安裝。
輸入：**npm install -g grunt-cli**
注意，mac os 系統(tǒng)、部分linux系統(tǒng)中，在這句話的前面加上“sudo ”指令。

像介個(gè)樣子呢 就是安裝成功了

藍(lán)后，重點(diǎn)來(lái)了，增加倆個(gè)文件夾

package.json增加點(diǎn)內(nèi)容

“devDependencies”是什么意思？字面意思解釋是“開(kāi)發(fā)依賴項(xiàng)”，即我們現(xiàn)在這個(gè)系統(tǒng)，將會(huì)依賴于哪些工具來(lái)開(kāi)發(fā)?，F(xiàn)在代碼一行都沒(méi)有寫(xiě)，依賴于誰(shuí)？誰(shuí)也不依賴！所以，就先寫(xiě)一個(gè)空對(duì)象。但是下文會(huì)慢慢把它填充起來(lái)

輸入**npm install grunt --save-dev**

運(yùn)行完后 有倆個(gè)地方會(huì)發(fā)生改變
第一個(gè) ** "grunt": "^1.0.1",**

第二個(gè) **多了一個(gè)文件夾**

然后你在控制臺(tái)運(yùn)行“grunt”命令。
如果你得到一個(gè)warning提示，那說(shuō)明grunt已經(jīng)起作用了。如下圖：

如果出現(xiàn)這個(gè)，說(shuō)明grunt已經(jīng)在這個(gè)目錄下成功安裝。
那么，為何我們?cè)趧偛艌?zhí)行g(shù)runt時(shí)候會(huì)有Warning提示呢？根據(jù)提示，我們得知的信息是：Task “default” not found ，如何搞定這個(gè)問(wèn)題？——當(dāng)然是繼續(xù)往下看啊。

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

    //任務(wù)配置，所有插件的配置信息
    grunt.initConfig({

        //獲取 package.json 的信息
        pkg: grunt.file.readJSON("package.json"),

        

    });



    //告訴grunt當(dāng)我們?cè)诮K端中輸入grunt時(shí)需要做什么 注意先后順序
    grunt.registerTask("default", ["jshint","uglify","watch"]);


};

grunt集全世界web前端開(kāi)發(fā)的智慧于一身，比你想想的更加強(qiáng)大，它的插件庫(kù)能應(yīng)對(duì)你在web前端開(kāi)發(fā)遇到的任何事情。

1.使用uglify插件（壓縮javascript代碼）
輸入**npm install grunt-contrib-uglify --save-dev**

看出來(lái)我上圖哪里錯(cuò)了么，uglify 打成uplify ,還連著打錯(cuò)三四遍真是造孽哇，真的是要被自己蠢哭3W遍，你們命令單詞可一定要看清楚哦

命令執(zhí)行完之后 看下圖

多了個(gè) "grunt-contrib-uglify": "^3.0.1"

我們既然要使用uglify來(lái)壓縮javascript代碼，當(dāng)然得創(chuàng)建一個(gè)js文件來(lái)做實(shí)驗(yàn)。我們?cè)诂F(xiàn)有的“src”文件夾中新建一個(gè)“test.js”，并隨便寫(xiě)一些代碼

測(cè)試文件建立好了。我們接下來(lái)就要把這個(gè)js文件進(jìn)行壓縮。
當(dāng)然，要壓縮誰(shuí)？往哪里壓縮？這些都需要配置，在Gruntfile.js中配置。分為三步：
第一步，在grunt.initConfig方法中配置 uglify 的配置參數(shù)。如下圖：

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

    //任務(wù)配置，所有插件的配置信息
    grunt.initConfig({

        //獲取 package.json 的信息
        pkg: grunt.file.readJSON("package.json"),

        //uglify插件的配置信息：用來(lái)壓縮javascript文件
        uglify: {
            options: {
                stripBanners: true,
                banner: "/*! <%= pkg.name %> */
/*! <%= pkg.version %> <%= grunt.template.today("yyyy-mm-dd") %> */
",
            },
            build: {
                src: "src/test.js",
                dest: "build/<%= pkg.name%>-<%= pkg.version%>.js.min.js"
            }
        },

       

    });



};

第二步，在 grunt.initConfig 方法之后，要讓grunt去加載這一個(gè)插件。光配置了，不加載上，如何用??？

//告訴grunt我們將使用插件
grunt.loadNpmTasks("grunt-contrib-uglify");
  

//告訴grunt當(dāng)我們?cè)诮K端中輸入grunt時(shí)需要做什么 注意先后順序
grunt.registerTask("default", ["uglify");

在控制臺(tái)中運(yùn)行g(shù)runt命令,并可以去build文件目錄下查看是否有一個(gè)被壓縮的js文件

以上就是uglify插件的詳細(xì)安裝、配置說(shuō)明。Javascript使用uglify壓縮，css可使用cssmin插件壓縮。安裝、配置方法一樣的，不再贅述。

今天就寫(xiě)到這里吧
本寶寶情緒不佳
等心情變美麗了繼續(xù)接著寫(xiě)
嗚哇 下班要去吃小龍蝦才能拯救我這顆不美麗的小心臟