`
zhouyrt
  • 浏览: 1171925 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

如何自定义Grunt任务

    博客分类:
  • Node
 
阅读更多

任务(Tasks)是grunt的核心概念,你所做的很多工作比如资源合并(concat)、压缩(uglify)都是在配置任务。
每次grunt运行的时候,你指定的一个或多个任务也在运行,如果你没有指定任务,那么一个默认名为“default”的任务将自动运行。

 

有时我们需要写一些自己的grunt任务,下面是一个具体例子

 

一、准备

1. 新建一个目录g1
2. 新建package.json,放入g1
3. 新建Gruntfile.js,放入g1

 

package.json

{
    "name": "g1",
    "version": "0.1.0",
    "author": "@snandy",
    "homepage": "http://www.g1.com",
    "devDependencies": {
        "grunt": "~0.4.0"
    }
}

4. cd进入g1,npm install安装grunt包

 

这整个目录结构如下

 

Gruntfile.js暂时空着。

 

二、创建一个最简单的任务

grunt.registerTask(taskName, [description,] taskFunction)

taskName: 任务名称,命令行里使用 grunt + taskName
description: 任务的描述
taskFunction: 任务的实现

 

Gruntfile.js里填入一下代码

module.exports = function(grunt) {
    grunt.registerTask('mytask', '一个最简单的任务演示,根据参数打印不同的输出.', function(arg1, arg2) {
        if (arguments.length === 0) {
            grunt.log.writeln('任务' + this.name + ", 没有传参数");
        } else if (arguments.length === 1) {
            grunt.log.writeln('任务' + this.name + ", 有一个参数是" + arg1);
        } else {
            grunt.log.writeln('任务' + this.name + ", 有两个参数分别是" + arg1 + ", " + arg2);
        }
    });
};

 

注册了一个任务“mytask”,实现一个最简单的根据所传参数不同实现不同的打印输出,看运行结果我们需要进入命令行。

 

进入到g1目录,输入 grunt mytask

 

再输入 grunt mytask:snandy

任务名后面加一个冒号就可以传参了

 

再输入 grunt mytask:snandy:backus

冒号间隔可以传多个参数

 

三、一次创建多个任务

grunt.registerMultiTask(taskName, [description,] taskFunction)

可以看到参数是一样的,方法名不同。但使用方式却不太同,需要先初始化config,Gruntfile.js如下

module.exports = function(grunt) {
    grunt.initConfig({
        log: {
            t1: [1, 2, 3],
            t2: 'hello world',
            t3: false
        }
    });
 
    grunt.registerMultiTask('log', 'Log stuff.', function() {
        grunt.log.writeln(this.target + ': ' + this.data);
    });
};

进入g1目录,分别测试下

输入 grunt,会依次执行三个子任务t1, t2, t3

 

分别输入 grunt log:t1, grunt log:t2, grunt log:t3


 
 

四、任务间通讯

在一个任务内部可以调用另外一个任务,如下

module.exports = function(grunt) {
 
    grunt.registerTask('mytask', '一个最简单的任务演示,根据参数打印不同的输出.', function(arg1, arg2) {
        if (arguments.length === 0) {
            grunt.log.writeln('任务' + this.name + ", 没有传参数");
        } else if (arguments.length === 1) {
            grunt.log.writeln('任务' + this.name + ", 有一个参数是" + arg1);
        } else {
            grunt.log.writeln('任务' + this.name + ", 有两个参数分别是" + arg1 + ", " + arg2);
        }
    });
 
    grunt.registerTask('default', '默认的任务', function() {
        // 调用mytask
        grunt.task.run('mytask:param1:param2')
    })
};

 

进入命令行,输入grunt

 

调用多个任务,以逗号分隔传给run方法即可,或者以数组形式

grunt.registerTask('default', '默认的任务', function() {
    grunt.task.run('mytask1', 'mytask2')
    // 或者
    grunt.task.run(['mytask1', 'mytask2'])   
})

 
 


 

  • 大小: 1.3 KB
  • 大小: 5 KB
  • 大小: 6 KB
  • 大小: 6.6 KB
  • 大小: 6.5 KB
  • 大小: 13.2 KB
  • 大小: 6.1 KB
分享到:
评论

相关推荐

    custom-grunt-examples:自定义 grunt 任务示例

    本文将深入探讨如何自定义Grunt任务,包括创建和加载任务、访问命令行选项、操作配置选项、利用Grunt日志以及处理异步任务。 ### 创建和加载任务 创建自定义Grunt任务首先需要在项目根目录下创建`Gruntfile.js`...

    grunt-build-countdown:用于构建特定文件夹结构的自定义grunt任务

    “grunt-build-countdown”是一个Grunt任务,专门设计用于创建或管理项目中特定的文件和目录布局。在JavaScript开发中,拥有良好的文件组织结构可以提高代码的可维护性和团队协作效率。这个插件就是为了解决这个问题...

    使用GruntJS构建Web程序之Tasks(任务)篇

    如何自定义Grunt任务 有时我们需要写一些自己的grunt任务,下面是一个具体例子 一、准备 1. 新建一个目录g12. 新建package.json,放入g13. 新建Gruntfile.js,放入g1 package.json 代码如下: { “name”: “g1”,...

    grunt-plugin-rename-from-file:自定义grunt任务,用于根据名称的json列表批量重命名图像

    grunt-plugin-rename-from-file 通过将文件映射到提供的名称列表来批量重命名文件。 旨在重命名与来自json...“ plugin_rename_from_file”任务 选项 图片 要重命名的图像的目的地 名字 JSON文件的目标,其中包含要使

    grunt-custom-task:https的练习代码

    在“grunt-custom-task-master”这个压缩包中,可能包含了用于学习和练习自定义Grunt任务的代码和配置文件。 首先,让我们了解一下Grunt的基本结构。一个Grunt项目通常包含以下文件: 1. `package.json`:这个文件...

    sails-grunt-custom-example:风帆咕unt的自定义示例

    这通常涉及修改`tasks/register`和`tasks/config`目录下的文件,以创建和配置自定义Grunt任务。 5. **Grunt插件** 示例中可能使用了一些特定的Grunt插件,如`grunt-contrib-clean`用于清理目录,`grunt-contrib-...

    gruntjs-custom-plugin-boilerplate:自定义 Grunt 插件样板

    自定义 Grunt 插件样板这是一个快速而肮脏的 Grunt 插件样板。 您还可以访问 Gruntjs 上的并以这种方式获取示例样板。设置说明cd进入目录npm install 如果您愿意,可以在Gruntfile.js配置传递给custom_plugin任务的...

    grunt-json-mapreduce:对 JSON 文件执行自定义函数的 Grunt 任务

    对 JSON 文件执行自定义函数的 Grunt 任务 入门 这个插件需要 Grunt >=0.4.0 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。 熟悉该过程后,您可以使用以下命令安装此...

    grunt-buddha-janeluck:自定义 grunt 插件

    咕噜佛佛光如阳光入门这...“buddha_janeluck”任务概述在项目的 Gruntfile 中,将名为buddha_janeluck的部分添加到传递给grunt.initConfig()的数据对象中。 grunt . initConfig ( { buddha_janeluck : { options : {

    grunt-cli压缩包-0.1.13版本

    `grunt-cli`是Grunt(一个JavaScript任务运行器)的命令行接口,它允许开发者在命令行中执行Grunt任务。这个压缩包包含了`grunt-cli`的0.1.13版本,这是一个早期但仍然被一些项目依赖的版本。在这个版本中,除了`...

    Grunt中文文档.doc

    2. **任务配置**:定义在`grunt.initConfig()`中的对象,提供了Grunt任务所需的数据。 3. **任务加载**:通过`grunt.loadNpmTasks('plugin-name')`加载Grunt插件。 4. **自定义任务**:使用`grunt.registerTask()`...

    angular-photo-demo:使用 Angular 的照片库的原始演示应用程序

    自定义 Grunt 任务将输入图片的大小调整为各种大小的停靠点,并创建一个静态 JSON 文件来为它们编制索引。 Angular 应用程序使用 JSON 文件来显示图库,并允许以完全适合浏览器宽度的不同大小停止查看。 安装 安装 ...

    grunt-contact 模块

    2. **定制化任务**:由于没有详细描述,`grunt-contact`可能提供了一种自定义任务的方式,允许开发者根据需求创建特定的文件处理规则。 3. **接触信息管理**:虽然名字中包含“contact”,但这个模块在Grunt的上...

    grunt.js cookbook

    - **环境配置管理**:根据不同环境(开发、测试、生产)配置不同的Grunt任务,实现环境间的平滑切换。 #### 六、高级用法 - **多环境支持**:在`Gruntfile.js`中可以通过条件判断实现不同环境下的任务配置。 - **...

    grunt官方文档

    这通常涉及编写一个Node.js模块,包含一个导出对象,该对象的属性是Grunt任务函数。 ### 4. 项目模板 `project-scaffolding.html` 讨论了项目模板的概念,这允许快速设置新项目的结构。Grunt提供了`grunt-init`模板...

    grunt demo

    此外,Grunt 还支持自定义任务,你可以编写 JavaScript 函数来执行特定操作,这使得构建流程更加灵活。 **Grunt 的使用场景** 1. **代码预处理**:如 Sass/LESS 到 CSS 的转换。 2. **代码合并**:合并多个 ...

    学习grunt

    ### 五、运行Grunt任务 在完成配置并保存`Gruntfile.js`后,只需在项目根目录下运行以下命令即可执行默认任务: ``` grunt ``` 如果你定义了特定的任务,如`test`,则可以运行: ``` grunt test ``` 通过Grunt,你...

    grunt前端构建工具

    它允许开发者自定义任务,适应不同的项目需求。通过`npm install`命令安装的`node_modules`目录中包含了Grunt及其所有依赖的插件,使得这些自动化任务得以执行。了解并熟练使用Grunt,对于前端开发者来说,是提升...

    grunt代码优化管理工具源码

    在实践中,我们可以通过阅读源码学习grunt的事件驱动模型,理解任务执行的流程,以及如何编写自定义任务。同时,源码中的错误处理和日志记录机制也是值得学习的地方,这对于调试和优化构建过程非常有帮助。 总的来...

Global site tag (gtag.js) - Google Analytics