Grunt之预处理

更新日期: 2019-10-19阅读: 1.6k标签: 函数

一、grunt预处理简述

grunt的注册任务函数本身会对传入的参数和配置对象里的相关属性进行一定的预处理,方便任务函数进行操作。
grunt的registerTask方法和registerMultiTask方法会进行不同的预处理。


二、预处理参数

grunt命令通过grunt taskname:arg1:arg2形式的脚本来传入参数。
grunt会给task对象增加nameArgs属性,其值为"taskname:arg1:arg2"
grunt会给task对象增加name属性,其值为"taskname"
grunt会给task对象增加args属性,registerTask方法下其值为 [ 'arg1', 'arg2' ],registerMultiTask方法下其值为 ['arg2' ]
grunt会给task对象增加flags属性,registerTask方法下其值为 [ arg1:true, arg2:true ],registerMultiTask方法下其值为 [arg2::true]
grunt会将args作为参数传给任务的执行函数,registerTask方法下会将arg1,arg2作为执行函数的参数,registerMultiTask方法下会将arg2作为执行函数的参数。


三、registerTask预处理配置对象

grunt会为task对象新增options方法,该方法可以用来获取配置参数下与task名称对应属性下options属性中的值。例如

module.exports = function(grunt) {
    grunt.initConfig({
        hello: {
            options: {
                who: 'Kate'
            }
        }
    });
    grunt.registerTask("hello", function() {
        var options = this.options({ who: 'unknown' });
       console.log('hello,'+options.who); //hello,Kate
    });
};

四、registerMultiTask预处理配置对象

grunt会为task对象新增options方法,该方法除了会获取配置参数下与task名称对应属性下options属性中的值,其值还会进一步被目标级的options对象的属性覆盖,例如

module.exports = function(grunt) {
  grunt.initConfig({
    hello: {
      options: {
        who: 'Kate'
      },
      Jingle:{
        options: {
          who: 'Jingle'
        }
      }
    }
  });
  grunt.registerMultiTask("hello", function() {
    var options = this.options({ who: 'unknown' });
    console.log('hello,'+options.who); //hello,Jingle
  });
};

复合任务会依次执行其所包含的所有除了options以外的已命名的子属性。相应的,注册复合任务的方法也会依次预处理除了options以外的已命名的子属性。
每轮任务中,grunt会为task对象赋予target属性,target属性值为配置对象当前正被遍历的目标的名称。data属性值为配置对象当前正被遍历的目标对应的数据。如上例中,在子任务Log:Jingle中,target为Jingle,data为:

{
  options: {
    who: 'Jingle'
  }
}

由于大多的任务都是执行文件操作,Grunt的注册复合任务的方法中会尽量的将data进一步处理,将其支持的各种格式自动标准化为一个唯一的格式:文件数组格式并将其赋值给任务对象的files属性。
Grunt支持如下的文件模式:


1.最简格式

这个是定义文件数组的最简单的模式,直接定义文件字符串或文件名数组,对应files[0].src, target属性值对应files[0].dest。该格式不支持附加属性。


2.简洁格式

简洁格式(Compact Format)允许单独定义src或dest,支持附加属性,直接对应files[0]。


3.文件对象格式

文件对象格式(Files Object Format)支持多个src-dest映射,属性名是目标文件,属性值是源文件。可利用该格式指定多个映射,但是不支持附加属性。


4.文件数组格式

文件数组格式(Files Array Format)是files属性所使用的格式,支持附加属性,如果不设置expand为true,则相当于将data直接赋值给files


5.实例

module.exports = function(grunt) {
  grunt.initConfig({
    Log: {
      jian1:"1.txt", //最简格式
      jian2:["1.txt","2.txt"], //最简格式
      compact:{dest:"/dist",prop1:true}, //简洁格式
      fileobject: { //文件对象格式
        files: {
          'dest/a.js': ['src/aa.js', 'src/aaa.js'],
          'dest/a1.js': ['src/aa1.js', 'src/aaa1.js']
        }
      },
      filearray: {  //文件数组格式
        files: [
          {src: ['src/a.js', 'src/b.js'], dest: 'dest/a/', nonull:true,prop1:true},
          {src: ['src/a1.js', 'src/b1.js'], dest: 'dest/a1/', filter: 'isFile'}
        ]
      }
    }
  });
  grunt.registerMultiTask("Log", function() {
    console.log(this.files); 
  });
};

输出为:

[
  {
    src: [Getter],
    dest: 'jian1',
    orig: { src: [Array], dest: 'jian1' }
  }
]

Running "Log:jian2" (Log) task
[
  {
    src: [Getter],
    dest: 'jian2',
    orig: { src: [Array], dest: 'jian2' }
  }
]

Running "Log:compact" (Log) task
[
  {
    dest: [ '1.txt' ],
    prop1: true,
    orig: { dest: '/dist', prop1: true }
  }
]

Running "Log:fileobject" (Log) task
[
  {
    src: [Getter],
    dest: 'dest/a.js',
    orig: { src: [Array], dest: 'dest/a.js' }
  },
  {
    src: [Getter],
    dest: 'dest/a1.js',
    orig: { src: [Array], dest: 'dest/a1.js' }
  }
]

Running "Log:filearray" (Log) task
[
  {
    src: [Getter],
    dest: 'dest/a/',
    nonull: true,
    prop1: true,
    orig: { src: [Array], dest: 'dest/a/', nonull: true, prop1: true }
  },
  {
    src: [Getter],
    dest: 'dest/a1/',
    filter: 'isFile',
    orig: { src: [Array], dest: 'dest/a1/', filter: 'isFile' }
  }
]

五、动态构建文件数组

当你希望处理大量的单个文件时,可以通过匹配和一些替换操作来动态构建一个文件列表。只有Compact和Files Array文件映射格式支持这种动态构建文件数组的方式,这时需要在src中增加一些通配符,并附加一些额外的属性,最重要的是,我们需要将expand设置为true来开启这种操作。grunt默认支持的属性有:

1.src(必须)

定义源文件。可为字符串或数组,可包含通配符。
简单常用通配符如下:

  • *匹配任意数量的字符,但不匹配 /
  • ?匹配单个字符,但不匹配 /
  • **匹配任意数量的字符,包括 /,只要它是路径中唯一的一部分
  • {}允许使用一个逗号分割的字符列表,用来匹配字符列表中的任一个字符,如{a,b}匹配a或者b
  • !在模式的开头用于排除该匹配模式所匹配的任何文件,例如
// 除bar.js之外的所有的.js文件,按字母顺序排序:
{src: ['foo/*.js', '!foo/bar.js'], dest: ...}
// 按字母顺序排序的所有.js文件,但是bar.js在最后。
{src: ['foo/*.js', '!foo/bar.js', 'foo/bar.js'], dest: ...}

2.dest(必须)

目标文件路径前缀。只能为字符串

3.cwd

所有src指定的匹配都将相对于此处指定的路径(但不包括此路径)

{cwd:'foo', src: ['*.js', '!bar.js'], dest: ...}

相当于

{src: ['foo/*.js', '!foo/bar.js'], dest: ...}

4.ext

对于生成的dest路径中所有实际存在文件,均使用这个属性值替换扩展名。

5.extDot

用于指定标记扩展名的英文点号的所在位置。可以赋值 'first' (扩展名从文件名中的第一个英文点号开始) 或 'last' (扩展名从最后一个英文点号开始),默认值为 'first'。

6.flatten

从生成的dest路径中移除所有的路径部分。

7.rename

对每个匹配的src文件调用这个函数(在重命名后缀和移除路径之后)。dest和匹配的src路径将被作为参数传入,此函数应该返回一个新的dest值。 如果相同的dest返回不止一次,那么,每个返回此值的src来源都将被添加到一个数组中作为源列表。

8.filter

filter属性对匹配到的源文件进行过滤,去除不符合条件的源文件。
filter属性可定义为任意一个有效的fs.Stats方法名:

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

或者定义你自己的filter函数,通过返回true或者false来保留或者过滤文件。下面的例子会将字符串长度小于4的文件名过滤掉:

grunt.initConfig({
  clean: {
    foo: {
      src: ['tmp/**/*'],
      filter: function(filepath) {
        return filepath.length >= 4;
      },
    },
  },
});
作者:Jingle Guo
出处:http://www.cnblogs.com/studynote/


链接: https://fly63.com/article/detial/6512

JavaScript 函数式编程

我理解的 JavaScript 函数式编程,都认为属于函数式编程的范畴,只要他们是以函数作为主要载体的。

Js函数式编程,给你的代码增加一点点函数式编程的特性

给你的代码增加一点点函数式编程的特性,最近我对函数式编程非常感兴趣。这个概念让我着迷:应用数学来增强抽象性和强制纯粹性,以避免副作用,并实现代码的良好可复用性。同时,函数式编程非常复杂。

让我们来创建一个JavaScript Wait函数

Async/await以及它底层promises的应用正在猛烈地冲击着JS的世界。在大多数客户端和JS服务端平台的支持下,回调编程已经成为过去的事情。当然,基于回调的编程很丑陋的。

JavaScript函数创建的细节

如果你曾经了解或编写过JavaScript,你可能已经注意到定义函数的方法有两种。即便是对编程语言有更多经验的人也很难理解这些差异。在这篇博客的第一部分,我们将深入探讨函数声明和函数表达式之间的差异。

编写小而美函数的艺术

随着软件应用的复杂度不断上升,为了确保应用稳定且易拓展,代码质量就变的越来越重要。不幸的是,包括我在内的几乎每个开发者在职业生涯中都会面对质量很差的代码。这些代码通常有以下特征:

javascript回调函数的理解和使用方法(callback)

在js开发中,程序代码是从上而下一条线执行的,但有时候我们需要等待一个操作结束后,再进行下一步操作,这个时候就需要用到回调函数。 在js中,函数也是对象,确切地说:函数是用Function()构造函数创建的Function对象。

js调用函数的几种方法_ES5/ES6的函数调用方式

这篇文章主要介绍ES5中函数的4种调用,在ES5中函数内容的this指向和调用方法有关。以及ES6中函数的调用,使用箭头函数,其中箭头函数的this是和定义时有关和调用无关。

JavaScript中函数的三种定义方法

函数的三种定义方法分别是:函数定义语句、函数直接量表达式和Function()构造函数的方法,下面依次介绍这几种方法具体怎么实现,在实际编程中,Function()构造函数很少用到,前两中定义方法使用比较普遍。

js在excel的编写_excel支持使用JavaScript自定义函数编写

微软 称excel就实现面向开发者的功能,也就是说我们不仅可以全新定义的公式,还可以重新定义excel的内置函数,现在Excel自定义函数增加了使用 JavaScript 编写的支持,下面就简单介绍下如何使用js来编写excel自定义函数。

js中的立即执行函数的写法,立即执行函数作用是什么?

这篇文章主要讲解:js立即执行函数是什么?js使用立即执行函数有什么作用呢?js立即执行函数的写法有哪些?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!