用grunt搭建自動化的web前端開發環境-完整教程

你沒有理由不學、不用！ jQuery在使用grunt，bootstrap在使用grunt，百度UEditor在使用grunt，

grunt是一套前端自動化工具，一個基於nodeJs的命令行工具，通常用於：壓縮文件，合併文件，簡單語法檢查。
GRUNT JavaScript 世界的構建工具

爲什麼要用構建工具？

一句話：自動化。對於須要反覆重複的任務，例如壓縮（minification）、編譯、單元測試、linting等，自動化工具能夠減輕你的勞動，簡化你的工做。當你在 Gruntfile 文件正確配置好了任務，任務運行器就會自動幫你或你的小組完成大部分無聊的工做。

爲何要使用Grunt？

Grunt生態系統很是龐大，而且一直在增加。因爲擁有數量龐大的插件可供選擇，所以，你能夠利用Grunt自動完成任何事，而且花費最少的代價。若是找不到你所須要的插件，那就本身動手創造一個Grunt插件，而後將其發佈到npm上吧。

可用的Grunt插件

你所須要的大多數task都已經做爲Grunt插件被開發了出來，而且天天都有更多的插件誕生。插件列表頁面列出了完整的清單。
Grunt和 Grunt 插件是經過 npm 安裝並管理的，npm是 Node.js 的包管理器。
提早感覺一下 Grunt 吧！
安裝 grunt 雖然很簡單，更多涉及到如何運行項目。看看下面的演示

第一步 確定是要安裝Nodejs的啦，方法能夠看我上篇的VUE裏面有介紹

第二步 安裝grunt-CLI

「CLI」被翻譯爲「命令行」。要想使用grunt，首先必須將grunt-cli安裝到全局環境中，使用nodejs的「npm install…」進行安裝。
輸入：**npm install -g grunt-cli**
注意，mac os 系統、部分linux系統中，在這句話的前面加上「sudo 」指令。

像介個樣子呢 就是安裝成功了

第三步 建立一個簡單的網站

藍後，重點來了，增長倆個文件夾

package.json增長點內容

「devDependencies」是什麼意思？字面意思解釋是「開發依賴項」，即咱們如今這個系統，將會依賴於哪些工具來開發。如今代碼一行都沒有寫，依賴於誰？誰也不依賴！因此，就先寫一個空對象。可是下文會慢慢把它填充起來

第四步 安裝grunt

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

運行完後 有倆個地方會發生改變
第一個 ** "grunt": "^1.0.1",**

第二個 **多了一個文件夾**

而後你在控制檯運行「grunt」命令。
若是你獲得一個warning提示，那說明grunt已經起做用了。以下圖：

若是出現這個，說明grunt已經在這個目錄下成功安裝。
那麼，爲什麼咱們在剛纔執行grunt時候會有Warning提示呢？根據提示，咱們得知的信息是：Task 「default」 not found ，如何搞定這個問題？——固然是繼續往下看啊。

第五步 配置Gruntfile.js

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

    //任務配置，全部插件的配置信息
    grunt.initConfig({

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

        

    });



    //告訴grunt當咱們在終端中輸入grunt時須要作什麼 注意前後順序
    grunt.registerTask('default', ['jshint','uglify','watch']);


};

grunt集全世界web前端開發的智慧於一身，比你想一想的更增強大，它的插件庫能應對你在web前端開發遇到的任何事情。

第六步 使用grunt插件

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

看出來我上圖哪裏錯了麼，uglify 打成uplify ,還連着打錯三四遍真是造孽哇，真的是要被本身蠢哭3W遍，大家命令單詞可必定要看清楚哦

命令執行完以後 看下圖

多了個 "grunt-contrib-uglify": "^3.0.1"

咱們既然要使用uglify來壓縮javascript代碼，固然得建立一個js文件來作實驗。咱們在現有的「src」文件夾中新建一個「test.js」，並隨便寫一些代碼

測試文件創建好了。咱們接下來就要把這個js文件進行壓縮。
固然，要壓縮誰？往哪裏壓縮？這些都須要配置，在Gruntfile.js中配置。分爲三步：
第一步，在grunt.initConfig方法中配置 uglify 的配置參數。以下圖：

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

    //任務配置，全部插件的配置信息
    grunt.initConfig({

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

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

       

    });



};

第二步，在 grunt.initConfig 方法以後，要讓grunt去加載這一個插件。光配置了，不加載上，如何用啊？

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

//告訴grunt當咱們在終端中輸入grunt時須要作什麼 注意前後順序
grunt.registerTask('default', ['uglify');

在控制檯中運行grunt命令,並能夠去build文件目錄下查看是否有一個被壓縮的js文件

以上就是uglify插件的詳細安裝、配置說明。Javascript使用uglify壓縮，css可以使用cssmin插件壓縮。安裝、配置方法同樣的，再也不贅述。

今天就寫到這裏吧 本寶寶情緒不佳 等心情變美麗了繼續接着寫 嗚哇 下班要去吃小龍蝦才能拯救我這顆不美麗的當心臟