JavaScript 项目构建工具 Grunt 实践:任务和指令

   Grunt 是一个基于任务的 JavaScript 项目命令行构建工具,运行于 Node.js 平台。Grunt 能够从模板快速创建项目,合并、压缩和校验 CSS & JS 文件,运行单元测试以及运行静态服务器。上一篇文章《JavaScript 项目构建工具 Grunt 实践:安装和创建项目框架》介绍了 Grunt 安装和创建项目框架步骤,这篇文章介绍 Grunt 中的任务和指令。

 

JavaScript 项目构建工具 Grunt 实践:任务和指令

 

Grunt 任务

  Grunt 内置下面六种基本的任务:

  • ✓  init – 从模板生成项目框架
  • ✓  concat – 合并文件
  • ✓  lint – 使用 JSHint 校验代码
  • ✓  min – 使用 UglifyJS 压缩代码
  • ✓  quint – 运行 Qunit 单元测试(依赖 PhantomJS
  • ✓  server – 启动静态服务器

  任务按使用方式可以分为别名任务、多任务和自定义任务。

  一、别名任务

  基本语法:

grunt.registerTask(taskName, [description, ] taskList);  

  taskName:任务别名,descripation:任务描述,taskList:任务列表。

  使用示例:

grunt.registerTask('theworks', 'lint qunit concat min');  

  这样定义以后,下面两条命令是等价的:

grunt theworks  grunt lint qunit concat min  

  如果别名是 “default”,那么命令还可以更简单,只需要输入 grunt 就可以了。

grunt.registerTask('default', 'lint qunit concat min');  

  下面三条命令是等价的:

grunt  grunt default  grunt lint qunit concat min  

  二、多任务

  多任务是在如果没有指定任务目标的时候隐式地遍历所有的目标。例如下面的配置,运行 grunt lint:test 或者是 grunt lint:lib 都是校验特定的目录下的 JavaScript 文件,如果是运行 grunt lint 则是自动运行 test、lib 和 grunt 三个目标。

/*global config:true, task:true*/  grunt.initConfig({    lint: {      test: ['test/*.js'],      lib: ['lib/*.js'],      grunt: ['grunt.js']    }  });  

  三、自定义任务

  如果你的任务不遵循多任务模式,可以自定义任务:

grunt.registerTask('default', 'My "default" task description.', function() {    grunt.log.writeln('Currently running the "default" task.');  });  

  在任务里还可以嵌套其它任务:

grunt.registerTask('foo', 'My "foo" task.', function() {    // Enqueue "bar" and "baz" tasks, to run after "foo" finishes, in-order.    grunt.task.run('bar baz');    // Or:    grunt.task.run(['bar', 'baz']);  });  

  甚至运行异步任务:

grunt.registerTask('asyncfoo', 'My "asyncfoo" task.', function() {    // Force task into async mode and grab a handle to the "done" function.    var done = this.async();    // Run some sync stuff.    grunt.log.writeln('Processing task...');    // And some async stuff.    setTimeout(function() {      grunt.log.writeln('All done!');      done();    }, 1000);  });

Grunt 指令

  Grunt 内置下面五种指令:

  <config:prop.subprop>

  用于扩展 prop.subprop 配置属性的值。

  <json:file.json>

  用于调用通过 grunt.file.parseJSON 从 file.json 解析出来的对象。

  <banner:prop.subprop>

  用于访问 prop.subprop 参数属性,通过 grunt.template.process 解析。

  <file_strip_banner:file.js>

  用于引入将要嵌入注释的脚本文件

  <file_template:file.js>  

  用于引入模板文件,通过 grunt.template.process 解析。

您可能感兴趣的相关文章

 

本文链接:JavaScript 项目构建工具 Grunt 实践:任务和指令

编译来源:前端里 ◆ 关注前端开发技术 ◆ 分享网页设计资源

赞 (0) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏