Grunt的配置和使用

Grunt和Grunt插件是經過NodeJs的包管理工具npm安裝並進行管理的。

Grunt 0.4.x必須配合NodeJs=>0.8.0版本使用（奇數版本的NodeJs不是穩定的開發版本）

 

首先介紹2個基礎指令：

（1）指令：npm update -g npm
    做用：升級當前環境中的npm爲最新的版本

（2）指令：npm install -g grunt-cli
    做用：將Grunt命令行安裝到全局環境中，執行完後，就將grunt命令加入到你的系統路徑中，之後就能夠在任何目錄下執行此命令了。
    注意：安裝grunt-cli並不等於安裝了Grunt。GruntCli的任務很簡單：調用與Gruntfile在同一目錄中的Grunt。好處是：容許你在同一系統上同時安裝多個版本的Grunt。

 

命令行CLI的工做原理：

每次運行grunt時，Grunt就會利用node提供的require()系統查找本地安裝的Grunt。因此你能夠在項目的任意子目錄中運行Grunt。若找到一份本地安裝的Grunt，CLI就將其加載，並傳遞Gruntfile中的配置信息，而後執行你指定的任務。

 

對於新的Grunt項目：

在項目中添加兩份文件，package.json和Gruntfile.

Package.json:此文件被npm用於存儲項目的元數據，以便於將此項目發佈爲npm模塊。能夠在此文件中列出項目依賴的grunt和grunt插件，放置於devDendencies配置段內。

Gruntfile：（用於爲grunt作某種配置）此文件被命名爲Gruntfile.js或Gruntfile.coffee。用來配置或定義任務task 並加載Grunt插件的。

 

1）Package.json

    應放置於項目的根目錄中，與Gruntfile在同一目錄中，並與項目的源代碼一塊兒提交。在Package.json所在目錄中運行npm install將依據Package.json文件中所列出的每一個依賴來自動安裝適當版本的依賴。

建立Package.json文件的3種方式：

   （1）大部分grunt-init模板都會自動建立特定於項目的Package.json文件。

   （2）npm init命令會建立一個基本的Package.json文件。

   （3）模板案例並補充：

 

 { "name": "my-project-name", "version":"0.0.1", "devDependencies": {//開發依賴項 "grunt-contrib-jsint":"~0.10.0", "grunt-contrib-nodeunit":"~0.4.1", "grunt-contrib-uglify":"~0.5.0" } }

安裝Grunt和Grunt插件：

向已存在的Package.json文件添加Grunt和Grunt插件的最簡單的方式是經過指令
npm install <module name> --save-dev  進行安裝的。

做用：不只安裝了<module>,還自動將其添加到devDependencies配置中，遵循title version range格式。

指令：npm install grunt --save-dev

做用：安裝Grunt最新版本到項目目錄中，並將其添加到devDependencies內。

 

 

指令：npm install grunt-contrib-jshint --save-dev

做用：Grunt插件和其餘node模塊均可以按照相同的方式安裝，上述指令就是jshint任務模塊。

安裝插件以後，務必確保將更新以後的package.json文件提交到項目倉庫中。

 

2）Gruntfile

    Gruntfile.js文件是有效的js文件，應當放在項目根目錄中和package.json文件在同一目錄層級，並和項目源代碼一塊兒加入源代碼管理器中。

    Gruntfile由4部分組成，分別是」wrapper」函數、項目與任務配置、加載grunt插件和任務、自定義任務等。

    在如下Gruntfile、Package.json文件中的項目元數據被導入到Grunt配置中。grunt-contrib-uglify插件中的uglify任務被配置爲壓縮源碼文件，並依據上述元數據動態生成一個文件頭註釋。

    當在命令行中執行grunt命令時，uglify任務被默認執行。

結合代碼進行說明:

 

module.exports=function(grunt){//"wrapper"函數，所寫的Grunt代碼都放在此函數中 grunt.initConfig({//項目與任務配置 pkg: grunt.file.readJSON('package.json'),//pkg屬性 uglify:{//uglify任務 options:{//目標 banner:'/*! <%= pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n' //banner註釋將插入到輸出文件的頂部 }, build:{//目標 src:'src/test.js',//源文件 dest:'build/<%=pkg.name%>-<%=pkg.version%>.js.min.js'//目標文件 } } }); //加載包含"uglify"任務的插件 grunt.loadNpmTasks('grunt-contrib-uglify'); //默認被執行的任務列表 grunt.registerTask('default',['uglify']); /** 經過定義default任務，可讓Grunt默認執行一個或多個任務。在該案列中，執行grunt指令時若不指定一個任務的話，將會執行uglify任務，這與grunt uglify 或grunt default的效果同樣。Default任務列表數組中能夠指定任意數目的任務（能夠帶參數）。 **/ }; 

註解：

    因爲<% %>模板字符串能夠引用任意的配置屬性，所以能夠經過這種方式來指定諸如文件路徑、文件列表類型的配置數據，從而減小一些重複的工做。

    那麼就能夠在傳遞intconfig()方法的對象中存儲任意的數據，只要它不與你任務配置所需的屬性衝突，不然會被忽略。

    與大多數task同樣，grunt-contrib-uglify插件中的uglify任務要求它的配置被指定在一個同名屬性中，在這裏的示例中。咱們指定一個banner選項（用於在文件頂部生成一個註釋），緊接着是一個單一的名爲build的uglify目標，用於將一個js文件壓縮爲一個目標文件。

 

指令：grunt --help

做用：列出全部可用的任務。

 

---------------------------Grunt插件分割線----------------------------

Grunt插件：http://www.gruntjs.net/plugins

插件分爲2類：
①grunt團隊貢獻的插件，這些插件的名字前有」contrib-」前綴，且在插件列表中有星號標註。
②第三方插件，無此兩種特徵。
經常使用插件：

grunt-contrib-jshint:javascript語法錯誤檢查。

grunt-contrib-watch:實時監控文件變化，調用相應的任務從新執行。

grunt-contrib-clean：清空文件、文件夾。

grunt-contrib-uglify:壓縮JavaScript代碼。

grunt-contrib-copy:複製文件、文件夾。

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

grunt-karma:前端自動化測試工具。

grunt-contrib-cssmin:壓縮css代碼。

 

 

---------------------------Grunt通配符分割線----------------------------

 

通配符模式：一般分別指定全部源文件路徑是不切實際的，所以Grunt經過內置支持node-glob和minimatch庫來匹配文件名（又稱爲globing）。

如何在文件路徑匹配過程當中使用通配符？

（1）*匹配任意數量的字符，但不匹配/

（2）?匹配單個字符，但不匹配/

（3）**匹配任意數量的字符，包括/,只要它是路徑中惟一的部分

（4）{}容許使用一個逗號分割的」或」表達式列表

（5）！在模式的開頭用於排除一個匹配模式所匹配的任何文件

 

foo/*.js將匹配位於foo/目錄下的全部的.js結尾的文件

foo/**/*.js將匹配位於foo/目錄以及其子目錄下的全部的.js結尾的文件

 

另外，爲了簡化原來複雜的通配符模式，Grunt容許指定一個數組形式的文件路徑或一個通配符模式，全部模式按順序處理，模式處理過程當中，帶有！前綴的模式所匹配的文件不包含在結果集中，並且其結果集中的每一項也是惟一的。

例如：

{src:’foo/this.js’,dest:...}//指定單個文件

{src:[’foo/this.js’,’foo/that.js’,’foo/other.js’],dest:...}//指定一個文件數組

{src:’foo/th*.js’,dest:...}//使用一個匹配模式

 

一個獨立的node-glob模式

{src:’foo/{a,b}*.js’,dest:...}或{src:’foo/a*.js’,’foo/b*.js’,dest:...}

 

{src:’foo/*.js’,dest:...}//foo目錄中全部的.js文件，按字母順序排列

{src:[’foo/bar.js’,’foo/*.js’],dest:...}//首先是bar.js,接着是剩下的js文件，並按照字母順序排列

 

{src:[’foo/*.js’,’！foo/bar.js’],dest:...}//除bar.js之外的全部js文件，按照字母順序排序

{src:[’foo/*.js’,’！foo/bar.js’,’foo/bar.js’],dest:...}//按照字母順序排序的全部.js文件，但bar.js在最後

 

 

//模板也能夠用於文件路徑或匹配模式中

{src:[‘src/<%=basename%>.js’],dest:’build/<%=basename%>.min.js’}

//它們也能夠引用配置中定義的其餘文件列表

{src:[‘foo/*.js’,‘<%=jshint.all.src%>’],dest:...}

Gruntfile文件實例：

 

module.exports=function(grunt){ //任務配置，全部插件的配置信息 grunt.initConfig({ //獲取package.json中的信息 pkg: grunt.file.readJSON('package.json'), 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' } }, cssmin:{ options:{ stripBanners:true, banner:'/*! <%= pkg.name%>-<%=pkg.version%>.css <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build:{ src:'src/test.css', dest:'build/<%=pkg.name%>-<%=pkg.version%>.css.min.css' } }, jshint:{ build:['Gruntfile.js','src/*.js'], options:{ jshintrc:'.jshintrc' } }, csslint:{ build:['src/*.css'], options:{ csslintrc:'.csslintrc' } }, watch:{ build:{ files:['src/*.js','src/*.css'], task:['jshint','uglify'], options:{spawn:false} } } }); //告訴grunt 咱們將使用插件 grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-csslint'); grunt.loadNpmTasks('grunt-contrib-watch'); //告訴grunt 當咱們在終端中輸入grunt時須要作些什麼，同時注意前後順序 grunt.registerTask('default',['jshint','uglify','watch','csslint','cssmin']); };