grunt.initConfig()为Gruntfile.js的核心部分,它接收对象作为参数。

对象包含两种类型的属性,一种是单纯的变量,一种是task类型。举个栗子:

grunt.initConfig({
pkg: grunt.file.readJSON('package.json'), //单纯的变量,像我一样单纯
concat: {} //task类型
});

PS:所有单纯的变量可以'prefix<%=var%>suffix'的形式读取

task类型也包含两种类型的属性,一种是options,一种是具体的task(标准说法为target)

target同样包含两种类型的属性,一种是options,覆盖task类型的options,一种是files

以下例子使用grunt-contrib-concat,用于文件的合并

concat : {
options : {
separator : ';', //被覆盖
banner : '/*<%= grunt.template.today("yyyy-mm-dd") %>*/'
},
test : {
options : {
separator : '<%= grunt.util.linefeed %>'
},
files : [{
dest : 'dest/hello.js',
src : ['src/*.js']
}
]
}
}

结构如下图

files部分是所有插件通用的,但options视task不同而不同,以下介绍files

files有三种写法,例子中最标准且复杂的一种

//第一种,满足所有要求
files : [{
dest : 'dest/hello.js',
src : ['src/*.js']
}
]
//第二种,无法设置其他参数
files : {
'dest/hello.js' : ['src/*.js']
}
//第三种,只能设置单个任务
dest : 'dest/hello.js',
src : ['src/*.js']

另外files中的path支持5种通配符

  1. *匹配separator之外的所有字符0-N
  2. ?匹配separator之外的所有字符1
  3. **匹配所有字符0-N
  4. {}匹配其中逗号分隔的表达式
  5. !反集合

最后是files的各个属性,分为两个部分,基础(src、dest、filter、nonull、dot、matchBase、expand)和扩展(cwd、ext、flatten、rename)

src: string or array 源文件

dest: string 目标文件

filter: function 传入src中各文件的filepath,筛选出返回true的作为源文件

   string fs.Stats(node中的检测文件类型的类)的方法名

  1. isFile 普通文件
  2. isDirectory 文件夹
  3. isBlockDevice 块设备文件(POSIX概念,比如移动硬盘对应的文件)
  4. isCharacterDevice 字符设备文件(POSIX概念,比如键盘鼠标对应的文件)
  5. isSymbolicLink 软链接文件(POSIX概念,理解成windows下的快捷方式吧)
  6. isFIFO (POSIX概念,管道文件,用于进程间通信)
  7. isSocket (POSIX概念,套接字文件,用于端口通信)

nonull: 嗯,不太懂

dot: boolean 以.开头的文件(linux中的隐藏文件)亦作为源文件,默认为false

matchBase: 可能存在理解的偏差

  我的case使用了下面的expand,目录结构为src下123/acb,acb/123,使用如下配置

files: [{
expand: true,
cwd: 'src/',
src: ['a?b'],
dest: 'dist/'
}]

  目标文件夹下将出现acb文件夹,但不包含任何文件,而添加matchBase后

files: [{
expand: true,
cwd: 'src/',
src: ['a?b'],
dest: 'dist/',
matchBase: true
}]

  目标文件夹下将出现acb文件夹和123文件夹,acb文件夹为空,123文件夹下包含acb文件

expand: boolean 启用扩展属性,默认为false

dest(expand): string 目标文件夹

cwd: string src的相对路径

ext: string 生成文件的后缀名

expand: true,
cwd: 'src/',
src: ['*.js'],
dest: 'dest/',
ext: '.min.js'

flatten: boolean 为true则生成的文件统一放在dest文件夹中,无子文件夹,默认为false

expand: true,
cwd: 'src/',
src: ['*.js', '**/*.js'],
dest: 'dest/',
ext: '.min.js',
flatten: true

rename: function 传入[dest, filepath, files],默认为return dest + filepath;

以上是initConfig的基本配置,还有瑕疵,下一篇开始从各个插件着手具体的应用。

没有闲话和grunt.initConfig()的更多相关文章

  1. 闲话和grunt

    一年半没更新是因为自己转岗了,android framework+system转前端,可以想象过程之苦逼,苦成了一首诗:很烦很烦/非常烦/非常非常十分烦/特别烦特烦/极其烦/贼烦/简直烦死了/啊——. ...

  2. AngularJS——grunt神器的安装

    前言: 刚开始学 angularJS,在慕课网上看的大漠老师的视频(http://www.imooc.com/learn/156),里面刚开始讲述了前端开发-调试-测试所使用的手段和工具,本人对前端开 ...

  3. grunt之concat、cssmin、uglify

    周末有点懒,跑去看了<智取威虎山>,手撕鬼子的神剧情节被徐老怪一条回忆线就解释过去了,牛到极致尽是这种四两拨千斤的处理方式,手撕加分,四星推荐. --------------------- ...

  4. 初学seaJs模块化开发,利用grunt打包,减少http请求

    原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...

  5. grunt配置任务

    这个指南解释了如何使用 Gruntfile 来为你的项目配置task.如果你还不知道 Gruntfile 是什么,请先阅读 快速入门 指南并看看这个Gruntfile 实例. Grunt配置 Grun ...

  6. 快速开发Grunt插件----压缩js模板

    前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去 ...

  7. 应用Grunt自动化地优化你的项目前端

    在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩.合并前端文件并打包整个项目.但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目 ...

  8. Grunt(页面静态引入的文件地址的改变探究)-V2.0

    相关插件的引用: grunt-usemin  对页面的操作 grunt-contrib-cssmin  压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5 ...

  9. grunt自定义任务——合并压缩css和js

    npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...

随机推荐

  1. C#之异步

    C#之异步 异步是相对于同步而言.跟多线程不能同一而论.异步简单而言好比一个人两双手可以同时做两件以上不同的事情.多线程好比多个人做不同或相同的事情. 异步跟多线程有什么关系? 异步可以分为CPU异步 ...

  2. springMVC两种方式实现多文件上传及效率比较

    springMVC实现 多文件上传的方式有两种,一种是我们经常使用的以字节流的方式进行文件上传,另外一种是使用springMVC包装好的解析器进行上传.这两种方式对于实 现多文件上传效率上却有着很大的 ...

  3. Ubuntu 虚拟机支持与windows机器复制粘贴

    实现虚拟机VMware上Ubuntu与主机windows之间互相复制与粘贴 实现VMware中Ubuntu与主机Windows系统之间的相互复制与粘贴(公用粘贴板): 1.在虚拟机VMware的菜单栏 ...

  4. HTML的正确入门姿势——基本结构与基本标签

    一.什么是HTML HTML是超文本标签语言,即网页的源码.而浏览器就是翻译解释HTML源码的工具. 二.HTML文档的结构 HTML文档主要包括三大部分:文档声明部分.<head>头部部 ...

  5. JS非空验证及邮箱验证

    非空验证 <body> <table> <tr> <td>姓名:</td> <td><input type="t ...

  6. MyBatis从入门到放弃六:延迟加载、一级缓存、二级缓存

    前言 使用ORM框架我们更多的是使用其查询功能,那么查询海量数据则又离不开性能,那么这篇中我们就看下mybatis高级应用之延迟加载.一级缓存.二级缓存.使用时需要注意延迟加载必须使用resultMa ...

  7. Git的commit your changes or stash them before you can merge

    今天用git pull来更新代码,遇到了下面的问题: error: Your local changes to the following files would be overwritten by ...

  8. Redis的部署及使用

    Redis Memcached与Redis的对比 Memcached: 优点: 1. 纯set get性能好 2. 开发都会用,易用简单 4. 可用于存放session 缺点: 1. 不支持持久化 2 ...

  9. java程序给short变量赋0xff报异常

    在java程序中以二进制或十六进制表示的数比如0x01默认类型为int.所以付给short类型时要强制类型转换. short q = (short) 0b1111111111111111; Syste ...

  10. 分页(将数据库中的多条数据一页一页的显示在jsp页面中)

    一.显示数据库中的多条数据为什么要用分页 在真正的开发中,数据库中所存储的数据绝对不像我们平时所写的那样,仅仅有几条数据,而是有几十条甚至上百条,像淘宝京东的用户把都是上几十万甚至百万的.如果这时候在 ...