Grunt学习--tasks的书写风格、options、通配符模式、模板与导入外部数据

tasks的书写风格

1、简洁风格

grunt.initConfig({
    jshint:{
      foo:{
        src:['./src/js/index.js']
      },
      bar:{
        src:['./src/js/nav.js']
      }
    },
    concat:{
      options: {
        separator: ';',
      },
      dist: {
        src: 'src/css/*.css',
        dest: 'build/css/index.min.css',
      },
    },
  });

在终端中输入 grunt + 任务名即可开启任务
1、grunt jshint 开启所有的jshint任务
2、grunt jshint:foo 开启jshint任务下的foo任务

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

options对象是可选的，如果不需要，可以忽略。

2、文件对象格式

grunt.initConfig({
    concat:{
      foo:{
        files:{
          'build/css/index.min.css':['src/css/index.css','src/css/nav.css'],
        }
      }
    },
  });

注意：
使用这种风格编写时必须带上任务名，例如上式中concat下存在这foo任务
如果没有这个foo任务名，grunt虽然或在控制台报"Done!"
但实质上时没有工作的

options属性

在一个任务配置中，options属性可以用来指定覆盖内置属性的默认值

options对象是可选的，如果不需要，可以忽略

glob下的通配符模式

匹配路径规则

• * 匹配任意数量的字符，但不匹配 /
  

•   ? 匹配单个字符，但不匹配 /
  

•   ** 匹配任意数量的字符，包括 /，只要它是路径中唯一的一部分
  

•   {} 允许使用一个逗号分割的“或”表达式列表
  

•   ! 在模式的开头用于排除一个匹配模式所匹配的任何文件
  

“动态”构建文件对象

通过一些属性来动态的构建一个文件列表

首先在files属性中设置expand=true

然后调整下面这些属性

1、cwd src根路径设置
2、src src下的匹配路径设置
3、dest  dest输出文件的根路径配置
4、ext 生成文件的扩展名
5、extDot 用于指定标记扩展名的英文点号的所在位置
	可以赋值 'first' （扩展名从文件名中的第一个英文点号开始） 
	或 'last' （扩展名从最后一个英文点号开始）
	默认值为 'first' [添加于 0.4.3 版本]

来看官方给出的例子

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: {
      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
        },
      ],
    },
  },
});

static_mappings和dynamic_mappings能匹配到相同的路径

模板

使用<% %>分隔符指定的模板会在任务从它们的配置中读取相应的数据时将自动扩展扫描

模板会被递归的展开，直到配置与模板匹配

来看官方给出的例子

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'],
});

注意:

• 这里src和dest不能写files上级，否则会报错： write “src” file (Error code: EISDIR)
• 模板可以递归调用
  就像上面的例子中/foo: ‘c’,
  bar: ‘b<%= foo %>d’, // ‘bcd’
  baz: ‘a<%= bar %>e’, // ‘abcde’/ baz最终会匹配abcde这个字符串
• 只能将配置信息存放在initConfig中

导入外部数据

在一开始给出的Grunt模板中有这样一段代码：

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'
    }
  }
});

Grunt有grunt.file.readJSON和grunt.file.readYAML两个方法分别用于引入JSON和YAML数据。

后面会更详细的说明