0.1.5 • Published 10 years ago
grunt-responsive-mtc v0.1.5
grunt-contrib-mtc
Media to class 的首字母缩写。功能:从指定文件中抽取@media块, 生成带有尺寸前缀的新样式文件。 适用于低版本IE下响应式css的生成。
Getting Started
本插件基于grunt ~0.4.1
开发。
如果你之前没有使用过 Grunt , 打开 开始使用 , 查看如何创建一个 Gruntfile 以及安装和使用Grunt插件。 你可以通过以下命令安装该插件:
npm install grunt-responsive-mtc --save-dev
如果插件已经安装完成,你便可以在Gruntfile中使用下面这句 JavaScript 启用插件:
grunt.loadNpmTasks('grunt-responsive-mtc');
"mtc" 任务
概述
在项目的 Gruntfile 的 grunt.initConfig()
中, 添加名为 mtc
的配置对象。
grunt.initConfig({
mtc: {
options: {
// Task-specific options go here.
},
files: {
// Target-specific file lists and/or options go here.
}
}
})
选项
options.punctuation
类型: String
默认值: ', '
该版本中暂时未使用
options.separator
类型: String
默认值: ''
用于拼接多文件间生成样式的字符串,默认为空,可为\n
、`/ create from filename /`等。 该版本已废弃。
options.prefix
类型: String
默认值: 'w'
定义生成样式前缀(例:prefix: "mw"
,将得到类似 .mw1024
的前缀)。
使用案例
转换效果大致如下:
默认配置
从 src 目录下的 test.css 文件中抽取 @media 块,在 build 文件夹中生成与项目同名并追加 -ie
后缀的 css 文件。
grunt.initConfig({
mtc: {
pkg: grunt.file.readJSON('package.json'),
options: {},
files: {
'build/<%= pkg.name %>-ie.css': ['src/test.css']
}
}
})
自定义配置
内容与默认配置大致相同,增加 options
配置:
grunt.initConfig({
mtc: {
options: {
punctuation: ': ',
prefix: "mw"
},
files: {
'build/<%= pkg.name %>-ie.css': ['src/test.css']
}
}
})
执行任务
首先注册任务,使用以下命令:
grunt.registerTask('default', ['mtc']);
然后执行任务,使用以下命令:
grunt default
发布历史
- 2014/03/02 v0.1.5 修改组件名称
- 2013/07/29 v0.1.4 配置参数调整,新增代码格式化功能。
- 2013/07/28 v0.1.3 修正文档说明,清理代码。
- 2013/07/26 v0.1.2 新增配置参数 prefix ,优化正则表达式。
- 2013/07/25 v0.1.1 更新文档。
- 2013/07/25 v0.1.0 第一版发布。
0.1.5
10 years ago