Javascript模块化开发3——Grunt之预处理
一、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;
},
},
},
});
Javascript模块化开发3——Grunt之预处理的更多相关文章
- Javascript模块化开发4——Grunt常用模块
一.copy 用于复制文件与目录. grunt-contrib-copy 二.eslint 检测代码的合理性. grunt-eslint 常见参数: 1.quiet 是否只显示errors.默认值fa ...
- Javascript 模块化开发上线解决方案
最近又换部门了,好频繁地说...于是把这段时间搞的小工具们简单整理了一下,作了一个小的总结.这次用一个简单业务demo来向大家介绍一下Javascript模块化开发的方式和自动化合并压缩的一些自己的处 ...
- Javascript模块化开发,使用模块化脚本加载工具RequireJS,提高你代码的速度和质量。
随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...
- JavaScript模块化开发整理
在网上已经有很多关于模块化开发的文章了,这里还是按照自己的理解来整理一下. 随着项目文件的越来越大和需求的越来越贴近现实(我发现现在客户不如:一个领导说我要审批你们报上来的资料,系统发布以后用的还不错 ...
- Javascript模块化开发-轻巧自制
Javascript模块化开发-轻巧自制 一.前言现在javascript的流行,前端的代码越来越复杂,所以我们需要软件工程的思想来开发前端.模块化是必不可少的,这样不仅能够提高代码的可维护性.可扩展 ...
- JavaScript模块化开发的那些事
模块化开发在编程开发中是一个非常重要的概念,一个优秀的模块化项目的后期维护成本可以大大降低.本文主要介绍了JavaScript模块化开发的那些事,文中通过一个小故事比较直观地阐述了模块化开发的过程. ...
- 详解JavaScript模块化开发
什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等 ...
- 2.精通前端系列技术之JavaScript模块化开发 seajs(一)
在使用seajs模块化开发之前,直接在页面引用js会容易出现冲突及依赖相关的问题,具体问题如下 问题1:多人开发脚本的时候容易产生冲突(比如全局参数冲突,方法名冲突),可以使用命名空间降低冲突,不能完 ...
- JavaScript模块化开发实例
最近接触了一些JavaScript开发的例子,在这里与大家一起分享一下: 例子:当我们一个团队在写Js文件的时候,你一个人写的JS代码自己可以看懂也可以维护,但是别人想对你的JS进行扩展的话,如果都在 ...
随机推荐
- Vue中兄弟组件间传值-(Bus/总线/发布订阅模式/观察者)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS基础-this
this this的指向有哪几种情况? this代表函数调用相关联的对象,通常页称之为执行上下文. 作为函数直接调用,非严格模式下,this指向window,严格模式下,this指向undefined ...
- 一 UI基本的用法
1. UIView的基本用法 //打印屏幕的宽和高 CGRect screenBounds = [[UIScreen mainScreen] bounds]; NSLog(@"%f, %f& ...
- CCPC Wannafly Winter Camp Div2 部分题解
Day 1, Div 2, Prob. B - 吃豆豆 题目大意 wls有一个\(n\)行\(m\)列的棋盘,对于第\(i\)行第\(j\)列的格子,每过\(T[i][j]\)秒会在上面出现一个糖果, ...
- kafka2.3.1+zookeeper3.5.6+kafka-manager2.0.0.2集群部署(centos7.7)
一.准备三台服务器,配置好主机名和ip地址 二.服务器初始化:包括安装常用命令工具,修改系统时区,校对系统时间,关闭selinux,关闭firewalld,修改主机名,修改系统文件描述符,优化内核参数 ...
- 1.Redux学习1,Redux
Redux流程图如上: Action就是一条命令 Store顾名思义就是存储数据的, Reducers是一个回调函数用于处理数据,它处理完数据会返回给Store存储起来 基本流程就是:组件中用Stor ...
- JavaScript实例:运动的小球
本篇博文通过制作一个小球运动动画的实例,来学习在HTML5的画布上实现动画制作的方法,同时理解面向对象程序设计的基本思想. 1.绘制小球 先在HTML页面中设置一个画布. <canvas id= ...
- Docker安全扫描工具之DockerScan
前言 本篇简单介绍Docker扫描工具DockerScan的安装使用.下述过程是在CentOS 7.6的虚拟机上进行的. [root@localhost ~]# cat /etc/redhat-rel ...
- 一文读懂分布式任务调度平台XXL-JOB
本文主要介绍分布式任务调度平台XXL-JOB(v2.1.0版本),包括功能特性.实现原理.优缺点.同类框架比较等 基本介绍 项目开发中,常常以下场景需要分布式任务调度: 同一服务多个实例的任务存在互斥 ...
- SpringBoot2.0整合WebSocket,实现后端数据实时推送!
之前公司的某个系统为了实现推送技术,所用的技术都是Ajax轮询,这种方式浏览器需要不断的向服务器发出请求,显然这样会浪费很多的带宽等资源,所以研究了下WebSocket,本文将详细介绍下. 一.什么是 ...