Grunt学习笔记

Grunt配置

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

  grunt.initConfig({
    concat: {
      // 这里是concat任务的配置信息。
    },
    uglify: {
      // 这里是uglify任务的配置信息
    },
    // 任意数据。
    my_property: 'whatever',
    my_src_files: ['foo/*.js', 'bar/*.js'],
  });         
  

• 任务配置和目标

  • 同时指定任务（task）和目标（target），例如grunt concat:foo或者grunt concat:bar，将只会处理指定目标（target）的配置，而运行grunt concat将遍历所有目标（target）并依次处理。注意，如果一个任务使用grunt.task.renameTask重命名过，Grunt将在配置对象中查找以新的任务名命名的属性。

  grunt.initConfig({
    concat: {
      foo: {
        // concat task "foo" target options and files go here.
      },
      bar: {
        // concat task "bar" target options and files go here.
      },
    },
    uglify: {
      bar: {
        // uglify task "bar" target options and files go here.
      },
    },
  });
  

• options属性

  • options属性可以用来指定覆盖任务或目标内置属性的默认值

  grunt.initConfig({
    concat: {
      options: {
        // 这里是任务级的Options，覆盖默认值 
      },
      foo: {
        options: {
          // "foo" target options may go here, overriding task-level options.
        },
      },
      bar: {
        // No options specified; this target will use task-level options.
      },
    },
  });
  

• 文件

  • 大多的任务都是执行文件操作，Grunt定义通用的文件描述属性；属性如下
    1. src和dest
    2. filter 它通过接受任意一个有效的fs.Stats方法名或者一个函数来匹配src文件路径并根据匹配结果返回true或者false。
    3. nonull 如果被设置为 true，未匹配的模式也将执行。结合Grunt的--verbore标志, 这个选项可以帮助用来调试文件路径的问题。
    4. dot 它允许模式模式匹配句点开头的文件名，即使模式并不明确文件名开头部分是否有句点。
    5. matchBase如果设置这个属性，缺少斜线的模式(意味着模式中不能使用斜线进行文件路径的匹配)将不会匹配包含在斜线中的文件名。 例如，a?b将匹配/xyz/123/acb但不匹配/xyz/acb/123。
    6. expand 处理动态的src-dest文件映射，更多的信息请查看动态构建文件对象。
    7. 其他的属性将作为匹配项传递给底层的库。 请查看node-glob 和minimatch 文档以获取更多信息。

  grunt.initConfig({
    jshint: {
      foo: {
        src: ['src/aa.js', 'src/aaa.js']
      },
    },
    concat: {
      bar: {
        src: ['src/bb.js', 'src/bbb.js'],
        dest: 'dest/b.js',
      },
    },
  });
  

  grunt.initConfig({
      uglify: {
          min: {
              files: [
                  {src: ['*.js'], dest: 'build/', expand: true}
              ]
          }
      }
  });
  

• 文件对象格式

  • src-dest形式的文件映射，属性名就是目标文件，源文件就是它的值(源文件列表则使用数组格式声明)

  grunt.initConfig({
    concat: {
      foo: {
        files: {
          'dest/a.js': ['src/aa.js', 'src/aaa.js'],
          'dest/a1.js': ['src/aa1.js', 'src/aaa1.js'],
        },
      },
      bar: {
        files: {
          'dest/b.js': ['src/bb.js', 'src/bbb.js'],
          'dest/b1.js': ['src/bb1.js', 'src/bbb1.js'],
        },
      },
    },
  });
  

• 文件数组格式

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

  grunt.initConfig({
    concat: {
      foo: {
        files: [
          {src: ['src/aa.js', 'src/aaa.js'], dest: 'dest/a.js'},
          {src: ['src/aa1.js', 'src/aaa1.js'], dest: 'dest/a1.js'},
        ],
      },
      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'},
        ],
      },
    },
  });
  

• 自定义过滤函数

  • 只需要使用一个有效的fs.Stats （nodejs）方法名

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

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

• 通配符模式

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

• 动态构建文件对象

  • 希望处理大量的单个文件时，有一些附加的属性可以用来动态的构建一个文件列表。这些属性都可以用于Compact和Files Array文件映射格式。expand 设置为true时启用；

    1. cwd 所有src指定的匹配都将相对于此处指定的路径（但不包括此路径） 。
    2. src 相对于cwd路径的匹配模式。
    3. dest 目标文件路径前缀。
    4. ext 对于生成的dest路径中所有实际存在文件，均使用这个属性值替换扩展名。
    5. extDot 用于指定标记扩展名的英文点号的所在位置。可以赋值 'first' （扩展名从文件名中的第一个英文点号开始） 或 'last' （扩展名从最后一个英文点号开始），默认值为 'first' [添加于 0.4.3 版本]
    6. flatten 从生成的dest路径中移除所有的路径部分。
    7. rename 对每个匹配的src文件调用这个函数(在重命名后缀和移除路径之后)。dest和匹配的src路径将被作为参数传入，此函数应该返回一个新的dest值。 如果相同的dest返回不止一次，那么，每个返回此值的src来源都将被添加到一个数组中作为源列表。

    grunt.initConfig({
      uglify: {
        static_mappings: {
          // Because these src-dest file mappings are manually specified, every
          // time a new file is added or removed, the Gruntfile has to be updated.
          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: {
          // Grunt will search for "**/*.js" under "lib/" when the "uglify" task
          // runs and build the appropriate src-dest file mappings then, so you
          // don't need to update the Gruntfile when files are added or removed.
          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.
              extDot: 'first'   // Extensions in filenames begin after the first dot
            },
          ],
        },
      },
    });
    

• 模板

  • 使用<% %>分隔符指定的模板会被递归的展开
  • 在模板中使用grunt以及它的方法都是有效的，例如： <%= grunt.template.today('yyyy-mm-dd') %>。
  • <%= prop.subprop %> 将会自动展开配置信息中的prop.subprop的值，不管是什么类型。像这样的模板不仅可以用来引用字符串值，还可以引用数组或者其他对象类型的值。
  • <% %> 执行任意内联的JavaScript代码。对于控制流或者循环来说是非常有用的。

• 导入外部数据

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      dist: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'dist/<%= pkg.name %>.min.js'
      }
    }
  });
  

完整实例

~~~
module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: ['src/**/*.js'],
        dest: 'dist/<%= pkg.name %>.js'
      }
    },
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
      },
      dist: {
        files: {
          'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
        }
      }
    },
    qunit: {
      files: ['test/**/*.html']
    },
    jshint: {
      files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      options: {
        //这里是覆盖JSHint默认配置的选项
        globals: {
          jQuery: true,
          console: true,
          module: true,
          document: true
        }
      }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint', 'qunit']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-qunit');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');

  grunt.registerTask('test', ['jshint', 'qunit']);

  grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

};
~~~

插件名称

• grunt-contrib-uglify 压缩文件
• grunt-contrib-qunit 执行qunit单元测试
• grunt-contrib-concat 合并文件
• grunt-contrib-jshint 代码检查
• grunt-contrib-watch 运行时监视的文件类型被添加，更改或删除预定义任务