使用grunt搭建自動化的web前端開發環境

時間  2019-11-19
標籤 使用 grunt 搭建 自動化 web 前端 開發環境 欄目 Node.js 简体版
原文   原文鏈接

使用grunt搭建自動化的web前端開發環境

　　咱們必定常常聽過grunt和gulp，它們都是用於搭建自動化的web前端開發環境的，這裏主要介紹grunt的使用，值得一提的是，jQuery、bootstrap等都在使用grunt，因此仍是值得一學的。下面咱們將逐步介紹grunt環境的搭建。css

 　　https://www.sdk.cn/news/5412 這些工具都是什麼？html

第一部分：nodejs環境搭建

　　Grunt和全部的grunt插件都是基於nodejs來運行的，安裝步驟能夠看個人博文《Node.js環境搭建&&npm安裝》。前端

 

 

第二部分：安裝grunt-CLI

　　CLI我認爲是Command Line的縮寫，即命令行。grunt環境的搭建實際上就是要先將grunt-cli安裝到全局環境中。node

　　方法：在windows系統下使用管理員權限打開cmd.exe(可參看個人博文《以管理員身份運行cmd》),而後輸入下面指令：linux

npm install -g grunt-cli

　　若是是max os系統、部分的linux系統中須要在上面的指令前加上 'sudo' 指令。web

　　其中-g表示全局安裝，即安裝以後，能夠在系統中的任何地方使用這個命令；若是沒有-g，那麼其就會安裝在當前的子目錄下，咱們必須在這個特定的目錄下才能使用這個命令。數據庫

　　注意：輸入這條指令的前提時要聯網，由於只有聯網才能下載並安裝這個grunt-cli。npm

　　而後咱們輸入grunt,檢測是否安裝成功，輸入以下，則表示安裝成功：json

　　最後咱們來檢測版本看是否成功，以下所示：gulp

　　

　　這就代表，咱們已經安裝成功啦！ 

 

第三部分：建立一個簡單的網站

　　由於咱們使用grunt的緣由就是它能夠用在項目中，幫助咱們更好的開發網站，以下所示：

 　　首先我在D盤創建一個grunt_test文件夾，並在其中創建下面的文件：

       

　　　 其中package.json是基於nodejs項目必不可少的配置文件，它是存放在項目根目錄中的普通json文件，而後我在package.json中寫一些基本信息，以下所示：

{
    "name":"grunt_test",
    "version":"1.0.0",
    "devDependencies":{

    }
}

 

　　　　這裏寫了網站的名稱和版本號以及devDependencies，什麼使devDependencies呢？按照名稱就能夠得知它是項目依賴的插件，即開發依賴項，即咱們所做的網站是依賴於什麼工具開發的，如今是空對象，說明咱們如今誰都沒有依賴，後面會慢慢填充它。

 

第四部分：安裝grunt

　　grunt是一個構建工具，它自己沒有什麼做用，可是它能夠把有做用的一個個插件整合起來，造成一個總體效應，這時它就有很大的做用了。

　　值得注意的是，安裝grunt-cli即grunt命令行的時候咱們是全局安裝，可是安裝grunt就須要進入具體的目錄下了。

　　咱們進入cmd，而後進入grunt_test目錄下輸入下面的命令：

npm install grunt  --save-dev

 

 　　npm install grunt很好理解，就是安裝grunt，可是--save-dev是什麼意思呢？  --save是指將保存配置信息到package.json下， -dev是指將該信息保存到package.json中的devDependencies節點，若是咱們沒有使用-dev，將會保存到dependencies節點。

　　回車以後，會出現一些安裝的信息，還有WARN提示，不要理他就行。咱們既然依賴了grunt那麼package.json下的devDependencies就應該出現依賴項了，咱們如今打開package.json就會發現多了一條信息，以下所示：　　

{
  "name": "grunt_test",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "^1.0.1"
  }
}

 

　　即咱們依賴的是grunt的1.0.1版本。而後進入grunt_test下面，咱們看見多了一個node_modules文件夾(modules是模塊的意思)，裏面還有其餘許多文件。

　那麼在1.0.1以前的^是什麼意思呢？ 它表示若是有最新的版本，就在主版本號不變的狀況下更新這個版本，好比grunt發佈了1.5.1，就會自動更新到1.5.1，可是若是grunt到了2.0.1，這是主版本號已經發生了變化，因此就不能自動更新了。

　若是1.0.1以前的不是^而是~,則表示能夠在次版本號不變的狀況下更新這個版本，好比1.0.8出來了，就會自動更新，若1.3.2出來了，次版本號發生了改變，那麼這時就不可自動更新了。

這時咱們再grunt_test下運行grunt，就會收到一條warn提示，它說明這時grunt已經起做用了，以下所示：

       

　　因而grunt已經在這個目錄下成功安裝。可是Tast "default" not found.是什麼意思呢？ 接下來的步驟就會解決這些問題。

　　

第五部分：配置Gruntfile.js

　　打開咱們以前建立的Gruntfile.js，而後再其中輸入下面基本代碼：

// 包裝函數
module.exports = function(grunt){
// 任務配置，全部插件的配置信息
grunt.initConfig({

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

});

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

};

　　如今已經配置好了，當咱們再次輸入grunt時你就會發現沒有任何問題了，以下所示：

　　

 　　其中pkg: grunt.file.readJSON('package.json')是這個Gruntfile.js用來獲取package.json的內容，因此不要覺得package.json是沒有用的，具體有什麼用處，後面會講到。

 

 

第六部分：Grunt插件

　　在http://www.gruntjs.net/plugins 中有許多插件，它們來自npm模塊數據庫。其中帶有星號的且以contrib-做爲前綴的插件是被官方維護的，沒有這兩個標誌的插件則是第三方的。其中咱們還能夠看到30內的下載量。由於目前共有6010個插件，咱們不可能全用，下載量排名靠前的必定是好用的，咱們能夠適當選擇。如圖所示：

 

其中它們的主要功能以下：

  • contrib-watch ------實時監控文件的變化（增長、改變或被刪除），一旦變化則執行預約義的任務
  • contrib-clean  ------清空文件、文件夾
  • contrib-copy   ------複製文件、文件夾
  • contrib-uglify  ------使用UglifyJS壓縮JavaScript文件
  • contrib-jshint  ------JavaScript的語法錯誤檢查
  • contrib-concat ------ 合併多個文件的代碼到一個文件中
  • contrib-cssmin------ 壓縮css代碼
  • karma            ------ 前端自動化測試工具

下面我將主要介紹其中的幾個。　　

 

第七部分：contrib-uglify壓縮JavaScript代碼

　　咱們知道不少js代碼都有*.min.js版本，由於壓縮代碼可使其更輕量，使的網站的性能更好，那麼怎麼使用contrib-uglify壓縮JavaScript代碼呢？

　　咱們能夠直接點進去，到contrib-uglify的頁面，這裏介紹的很是詳細。

　　第一步：在cmd中輸入下面指令（注意：同安裝grunt同樣，這裏沒有全局安裝，因此應當先進入grunt_test在執行下面的指令）： 　　　　

npm install grunt-contrib-uglify --save-dev

 

 　　一樣，--save-dev將會保存配置信息到 package.json下面的devDependencies中。

　　這時，咱們能夠看到package.json中又發生了新的變化，而且在grunt_test中又多了文件夾，以下所示：

{
  "name": "grunt_test",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-uglify": "^2.0.0"
  }
}

 

　　即在devDependencies中又添加了contrib-uglify的2.0.0版本。

　　

　　第二步：雖然，如今下載到了壓縮JavaScript代碼的插件，可是咱們如今鏈js代碼都沒有啊，怎麼測試呢，因此仍是如今src下創建一個js文件吧，以下所示：

function add(num1,num2){
    return num1+num2;
};
console.log(add(1,1));

 

 　　這個文件建好了，可是誰知道壓縮什麼，怎麼壓縮，壓縮到哪裏呢？ 這些都是須要配置的，因此咱們得在Gruntfile.js中進行配置。

　　　　1.在grunt.initConfig方法中配置 uglify 的配置參數。以下所示：

    // 任務配置，全部插件的配置信息
    grunt.initConfig({
        
    //獲取 package.json 的信息
    pkg: grunt.file.readJSON('package.json'),

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

 

　　　　其中咱們再grunt.initConfig方法中添加了uglify的配置，其中的options是可選的，它表示容許生成的壓縮文件帶banner，經過獲取pkg的name和version在生成的壓縮文件中作出說明，即options是說如何壓縮。而build則是必選的，它告訴咱們應當壓縮誰，壓縮到哪裏，固然這只是最基本的應用，還有其餘不少方式 能夠選擇。

　　　　2.　在grunt.initConfig方法以後添加一個grunt.loadNpmTasks方法來加載這個插件，只有加載了才能使用啊。以下所示：

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

　　　　3.  在grunt命令執行時，要不要馬上去執行ugligy插件呢? 若是要，就像下面這樣寫上，若是不要，就不用寫；建議寫上。

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

　　　　至此Gruntfile.js文件就配置好了。

 

　　第三步：在控制檯中執行grunt命令，以下所示。

　　

　　顯示，一個文件已經被建立，若是不出意外，這個文件就是咱們的壓縮文件了。去build中看看，結果以下：

　　

　　而且也出現了banner。

　　最終Gruntfile.js文件以下：

// 包裝函數
module.exports = function(grunt) {
    // 任務配置，全部插件的配置信息
    grunt.initConfig({
        
    //獲取 package.json 的信息
    pkg: grunt.file.readJSON('package.json'),

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

    });

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

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

};

 

 

第八部分：使用contrib-jshint來檢查JavaScript語法錯誤

　　這一點是尤爲吸引個人，由於以前我一直苦惱於錯誤的JavaScript代碼難以排錯，可是jshint卻很好地解決了這個問題，下面咱們開始吧。

　　第一步：輸入下面的指令：

npm install grunt-contrib-jshint --save-dev

　　安裝以後，一樣會有warn，能夠不用理會。且此時在package.json中又多了"grunt-contrib-jshint": "^1.1.0"這一行代碼。

　　

　　第二步：配置Gruntfile.js文件。

　　　　1.在grunt.initConfig方法中配置jshint,以下所示：

    //jshint插件的配置信息
    jshint:{
        build:['Gruntfile.js','src/*.js'],
        options:{
            jshint:'.jshintrc'
        }
    }

　　　　其中build是告訴grunt檢查Gruntfile.js和src下的全部js文件。一樣options是告訴grunt怎麼去檢查，其中包含了檢查規則的.jshintrc文件（遵照嚴格的json格式）放在根目錄下，內容能夠是下面這種（固然網上還有不少，你們能夠自行搜尋）：

{
  "boss":      true,
  "node":      true,
  "eqeqeq":    true,
  "strict":    true,
  "newcap":    false,
  "undef":     true,
  "unused":    true,
  "onecase":   true,
  "lastsemic": true
}

　　這裏的一些配置是說是否採用嚴格模式等等，這部分應當根據咱們的需求而定。

 

　　　　2.加載插件，這個和uglify是相同的，值得注意的是，加載插件無需關注前後順序。以下所示：

    //告訴grunt咱們將加載uglify插件
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');

 

　　　　　3. 配置grunt命令啓動時，要執行的任務，這裏是有前後順序的。顯然先檢查錯誤，後合併文件更好，以下所示：

　　　　

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

 

　　　　第三步：配置好了，爲了檢查語法錯誤，因此咱們須要把test.js加一些語法錯誤，以下所示：

function add(num1,num2){
    return num1+num2
}
console.log(add(1,1));

　　問題是在return語句後沒寫分號,以下所示：

　　咱們能夠看到，它確實檢測出來了分號沒有寫，後面我強行壓縮js文件，可是獲得了一個warning。

 

　　

　　

第九部分：使用contrib-watch實現自動化

　　

　　

 

 

 

http://developer.51cto.com/art/201506/479127.htm

http://www.cnblogs.com/wangfupeng1988/p/4561993.html

　　　　　　http://www.imooc.com/video/5151

　　　　　　　　http://www.imooc.com/video/9882

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程