一天掌握前端三大構建化工具Grunt、Gulp、Webpack（上）

時間 2019-11-06

標籤一天 1天掌握前端三大構建工具 grunt gulp webpack 欄目 Node.js 简体版

原文原文鏈接

一、概念理解【預計5分鐘】：

爲何要講下這三大工具，Grunt/Gulp/Webpack的做用又是什麼？有什麼好處嗎？javascript

答：首先說下咱們都瞭解jquery,可是咱們下載的時候一般在官網會看到兩種文件，如圖：css

這個時候有兩個文件，jquery-3.0.0.js 和 jquery-3.0.0.min.js 其實這兩個文件是如出一轍，裏面的功能和方法，主要區別是一個是258kb，另一個是85kb，爲何功能同樣可是一個是258kb，另一個是85kb呢，請看下面兩張圖：html

這一張是jquery-3.0.0.js 內部結構圖前端

下面一張是jquery-3.0.0.min.jshtml5

最後看到區別了嗎，min表明的是佔用最小的空間，爲項目提升性能上，因此咱們通常的話項目上線會用到jquery-3.0.0.min.js這樣的文件，可是通常開發中咱們也會用到jquery-3.0.0.js 結構清晰的文件，主要是由於咱們可以方便學習看jquery的代碼，有助於咱們開發項目，若是jquery已經很熟練了，你就能夠在開發項目的時候直接用到打了包的jquery-3.0.0.min.js，由於在響應速度上會提升。java

同理，前端攻城獅在本身寫css、js、less等相關文件的時候，項目上線若是測試沒有bug，客戶比較滿意，咱們都會直接把前端攻城獅寫的css、js等相關文件打包，這樣在速度性能上就會相應的提升很多，而咱們怎麼實現這樣的功能，就涉及到了今天講到的三個構建化工具，Grunt、Gulp、Webpack,功能相似，如今最火的是Gulp和Webpack。node

******固然還要講一下，html這種文件是不能打包的*********jquery

二、環境準備【大約45分鐘】：

2.一、個人出發點是針對java後端開發程序員，因此有些思路都是從java角度來說

2.二、前端開發工具的準備： WebStorm 【預計最長15分鐘】

官網下載地址：https://www.jetbrains.com/webstorm/ 而後點擊 Download git

安裝過程：博客指導==》 http://blog.csdn.net/u011781521/article/details/53558979程序員

2.三、NodeJs 環境（它自帶npm，而咱們須要用到npm，下載最新版本 8以上就能夠，若是不是這個版本請更新，由於接下來將的構建化工具也是最新版本的，因此須要nodejs最新版本的支持）【預計最長30分鐘】

官網下載地址：http://nodejs.cn/download/windows 就去下載後綴名是 .msi

安裝過程：它的和java jdk 安裝相似 https://www.cnblogs.com/lsgxeva/p/7754365.html 這篇博客第四步驟就已經安裝成功了，第五步是安裝cnpm 由於nodejs 安裝成功自帶npm，由於nodejs是外國人開發，因此服務器在外國，因此npm這個服務器下載的速度可能會慢一些，因此須要下載一個在國內的服務器，也就是鏡像cnpm，在速度上更快，不過不下載也沒事，絕大多數體現不出來

三、瞭解工做：npm 【預計15分鐘懂意思就直接進入構建化工具講解】

3.1 、npm是幹什麼的？

nodejs 安裝成功自帶npm，npm的意思是node package manager node包管理工具，怎麼介紹呢？直接上圖，在java的工程中，lib下面的全部包 *.jar 一部分jdk自帶，一部分maven工具導入

在java中咱們除了jdk自帶的，剩下的就是經過maven導入，同理在前端工程中，咱們想要用到一些工具包或者框架包或者插件包，就須要用到npm來導入，npm就至關於maven的功能

3.二、npm的相關命令

（看一下就行，不用直接操做，一會將構建工具再試就能夠，有個對命令的預熱就好）

npm version

npm -v 查看版本

npm search 包名

npm install 包名【在當前目錄安裝包】

npm init 【初始化，建立package.json文件，至關於maven工具的pom文件】

npm remove 包名【刪除包】

npm install 包名 --save 安裝包並添加到package的依賴中【這行命令用的比較多】

npm install 【下載當前項目全部依賴的包通常github下載別人的項目，須要導入包，就是這個命令，那些依賴的包在package.json文件中提現】

剛建立項目的package.json:如圖

他其實就至關於maven工具的pom文件，添加依賴以後如圖，這是我從網上的截圖：

但願你們對 package.json 以及將要用到的npm有一個認識，

若是你想要知道package.json全部標籤的含義，看這個網址，不過我認爲看懂dependecies裏面依賴的包就能夠了：

http://javascript.ruanyifeng.com/nodejs/packagejson.html

四、建立工程【預計5分鐘】

WebStorm：file ->project --html5 建立

項目建立完成以後如圖，是一個空的項目：

接下來咱們建立三個文檔，分別來說解Grunt、Gulp、Webpack至關於java中的多個模塊工程同樣

三個空的文檔已經建立完成，進入工具詳解下一步。

五、Grunt詳解

簡介：基於nodeJs的命令行工具 npm 可對js，css等進行合併和壓縮，同時對js文件有檢查報錯的功能

首先建立一個簡單的應用，在建立的過程當中讓你們明白Grunt

在grunt_mjt文檔下建立

而後根目錄建立package.json ,文件夾grunt_mjt右鍵選擇建立package.json如圖：

看下位置：

在建立Gruntfile.js 只能是這個名字，首字母要大寫

最後項目結構圖：

這些文件也基本都是空的，接下來安裝Grunt ，這個時候就用到了 npm 的命令行，在哪裏使用這些命令行呢？

看WebStorm工具如圖，左下角：

出現這個項目的路徑

進入grunt_mjt這個文件夾下

接下來使用npm 命令下載依賴的包

1.首先全局安裝

npm install -g grunt-cli

2.安裝grunt

npm install grunt --save-dev （這個--save會常常用到，頻率是最高的一個）下載時間長一些，這個就是我剛剛講的多是npm在國外的緣由，cnpm可能會快一點。

而後在Gruntfile.js文件中添加內容：

module.exports = function(grunt){
    // 1. 初始化插件配置
    grunt.initConfig({
        //主要編碼處
    });
    // 2. 加載插件任務
    // grunt.loadNpmTasks('grunt-contrib-concat');
    // 3. 註冊構建任務
    grunt.registerTask('default', []);
};

必須添加，否則配置文件缺乏，grunt不能啓動，看是否成功，命令grunt，出現Done表示安裝成功

可是這個時候沒有安裝任何插件，這一點能夠再Gruntfile.js中體現，咱們只是單純的安裝了一個工具

接下來咱們安裝插件插件的做用的都有必定的功能，就是java中的類包同樣，在java中有的是提供時間的，有的是鏈接數據庫的，一樣，Grunt構建化工具的插件也有相似的功能，有的插件是壓縮js的，有的是合併js等文件的，接下來介紹幾個，並交你們如何使用

grunt-contrib-clean——清除文件(打包處理生成的)
grunt-contrib-concat——合併多個文件的代碼到一個文件中
grunt-contrib-uglify——壓縮js文件
grunt-contrib-jshint——javascript語法錯誤檢查；
grunt-contrib-cssmin——壓縮/合併css文件
grunt-contrib-htmlmin——壓縮html文件
grunt-contrib-imagemin——壓縮圖片文件(無損)
grunt-contrib-copy——複製文件、文件夾
grunt-contrib-requirejs**——合併壓縮requirejs管理的全部js模塊文件
grunt-contrib-watch——實時監控文件變化、調用相應的任務從新執行

接下來怎麼使用這些插件，安裝過程都是同樣的，我舉例兩三個給你們看一看

進入Grunt官網 http://www.gruntjs.net/plugins

點擊插件列表

這都是全部的插件，而後點擊插件列表中的任何一個，接下來咱們講

grunt-contrib-concat——合併多個文件的代碼到一個文件中

這個插件，而後搜索這個插件，進入這個插件的詳情頁面，grunt是一個官網名字的前綴，因此咱們通常在搜索插件的時候只搜索後面的關鍵字就能夠了，好比：contrib-concat

而後進入該插件的詳情頁，咱們進入他的詳情頁面主要是由於它給了咱們許多提示,如圖：

這個Getting Started下面的兩行代碼分別對應的是安裝和在配置文件的任務，一樣是安裝這個插件

一、npm install grunt-contrib-concat --save-dev

二、在js文件夾下面建立兩個js文件，如圖：

每一個js文件寫了對應的就函數，同時咱們在項目上線過程當中，若是想提升性能的話，固然是要合併咱們本身寫的js文件而後將它最大程度的壓縮。

因此這就用到了咱們剛剛那個詳情頁面的那些命令行，第一步已經安裝好了，接下來繼續看grunt-contrib-concat插件詳情頁的另一個標題，如圖Usage Examples：

它已經默認的給咱們舉了列子，該如何在Gruntfile.js文件中配置這個插件，接下來講一下他們的含義，這是我配置文件中的代碼，同時給出項目目錄結構，你們就可以很清楚的瞭解：

concat: {
    options: { //可選項配置
        separator: ';'   //使用;鏈接合併
    },
    build: { //此名稱任意
        src:  ["src/js/*.js"],  //合併哪些js文件
        dest: "mjt/js/mjt.js" //輸出的js文件
    }
}

3.配置插件在配置文件的屬性後，再繼續配置任務對他進行加載，這個任務是什麼，就是在咱們執行命令的時候須要一個指示，打個比方吧：咱們上面的合併，剛剛配置的屬性文件是這樣子的，

那麼咱們通常把前面的concat當作這個插件的任務名，而後把對這個任務名就行加載，怎麼作，剛剛咱們說了那個插件的詳情頁的代碼，如圖：

這行代碼就是加載任務，咱們把括號裏面的換成 concat就行了，最後對他註冊，整個配置文件配置圖：

這個就是在咱們合併js文件的插件的整個操做，而後在中斷執行grunt操做

就能夠對兩個文件進行合併了。

接下來說壓縮，怎麼壓縮呢，一樣的流程，去查找壓縮的插件在官網，而後進入詳情頁，一樣找到他的加載命令，加載任務命令，在Gruntfile.js配置的列子，我直接寫命令了，直接看。

一、安裝：npm install grunt-contrib-uglify --save-dev

二、配置屬性：

uglify: {
    my_target: {
        files: {
            'mjt/mjt.min.js': ['mjt/js/mjt.js']
        }
    }
}

三、加載任務：

grunt.loadNpmTasks('grunt-contrib-uglify');

四、註冊：

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

最終如圖：

module.exports = function(grunt){
    // 1. 初始化插件配置
    grunt.initConfig({
        //主要編碼處
        concat: {
            options: { //可選項配置
                separator: ';'   //使用;鏈接合併
            },
            build: { //此名稱任意
                src:  ["src/js/*.js"],  //合併哪些js文件
                dest: "mjt/js/mjt.js" //輸出的js文件
            }
        },
        uglify: {
            my_target: {
                files: {
                    'mjt/mjt.min.js': ['mjt/js/mjt.js']
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 2. 加載插件任務
    grunt.loadNpmTasks('grunt-contrib-concat');

    // 3. 註冊構建任務
    grunt.registerTask('default', ['concat','uglify']);
};

這是合併插件和解壓縮插件放到一塊兒了

最後在中斷執行默認命令 grunt結果：