好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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

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

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

您可能感兴趣的相关文章

经典的白富美型 jQuery 图片轮播插件 精心挑选的优秀 jQuery Ajax 分页插件 十款精心挑选的在线CSS3代码生成工具 让人爱不释手的13套精美网页图标素材 10套精美的免费网站后台管理系统模板

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

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

作者: Leo_wl

    

出处: http://www.cnblogs.com/Leo_wl/

    

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

版权信息

查看更多关于JavaScript 项目构建工具 Grunt 实践:任务和指令的详细内容...

  阅读:39次