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

一、概念理解【預計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文檔下建立

    |- mjt----------構建生成的文件所在的文件夾
  |- src------------源碼文件夾   
      |- js---------------js源文件夾
      |- css--------------css源文件夾
  |- index.html-----頁面文件


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

看下位置:

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

最後項目結構圖:

 |- mjt----------構建生成的文件所在的文件夾
  |- src------------源碼文件夾   
      |- js---------------js源文件夾
      |- css--------------css源文件夾
  |- index.html-----頁面文件
  |- Gruntfile.js---grunt配置文件(注意首字母大寫)
  |- package.json---項目包配置文件

這些文件也基本都是空的,接下來安裝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結果:

六、Gulp詳解 (看下篇)

七、Webpack詳解(看下篇)

相關文章
相關標籤/搜索