1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
# grunt-css-flip
[](http://badge.fury.io/js/grunt-css-flip)
[](https://travis-ci.org/twbs/grunt-css-flip)
[](https://david-dm.org/twbs/grunt-css-flip)
[](https://david-dm.org/twbs/grunt-css-flip#info=devDependencies)
> Grunt plugin for [Twitter's css-flip](https://github.com/twitter/css-flip)
## Getting Started
This plugin requires Grunt `~0.4.3`.
If you haven't used [Grunt](http://gruntjs.com/) before, be sure to check out the [Getting Started](http://gruntjs.com/getting-started) guide, as it explains how to create a [Gruntfile](http://gruntjs.com/sample-gruntfile) as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
```shell
npm install grunt-css-flip --save-dev
```
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
```js
grunt.loadNpmTasks('grunt-css-flip');
```
Alternatively, you could instead use [load-grunt-tasks](https://github.com/sindresorhus/load-grunt-tasks) to load this and other Grunt tasks.
## The "cssflip" task
### Overview
In your project's Gruntfile, add a section named `cssflip` to the data object passed into `grunt.initConfig()`.
```js
grunt.initConfig({
cssflip: {
options: {
// Task-specific options go here.
},
your_target: {
// Target-specific file lists and/or options go here.
}
}
});
```
### Options
All options are passed directly to css-flip's `flip()` function.
None of the options are required.
#### options.compress
Type: `Boolean`
Default value: `false`
Whether to slightly compress output. Some newlines and indentation are removed. Comments stay intact.
#### options.indent
Type: `String`
Default value: `' '` (two spaces)
String value to use for 1 level of indentation in the output.
### Usage Examples
#### Default Options
In this example, two CSS files are flipped using css-flip's default settings.
```js
grunt.initConfig({
cssflip: {
options: {},
files: {
'flipped-one.css': 'original-one.css',
'flipped-two.css': 'original-two.css'
}
}
});
```
#### Custom Options
In this example, the resulting flipped CSS files will also be slightly compressed using css-flip's `compress` option.
```js
grunt.initConfig({
cssflip: {
options: {
compress: true
},
files: {
'flipped-one.min.css': 'original-one.css',
'flipped-two.min.css': 'original-two.css'
}
}
});
```
## Contributing
The project's coding style is laid out in the JSHint and JSCS configurations. Add unit tests for any new or changed functionality. Lint and test your code using [Grunt](http://gruntjs.com/).
## License and copyright
Released under the MIT license. Copyright Chris Rebert 2014.
## Release History
* v0.2.2 (2014-05-03)
* Add missing spaces before parameter lists in function expressions.
* Simplify `license` field in `package.json`.
* Bump `grunt-contrib-jshint` to `~0.10.0`.
* Bump `grunt-jscs-checker` to `~0.4.2`.
* Remove obsolete JSHint options in favor of JSCS.
* v0.2.1 (2014-03-13)
* Fix required Grunt version mentioned in README.
* Update dependencies and sort them by name.
* Remove extra commas from JS & docs examples; (mostly due to `grunt-init gruntplugin`)
* Enforce Unix-style newlines via `.gitattributes.`
* Use the shields.io theme for the dependency badges.
* v0.2.0 (2014-03-12): Fix/address all outstanding issues. **Backwards-incompatible**.
* **Changed name of task from `css_flip` to `cssflip`.**
* **Bumped Grunt dependency to v0.4.3.**
* Bumped & tightened-up devDependencies.
* v0.1.0 (2014-03-06): Initial public release.
|
