當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

grunt对象之api

發布時間：2023/10/11 综合教程 85 老码农

生活随笔收集整理的這篇文章主要介紹了 grunt对象之api 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

　　grunt已經扯了七篇了，殊為不易。最后一篇扯點早應該提及的東西，就是module.exports = function(grunt) {}傳入的這個grunt。之前的代碼grunt一般只出現在Gruntfile.js這幾個地方。

require('load-grunt-tasks')(grunt);

require('time-grunt')(grunt);

grunt.initConfig({

    ...

});

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

　　但grunt的內容遠遠不止這些，它包含9個對象屬性，而上面的initConfig、registerTask不過是某些屬性對象的方法，是為了方便用戶調用所取的別名而已。

　　9個對象將分別進行介紹。

config
grunt.config.init(obj): grunt.initConfig()的元神，不必多說了吧。
grunt.config(prop[, value]): 可以叫語法糖么，當參數為一個的時候調用grunt.config.get()。當參數為兩個的時候調用grunt.config.set()。
grunt.config.get/set(prop[, value]): 設置或者獲取prop
grunt.config.getRaw(prop): 獲取prop的原始code
grunt.config.process(templateString): 返回<%=var.prop%>這種模板對應的值。一般來說，設置的prop當value為string時（比如src，dest）可以直接使用模板，但是當value為function時，想要通過模板獲取字符串就需要用到這個方法了。
舉個栗子，自己感受吧。

'use strict';

module.exports = function(grunt) {

    require('load-grunt-tasks')(grunt);

    require('time-grunt')(grunt);

    var path = {

        src: 'src',

        dest: 'dest'

    }

    grunt.config.init({

        path: path,

        copy: {

            test: {

                files: [

                    {

                        expand: true,

                        cwd: '<%=path.src%>/',

                        src: '{,*/}*',

                        dest: '<%=path.dest%>'

                    }

                ]

            }

        }

    });

    grunt.config('clean', {

        test: '<%=path.dest%>'

    });

    console.log(grunt.config('path').dest);                     //output: dest

    console.log(grunt.config.process('<%=path.dest%>'));        //output: dest

    console.log(grunt.config.get('clean').test);                //output: dest

    console.log(grunt.config.getRaw('clean').test);             //output: <%=path.dest%>

    grunt.registerTask('default', ['clean', 'copy']);

}

event
grunt.event.on(type, listener): 設置某類型事件的監聽函數
grunt.event.once(type, listener): 設置某類型事件的一次性監聽函數
grunt.event.many(type, count, listener): 設置某類型事件的多次性監聽函數
grunt.event.off(type, listener): 取消某類型事件的某個監聽函數
grunt.event.removeAllListeners([type]): 取消某類型事件的全部監聽函數
grunt.event.emit(type[, arg1[, arg2...]]): 發出某類型時間
需要注意的是，grunt中沒有原生的event type，全部自己定義自己發出。
這部分方法比較簡單，和jQuery的命名很相似，所以直接給出代碼和輸出過了吧。

'use strict';

module.exports = function(grunt) {

    function foron(count) {

        console.log('test for off ' + count);

    }

    grunt.event.on('test', foron);

    grunt.event.on('test', function(count) {

        console.log('test for on ' + count);

    });

    grunt.event.once('test', function(count) {

        console.log('test for once ' + count);

    });

    grunt.event.many('test', 2, function(count) {

        console.log('test for many ' + count);

    });

    grunt.event.emit('test', 1);

    grunt.event.emit('test', 2);

    grunt.event.emit('test', 3);

    grunt.event.off('test', foron);

    grunt.event.emit('test', 4);

    grunt.event.removeAllListeners();

    grunt.event.emit('test', 5);

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

}

輸出如下：

test for off

test for on

test for once

test for many

test for off

test for on

test for many

test for off

test for on

test for on

fail
grunt.fail.warn(msg[, errorcode]): grunt.warn()的本尊，顯示一條警告信息然后退出grunt的本次執行，執行grunt時使用--force參數無視警告信息繼續執行
grunt.fail.fatal(msg[, errorcode]): grunt.fatal()的本尊，顯示一條錯誤信息然后退出grunt的本次執行
Gruntfile.js中一般是用不到的，如果你編寫plugin就肯定用的到了。
file 文件操作，封裝了nodejs中的fs模塊
grunt.file.defaultEncoding: 文件編碼，默認是'utf8'
grunt.file.preserveBOM: 是否在檔首保留BOM，默認false
grunt.file.read(filepath[, options]): 讀取并返回文件內容，options.encoding為null時返回Buffer，其他返回String
grunt.file.readJSON(filepath[, options]): 讀取并返回文件內容的JSON對象表示，常見var pack = grunt.file.readJSON('package.json');
grunt.file.readYAML(filepath[, options]): 同上，我表示不懂YAML
grunt.file.write(filepath, contents[, options]): 將contents寫入filepath，contents可以是String或Buffer

grunt.file.copy(srcpath, destpath[, options]): 拷貝文件，會自動創建文件夾
grunt.file.delete(filepath[, options]): 刪除文件

grunt.file.mkdir(dirpath[, options]): 創建文件夾
grunt.file.recurse(rootdir, callback): 遍歷文件夾下的所有文件（包括子文件夾下的），并執行callback(abspath, rootdir, subdir, filename)

grunt.file.expand([options, ]patterns): 返回patterns匹配的所有路徑，比如我之前的項目結構grunt.file.expand('src/**')返回的如下
```
[ 'src',

  'src/css',

  'src/css/base.css',

  'src/css/main.css',

  'src/image',

  'src/image/haiys02.jpg',

  'src/index.html',

  'src/js',

  'src/js/hellogrunt.js',

  'src/js/helloworld.js' ]
```
grunt.file.expandMapping(patterns, dest[, options]): 返回patterns匹配路徑和原路徑的鍵值對，比如grunt.file.expandMapping('**', 'dest', {cwd: 'src'})返回
```
[ { src: [ 'src' ], dest: 'dest' },

  { src: [ 'src/css' ], dest: 'dest/css' },

  { src: [ 'src/css/base.css' ], dest: 'dest/css/base.css' },

  { src: [ 'src/css/main.css' ], dest: 'dest/css/main.css' },

  { src: [ 'src/image' ], dest: 'dest/image' },

  { src: [ 'src/image/haiys02.jpg' ],

    dest: 'dest/image/haiys02.jpg' },

  { src: [ 'src/index.html' ], dest: 'dest/index.html' },

  { src: [ 'src/js' ], dest: 'dest/js' },

  { src: [ 'src/js/hellogrunt.js' ],

    dest: 'dest/js/hellogrunt.js' },

  { src: [ 'src/js/helloworld.js' ],

    dest: 'dest/js/helloworld.js' } ]
```
grunt.file.match([options, ]patterns, filepaths): 返回filepaths中匹配patterns的路徑
grunt.file.isMatch([options, ]patterns, filepaths): filepaths中一旦有path命中即返回true

grunt.file.exists(path1[, path2...]): 返回paths是否存在
grunt.file.isLink/Dir/File(path1[, path2...]): 返回paths是否為鏈接、文件夾、文件

grunt.file.isPathAbsolute(path1[, path2...]): 返回paths是否為絕對路徑
grunt.file.arePathsEquivalent(path1[, path2...]): 返回paths是否相同
grunt.file.doesPathContain(dir, path1[, path2...]): 返回paths是否在dir中
grunt.file.isPathCwd(path1[, path2...]): 返回paths是否為cwd
grunt.file.isPathInCwd(path1[, path2...]): 返回paths是否在cwd中，cwd不在cwd中
grunt.file.setBase(path1[, path2...]): 設置當前的cwd
log/verbose
grunt.log.write[ln](msg): 打印 msg
grunt.log.error[lns](msg): 打印紅色'>>' msg
grunt.log.ok[lns](msg): 打印綠色'>>' msg
grunt.log.subhead(msg): 打印高亮msg
grunt.log.writeflags(obj, prefix): 打印 prefix: obj.toString()
grunt.log.debug(msg): 當指定--debug時打印 [D] msg
option
grunt.option(key[, value]): 讀取或設置option grunt --key1=value1 --key2=value2
grunt.option.init([obj]): 初始化option對象
grunt.option.flags(): 將option對象以'key=value'字符串數組方式返回

task
grunt.task.registerTask(taskname, taskslist)/(taskname, desc, taskFunction): grunt.registerTask的真身，注冊可執行的任務
grunt.task.registerMultiTask(taskname, desc, taskFunction): grunt.registerMultiTask的真身，注冊新的task類型，需指定target才能執行，function內部通過this.target獲取當前target，通過this.data獲取當前target的value

'use strict';

module.exports = function(grunt) {

    require('time-grunt')(grunt);

    grunt.initConfig({

      log: {

        foo: [1, 2, 3],

        bar: 'hello world',

        baz: {

            options: {

                bool: false

            }

        }

      }

    });

    grunt.task.registerMultiTask('log', 'Log stuff.', function() {

      grunt.log.writeln(this.target + ': ' + this.data);

    });

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

}

輸出如下：

Running "log:foo" (log) task

foo: 1,2,3

Running "log:bar" (log) task

bar: hello world

Running "log:baz" (log) task

baz: [object Object]

grunt.task.renameTask: 重命名task type，原task type將不可使用
grunt.task.loadTasks: grunt.loadTasks的真身，指定需要加載的文件的目錄
grunt.task.loadNpmTasks: grunt.loadNpmTasks的真身，指定需要加載的plugin
以下語句效果相同

grunt.loadTasks('node_modules/grunt-contrib-clean/tasks/');

grunt.loadNpmTasks('grunt-contrib-clean');

grunt.task.run(tasksList): 執行任務隊列
grunt.task.clearQueue(): 清空任務隊列
grunt.task.normalizeMultiTaskFiles(): 將target將要處理的文件以src-dest-orig對象數組的形式序列化，以config中Gruntfile.js為例，添加代碼

console.log(grunt.task.normalizeMultiTaskFiles(grunt.config.process('<%=copy.test%>')));

打印出的內容如下：

[ { src: [ 'src/css' ],

    dest: 'dest/css',

    orig: { expand: true, cwd: 'src/', src: [Object], dest: 'dest' } },

  { src: [ 'src/css/base.css' ],

    dest: 'dest/css/base.css',

    orig: { expand: true, cwd: 'src/', src: [Object], dest: 'dest' } },

  { src: [ 'src/css/main.css' ],

    dest: 'dest/css/main.css',

    orig: { expand: true, cwd: 'src/', src: [Object], dest: 'dest' } },

  { src: [ 'src/image' ],

    dest: 'dest/image',

    orig: { expand: true, cwd: 'src/', src: [Object], dest: 'dest' } },

  { src: [ 'src/image/haiys02.jpg' ],

    dest: 'dest/image/haiys02.jpg',

    orig: { expand: true, cwd: 'src/', src: [Object], dest: 'dest' } },

  { src: [ 'src/index.html' ],

    dest: 'dest/index.html',

    orig: { expand: true, cwd: 'src/', src: [Object], dest: 'dest' } },

  { src: [ 'src/js' ],

    dest: 'dest/js',

    orig: { expand: true, cwd: 'src/', src: [Object], dest: 'dest' } },

  { src: [ 'src/js/hellogrunt.js' ],

    dest: 'dest/js/hellogrunt.js',

    orig: { expand: true, cwd: 'src/', src: [Object], dest: 'dest' } },

  { src: [ 'src/js/helloworld.js' ],

    dest: 'dest/js/helloworld.js',

    orig: { expand: true, cwd: 'src/', src: [Object], dest: 'dest' } } ]

template
grunt.template.process(templateString, options): 處理模板字符串，與grunt.config.process相似但不同，返回string，options中的data屬性存放context
grunt.template.date(date, format): 格式化日期，format 'yyyy-mm-dd HH:MM:ss'
grunt.template.today(format): 格式化今天的日期
util
grunt.util.kindOf(value): 返回值的類型，比typeof詳細
grunt.util.error(msg[, origError]): 返回一個錯誤
grunt.util.linefeed: 當前系統的換行符
grunt.util.normalizelf(string): 將string中的換行符替換成當前系統的換行符
grunt.util.recurse(array/object, callback, continueFunction): 遞歸傳入array/object的值，如果continueFunction返回false，則返回原值，continueFunction返回true，則返回callback的值。
```
var arr = [1, 2, 3],

        result = grunt.util.recurse(arr, function(value) {

            console.log('value ' + value);

            return value * value;

        }, function(value) {

            if(value % 2 === 0)

                return false;

        });

    console.log('result ' + result);
```
輸出：
```
value

value

result ,,
```
grunt.util.repeat(n, str): 返回重復n次str的值
grunt.util.pluralize(n, str, separator): 以separator分隔str并返回第n個元素
grunt.util.spawn(options, doneFunction): 創建子進程執行任務，子進程退出時調用doneFunction
options{cmd: command, grunt: false, args: arguments, opts: options, fallback: value}
grunt.util.toArray(obj): 轉換為數組
grunt.util.callbackify: 將一個同步函數轉換為異步函數，即將帶返回值的函數轉換為一個傳入回調函數的函數
```
function add1(a, b) {

    return a + b;

}

function add2(a, b, callback) {

    callback(a + b);

}

var fn1 = grunt.util.callbackify(add1);

var fn2 = grunt.util.callbackify(add2);

var result1 = fn1(1, 2, function(result) {

    console.log('1 plus 2 equals ' + result);

});

var result2 = fn2(1, 2, function(result) {

    console.log('1 plus 2 equals ' + result);

});

console.log(result1);

console.log(result2);
```
輸出：
```
1 plus 2 equals 3

1 plus 2 equals 3

undefined

undefined
```

　　好了，這大體就是整個grunt的api介紹了，現在寫一個比較完善和優美的Gruntfile.js應該不是什么問題了吧。
　　以后有機會可能會補充些編寫grunt plugin的內容，現在就告一段落了。

總結

以上是生活随笔為你收集整理的grunt对象之api的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： 2023-04-02：设计一个仓库管理器
下一篇： CRLF——http response