grunt實用總結

文章梗概以下：

1. 如何讓Grunt在項目跑起來
2. 初識：Gruntfile.js
3. 術語掃盲：task & target
4. 如何運行任務
5. 任務配置
6. 自定義任務
7. 文件通配符：glob模式
8. 文件通配符：例子
9. 經常使用API
10. 如何初始化Gruntfile.js
11. 經過模板初始化Gruntfile.js
12. 獲取命令行參數
13. 插件編寫

入門簡介： http://www.cnblogs.com/chyingp/p/what-is-grunt.html

如何讓Grunt在項目跑起來

搞定下面三點，就能夠愉快地使用grunt了。

• 安裝grunt-cli：globally，命令行工具，全部項目共用
• 安裝grunt：locally，每一個項目單獨安裝
• 項目根目錄下配置文件：Gruntfile.js

初識：Gruntfile.js

module.exports = function(grunt) { // 任務配置 grunt.initConfig({ concat: { // concat任務 foo: { // 一個任務能夠包含多個子任務（官方術語叫作targetsample） src: ['a.js', 'b.js'], dest: 'ab.js' } } }); // 配置任務 grunt.loadNpmTasks('grunt-contrib-concat'); }; 

剩下的事情：

grunt concat 

術語掃盲：task & target

task就是任務，target就是子任務。一個任務能夠包含多個子任務。以下所示

grunt.initConfig({  concat: { // task   foo: { // target    src: ['a.js', 'b.js'],    dest: 'ab.js'   },   foo2: {    src: ['c.js', 'd.js'],    dest: 'cd.js'   }  } }); 

如何運行任務

首先須要配置任務，好比壓縮文件

grunt.initConfig({ uglify: { src: 'main.js' } }); 

而後運行任務

grunt uglify 

任務配置

grunt裏絕大多數都是文件操做，因此任務配置這一塊會重點講。簡單舉個例子，咱們要將 a.js 、 b.js 合併成 ab.js ，該怎麼作呢。

有四種配置方式

1. Compact Formate
2. Files Object（不推薦）
3. Files Array
4. Older Formats（不推薦，已廢棄）

Compact Formate

特色：

1. 每一個target只支持一個 src-dest
2. 支持除了 src 、 dest 以外的參數

   concat: { foo: { src: ['a.js', 'b.js'], dest: 'ab.js' } } 

File Object

特色：

1. 每一個target支持多個 src-dest
2. 不支持除了 src 、 dest 以外的參數

   concat: { foo: { files: { 'ab.js': ['a.js', 'b.js'] } } } 

File Array

特色：

1. 每一個target支持多個 src-dest
2. 支持除了 src 、 dest 以外的參數

   concat: { foo: {  files: [{   src: ['a.js', 'b.js'],   dest: 'ab.js'  }] } } 

中級配置

下面配置的意思：將 src 目錄下的全部 swf 文件拷貝到 dest 目錄下，而且與原來的目錄結構保持一致。

例子： src/flash/upload.swf - dest/upload.swf

copy: {
 dist:{   files: [{    expand:true, // 設置爲true，表示要支持cwd等更多配置    cwd: 'src/flash', // 全部的源文件路徑，都是相對於cwd    src:'**/*.swf', // 表示sr/flashc目錄下的全部swf文件，這裏用了通配符    dest: 'dist' // 目標路徑   }]  }, 

自定義任務

若是現有插件不能知足你的需求，本身寫一個插件又太麻煩，能夠考慮自定義任務

// 自定義任務 grunt.registerTask('hello', function(name){ console.log('hello ' + name); }); 

而後，運行任務

grunt hello:casper 

輸出：

hello casper 

文件通配符：glob模式

1. *  匹配任意多個字符，除了 /
2. ?  匹配除了 / 以外的單個字符
3. **  匹配任意多個字符，包括 /
4. {}  匹配用逗號分割的 or 列表
5. !  用在模式的開通，表示取反

// You can specify single files: {src: 'foo/this.js', dest: ...} // Or arrays of files: {src: ['foo/this.js', 'foo/that.js', 'foo/the-other.js'], dest: ...} // Or you can generalize with a glob pattern: {src: 'foo/th*.js', dest: ...} // This single node-glob pattern: {src: 'foo/{a,b}*.js', dest: ...} // Could also be written like this: {src: ['foo/a*.js', 'foo/b*.js'], dest: ...} // All .js files, in foo/, in alpha order: {src: ['foo/*.js'], dest: ...} // Here, bar.js is first, followed by the remaining files, in alpha order: {src: ['foo/bar.js', 'foo/*.js'], dest: ...} // All files except for bar.js, in alpha order: {src: ['foo/*.js', '!foo/bar.js'], dest: ...} // All files in alpha order, but with bar.js at the end. {src: ['foo/*.js', '!foo/bar.js', 'foo/bar.js'], dest: ...} // Templates may be used in filepaths or glob patterns: {src: ['src/<%= basename %>.js'], dest: 'build/<%= basename %>.min.js'} // But they may also reference file lists defined elsewhere in the config: {src: ['foo/*.js', '<%= jshint.all.src %>'], dest: ...} 

經常使用API

經常使用API：文件

文件操做

grunt.file.read(filepath [, options])   // 讀文件 grunt.file.readJSON(filepath [, options]) // 讀文件：json grunt.file.write(filepath, contents [, options]) // 寫文件 grunt.file.copy(srcpath, destpath [, options]) // 拷貝文件 grunt.file.delete(filepath [, options]) // 刪除文件 

目錄操做

grunt.file.mkdir(dirpath [, mode]) // 建立 grunt.file.recurse(rootdir, callback) // 遍歷 

文件類型

grunt.file.exists(path1 [, path2 [, ...]]) // 指定的路徑是否存在 grunt.file.isDir(path1 [, path2 [, ...]]) // 指定的路徑是否目錄 grunt.file.isFile(path1 [, path2 [, ...]]) // 指定的路徑是否文件 

路徑

grunt.file.isPathAbsolute(path1 [, path2 [, ...]]) // 是否絕對路徑 grunt.file.arePathsEquivalent(path1 [, path2 [, ...]]) // 是否等價路徑 grunt.file.doesPathContain(ancestorPath, descendantPath1 [, descendantPath2 [, ...]]) // 後面的路徑是否都是ancestorPath的子路徑 

API： 日誌

grunt.log.write(msg) grunt.log.writeln(msg) grunt.log.error([msg]) // 打印日誌，並中斷執行 grunt.log.errorlns(msg) grunt.log.debug(msg) // 只有加了--debug參數纔會打印日誌 

API：任務

主要有如下幾個

grunt.task.loadNpmTasks(pluginName) // 加載grunt插件 grunt.task.registerTask(taskName, description, taskFunction) // 註冊任務 || 給一系列任務指定快捷方式 grunt.task.run(taskList) // 代碼內部運行任務 grunt.task.loadTasks(tasksPath) // 加載外部任 grunt.task.registerMultiTask(taskName, description, taskFunction) // 註冊插件 

定義任務

// 自定義任務 grunt.registerTask('hello', function(name){ console.log('hello ' + name); }); 

指定別名

指定默認task(運行 grunt 任務時，如沒有指定任務名，默認運行 grunt default )

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

給一系列的任務指定別名

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

初始化Gruntfile.js

1. 簡單拷貝：簡單粗暴有效
2. 經過模板初始化：（推薦）

經過模板初始化Gruntfile.js

首先，你本地要確保安裝了 grunt-init ，而後將 Gruntfile.js模板 下載到指定目錄。具體目錄 參考這裏 。而後就很簡單了

grunt-init gruntfile

回答幾個簡單問題

Please answer the following:
[?] Is the DOM involved in ANY way? (Y/n) n
[?] Will files be concatenated or minified? (Y/n) y
[?] Will you have a package.json file? (Y/n) y
[?] Do you need to make any changes to the above before continuing? (y/N) n 

Gruntfile.js生成了！

-rw-r--r-- 1 root staff 2.0K 6 20 00:52 Gruntfile.js -rw-r--r-- 1 root staff 287B 6 20 00:52 package.json 

經常使用tips

獲取命令行參數

好比運行了以下命令，怎麼獲取 jshint 參數的值呢

grunt dist --jshint=true 

很簡單

轉 http://www.cnblogs.com/chyingp/p/grunt-practical-summary.htmlgrunt.option('jshint');