[Tunny]Grunt基础介绍

最新推荐文章于 2024-11-04 16:01:37 发布

a9090143

最新推荐文章于 2024-11-04 16:01:37 发布

阅读量201

点赞数

文章标签：测试 javascript json ViewUI

原文链接：http://www.cnblogs.com/2014GTC/p/3838561.html

版权

[黄映焜/Tunny,20140711]

Grunt是一个JavaScript任务管理器，对于需要反复重复的任务，例如压缩、编译、单元测试、代码检查等，自动化工具可以减轻你的劳动，简化你的工作。

本文将通过官方示例整理一些入门级知识，适合需要了解Grunt的开发者阅读。

Grunt的task配置都是在 Gruntfile 中的grunt.initConfig方法中指定的。

当运行一个任务时，Grunt会自动查找配置对象中的同名属性。

多任务（multi-task）可以通过任意命名的“目标（target）”来定义多个配置。

同时指定任务（task）和目标（target），例如grunt concat:foo或者grunt concat:bar，将只会处理指定目标（target）的配置，而运行grunt concat将遍历所有目标（target）并依次处理。

在一个任务配置中，options属性可以用来指定覆盖内置属性的默认值。此外，每一个目标（target）中还可以拥有一个专门针对此目标（target）的options属性。目标（target）级的options将会覆盖任务级的options。

grunt.initConfig({ // Grunt的配置
  concat: {  // concat任务的配置信息
 options: {
        // 这里是任务级的Options，覆盖默认值  }, foo: {  files: { // 文件对象格式 'dest/a.js': ['src/aa.js', 'src/aaa.js'], 'dest/a1.js': ['src/aa1.js', 'src/aaa1.js'], },  options: { // "foo" target options may go here, overriding task-level options.  }, }, bar: { //bar任务的配置信息 files: [ // 文件数组格式 {src: ['src/bb.js', 'src/bbb.js'], dest: 'dest/b/', nonull: true},  {src: ['src/bb1.js', 'src/bbb1.js'], dest: 'dest/b1/', filter: 'isFile'}, ], }, },  uglify: { // uglify任务的配置信息  bar: { src: ['src/bb.js', 'src/bbb.js'], // 简洁格式 源文件  dest: 'dest/b.js', // 目标文件  }, }, //任意数据 });

如果没有指定一个任务，并且已经定义一个名为 "default" 的任务，那么该任务将会默认被执行

grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
/*定义一个 'default' 任务，如果运行Grunt时没有指定任何任务，它将自动执行'jshint'、'qunit'、'concat' 和 'uglify' 任务*/

简洁格式

所有的文件格式都支持src和dest属性，此外"Compact"[简洁]和"Files Array"[文件数组]格式还支持以下一些额外的属性：

filter 它通过接受任意一个有效的fs.Stats方法名或者一个函数来匹配src文件路径并根据匹配结果返回true或者false。
nonull 如果被设置为 true，未匹配的模式也将执行。结合Grunt的--verbore标志, 这个选项可以帮助用来调试文件路径的问题。
dot 它允许模式模式匹配句点开头的文件名，即使模式并不明确文件名开头部分是否有句点。
matchBase如果设置这个属性，缺少斜线的模式(意味着模式中不能使用斜线进行文件路径的匹配)将不会匹配包含在斜线中的文件名。例如，a?b将匹配/xyz/123/acb但不匹配/xyz/acb/123。
expand 处理动态的src-dest文件映射。

文件对象格式

这种形式支持每个目标对应多个src-dest形式的文件映射，属性名就是目标文件，源文件就是它的值(源文件列表则使用数组格式声明)。可以使用这种方式指定数个src-dest文件映射，但是不能够给每个映射指定附加的属性。

文件数组格式

这种形式支持每个目标对应多个src-dest文件映射，同时也允许每个映射拥有额外属性.

filter属性可以给你的目标文件提供一个更高级的详细帮助信息。只需要使用一个有效的fs.Stats 方法名。下面的配置仅仅清理一个与模式匹配的真实的文件：

grunt.initConfig({
  clean: {
    foo: {
      src: ['tmp/**/*'],
      filter: 'isFile',
    },
  },
});

或者创建你自己的filter函数，根据文件是否匹配来返回true或者false。下面的例子将仅仅清理一个空目录：

grunt.initConfig({
  clean: {
    foo: {
      src: ['tmp/**/*'],
      filter: function(filepath) {
        return (grunt.file.isDir(filepath) && require('fs').readdirSync(filepath).length === 0); }, }, }, });

通配符

* 匹配任意数量的字符，但不匹配 /
? 匹配单个字符，但不匹配 /
** 匹配任意数量的字符，包括 /，只要它是路径中唯一的一部分
{} 允许使用一个逗号分割的“或”表达式列表
! 在模式的开头用于排除一个匹配模式所匹配的任何文件

foo/*.js //匹配位于foo/目录下的所有的.js结尾的文件

foo/**/*js //匹配foo/目录以及其子目录中所有以.js结尾的文件

Grunt允许指定一个数组形式的文件路径或者一个通配符模式

// 指定单个文件：

{src: 'foo/this.js', dest: ...}

// 指定一个文件数组：

{src: ['foo/this.js', 'foo/that.js', 'foo/the-other.js'], dest: ...}

// 使用一个匹配模式：

{src: 'foo/th*.js', dest: ...}

动态构建文件对象

当你希望处理大量的单个文件时，这里有一些附加的属性可以用来动态的构建一个文件列表。这些属性都可以用于Compact和Files Array文件映射格式。

expand 设置为true用于启用下面的选项：
cwd 所有src指定的匹配都将相对于此处指定的路径（但不包括此路径）。
src 相对于cwd路径的匹配模式。
dest 目标文件路径前缀。
ext 对于生成的dest路径中所有实际存在文件，均使用这个属性值替换扩展名。
flatten 从生成的dest路径中移除所有的路径部分。
rename 对每个匹配的src文件调用这个函数(在重命名后缀和移除路径之后)。dest和匹配的src路径将被作为参数传入，此函数应该返回一个新的dest值。如果相同的dest返回不止一次，那么，每个返回此值的src来源都将被添加到一个数组中作为源列表。

grunt.initConfig({
  uglify: {
    static_mappings: {
    files: [
        {src: 'lib/a.js', dest: 'build/a.min.js'},
        {src: 'lib/b.js', dest: 'build/b.min.js'},
        {src: 'lib/subdir/c.js', dest: 'build/subdir/c.min.js'},
        {src: 'lib/subdir/d.js', dest: 'build/subdir/d.min.js'},
      ],
    },
    dynamic_mappings: {
    files: [
        {
          expand: true, // Enable dynamic expansion.  cwd: 'lib/', // Src matches are relative to this path. src: ['**/*.js'], // Actual pattern(s) to match. dest: 'build/', // Destination path prefix. ext: '.min.js', // Dest filepaths will have this extension.  }, ], }, }, });

模板

使用<% %>分隔符指定的模板会在任务从它们的配置中读取相应的数据时将自动扩展扫描。模板会被递归的展开，直到配置中不再存在遗留的模板相关的信息(与模板匹配的)。

grunt.initConfig({
  concat: {
    sample: {
      options: {
        banner: '/* <%= baz %> */\n',   // '/* abcde */\n'
      },
      src: ['<%= qux %>', 'baz/*.js'],  // [['foo/*.js', 'bar/*.js'], 'baz/*.js']  dest: 'build/<%= baz %>.js', // 'build/abcde.js'  }, }, //用于任务配置模板的任意属性 foo: 'c', bar: 'b<%= foo %>d', // 'bcd' baz: 'a<%= bar %>e', // 'abcde' qux: ['foo/*.js', 'bar/*.js'], });