Grunt

1、從無到有構建Grunt項目

1. 新建項目目錄

2. 在項目目錄下新建index.html, js文件夾，js文件夾下新建index.js

3. 運行命令npm init，填寫項目的基本信息，生成package.json文件，生成package.json文件（若是老項目自己就是包含package.json的node項目則能夠忽略這一步）

4. 若是想在項目中引入grunt做爲devdependencies或者dependencies能夠運行下面的命令

npm install grunt --save-dev npm install grunt --save

 

5. 安裝一個插件，使得自動加載package.json文件中全部以grunt-開頭的文件

npm install load-grunt-tasks --save-dev

 

6. 安裝插件time-grunt，能夠自動計時

npm install time-grunt --save-dev

 

7. 新建Gruntfile.js文件，編寫基本模塊

'use strict'; module.exports=function(grunt){ require('load-grunt-tasks')(grunt); // 加載聲明的幾個模塊 require('time-grunt')(grunt); var config={ // 配置項目路徑 app:'app', dist:'dist' }; grunt.initConfig({ // 開始任務配置 config:config, }) }

 

8. 安裝這幾個基本的task，grunt的文件拷貝和文件刪除都依賴幾個官方提供的文件

npm install grunt-contrib-copy --save-dev npm install grunt-contrib-clean --save-dev

 

9. 新建app文件夾，將index.html以及js文件夾這些源文件拷貝到app目錄下

10. 回到gruntfile.js配置copy命令，有三種方式，都支持src(源文件),dest(目標文件)

• 通常用在只讀任務，每一個target下放置src,dest的文件映射，src既能夠是數組也能夠是單獨的字符串

grunt.initConfig({ config:config, copy:{ // 將app中的index.html文件拷貝到dist中的index.html dist:{ src:'<%= config.app %>/index.html', dest:'<%=config.dist %>/index.html' }, } });

 

運行這個任務只須要grunt copy命令便可。

下面配置clean刪除文件操做：

clean:{ dist:{ src:'<%=config.dist%>/index.html' // 刪除dist中的index.html文件 } }

 

一樣，使用grunt clean運行該任務

 

若是有多個target時，能夠這樣寫：

grunt.initConfig({ config:config, copy:{ dist_html:{ src:'<%= config.app %>/index.html', dest:'<%=config.dist %>/index.html' }, dist_js:{ src:'<%=config.app%>/js/index.js', dest:'<%=config.dist%>/js/index.js' } }, clean:{ dist:{ src:['<%=config.dist%>/index.html','<%=config.dist%>/js/index.js'] // 使用數組形式 } } });

 

這裏運行copy命令時，能夠選擇性的只運行dist_js，以下：grunt copy:dist_js

• 使用files數組，以數組的形式組織多個源文件到目標文件的映射

grunt.initConfig({ config:config, copy:{ dist:{ files:[{ // 使用files數組映射
                src:'<%= config.app %>/index.html', dest:'<%=config.dist %>/index.html' }, { src:'<%=config.app%>/js/index.js', dest:'<%=config.dist%>/js/index.js' }] } }, clean:{ dist:{ src:['<%=config.dist%>/index.html','<%=config.dist%>/js/index.js'] } } });

 

• 使用files對象，以鍵值對的形式實現映射

grunt.initConfig({ config:config, copy:{ dist:{ files:{ // 鍵是dist即dest，值是app即src,值能夠是數組
                    '<%=config.dist %>/index.html':'<%= config.app %>/index.html', '<%=config.dist%>/js/index.js':'<%=config.app%>/js/index.js' } } }, clean:{ dist:{ src:['<%=config.dist%>/index.html','<%=config.dist%>/js/index.js'] } } });

 

11. 配置clean命令

grunt.initConfig({ config:config, copy:{ dist:{ files:{ '<%=config.dist %>/index.html':'<%= config.app %>/index.html', '<%=config.dist%>/js/index.js':'<%=config.app%>/js/index.js' } } }, clean:{ dist:{ src:['<%=config.dist%>/**/*'] } } });

 

這樣會連同js文件夾一塊兒刪除，前面的幾種方法都是刪除了js文件夾下的js文件，並無刪除文件夾。而後須要注意的是**/*，一個*表示匹配任意字符，可是不匹配/，兩個*表示匹配任意字符包括/。

11. 額外參數的配置（僅支持10中的第一種和第二種配置方式）

• filter的值既能夠是nodejs下的stats類下的函數名，也能夠是自定義函數

以下實現不刪除js文件夾，僅刪除文件的功能

clean:{ dist:{ src:['<%=config.dist%>/**/*'], filter:'isFile' } }

clean:{ dist:{ src:['<%=config.dist%>/**/*'], filter:function(filepath){ 　　　　　　// filter函數返回true則表示該路徑符合要求，不然不符合要求，放在這裏就是刪除爲true的文件路徑
            return (!grunt.file.isDir(filepath)); } } }

 

• dot爲true時，命中以.開頭的文件，好比若是我這裏文件爲**/index.html除了命中index.html文件同時命中.index.html文件
• matchBase 舉例說明, a?b這種形式默認會命中 /xyz/123/acb,  /xyz/acb/123 若是matchBase爲true，則只命中第一種形式/xyz/123/acb,不會命中第二種形式，只匹配路徑的basename
• expand設爲true則意味着要處理動態的src到dest的文件映射
• cwd相對於src的尋路路徑
• ext是否修改目標文件的後綴名，字符串，指定後綴名
• extDot 指定從哪一個地方開始修改目標文件的後綴名
• flatten爲true時去掉中間各層目錄
• rename在後綴名重命名以及flatten執行後會被調用，是一個函數聲明形式，形參第一個是dest，第二個是src

舉例：

copy:{ dist_html:{ files:[{ expand:true, cwd:'<%=config.app%>/', // cwd dest中不要忘記後面的反斜槓/
            src:'*.html', dest:'<%=config.dist%>/', ext:'.min.html'  // 指定後綴名，存在dest中的index.html名字改成index.min.html
　　　　　　　//extDot:'first' // index.max.html變爲index.min.html把第一個點後的內容所有刪掉換成指定後綴
　　　　　　　extDot:'last' // index.max.html變爲index.max.min.html把最後一個點後的內容所有刪掉換成指定後綴
　　　　　　　flatten:true
　　　　　　　　// 若是將src改成**/*.js則直接將index.js複製到了dist目錄下，沒有js文件夾，若是將flatten設爲false，則複製到dist的js文件夾下 rename:function(dest,src){ 　　 　　return dest+"js/"+src; 　　　　　　　　　　// 經過rename函數將js文件夾又加回來了，效果至關於flatten設置爲false的效果
 } }] } },