You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

161 lines
3.4 KiB

  1. # grunt-css
  2. [Grunt](https://github.com/cowboy/grunt) plugin for linting and minifying CSS
  3. ## Getting Started
  4. Install the module with:
  5. npm install grunt-css --save-dev
  6. Then load it from your own `Gruntfile.js` file:
  7. ```js
  8. grunt.loadNpmTasks('grunt-css');
  9. ```
  10. ### grunt 0.3 compability
  11. If you're using grunt 0.3, install the 0.1.0 version of this task:
  12. npm install grunt-css@0.3.2
  13. ## Documentation
  14. This plugin provides two tasks: `cssmin` and `csslint`. Both area [multi tasks][types_of_tasks], meaning that grunt will automatically iterate over all `cssmin` and `csslint` targets if a target is not specified.
  15. [types_of_tasks]: https://github.com/cowboy/grunt/blob/master/docs/types_of_tasks.md
  16. ### cssmin
  17. This works similar to the [`uglify` task](https://github.com/gruntjs/grunt-contrib-uglify). Specify a src and dest property for input and output:
  18. ```js
  19. // Project configuration.
  20. grunt.initConfig({
  21. cssmin: {
  22. my_target: {
  23. src: 'src/input.css',
  24. dest: 'dist/output.min.css'
  25. }
  26. }
  27. });
  28. ```
  29. Exposes option of clean-css, which you can set per target or for all, as usual:
  30. keepSpecialComments
  31. ```js
  32. // Project configuration.
  33. grunt.initConfig({
  34. cssmin: {
  35. options: {
  36. keepSpecialComments: 0
  37. },
  38. my_target: {
  39. options: {
  40. keepSpecialComments: 1
  41. },
  42. src: 'src/input.css',
  43. dest: 'dist/output.min.css'
  44. }
  45. }
  46. });
  47. ```
  48. #### Banner comments
  49. In this example, running `grunt cssmin:my_target` will prepend a banner created by interpolating the `banner` template string with the config object. Here, those properties are the values imported from the `package.json` file (which are available via the `pkg` config property) plus today's date.
  50. ```js
  51. // Project configuration.
  52. grunt.initConfig({
  53. pkg: grunt.file.readJSON('package.json'),
  54. cssmin: {
  55. options: {
  56. banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
  57. '<%= grunt.template.today("yyyy-mm-dd") %> */'
  58. },
  59. my_target: {
  60. files: {
  61. src: 'src/input.css',
  62. dest: 'dist/output.min.css'
  63. }
  64. }
  65. }
  66. });
  67. ```
  68. ### csslint
  69. This is similar to the built-in lint task, though the configuration is different. Here's an example:
  70. ```js
  71. csslint: {
  72. base_theme: {
  73. src: "themes/base/*.css",
  74. rules: {
  75. "import": false,
  76. "overqualified-elements": 2
  77. }
  78. }
  79. }
  80. ```
  81. `src` specifies the files to lint, `rules` the rules to apply. A value of `false` ignores the rule, a value of `2` will set it to become an error. Otherwise all rules are considered warnings.
  82. For the current csslint version, these rules are available:
  83. important
  84. adjoining-classes
  85. known-properties
  86. box-sizing
  87. box-model
  88. overqualified-elements
  89. display-property-grouping
  90. bulletproof-font-face
  91. compatible-vendor-prefixes
  92. regex-selectors
  93. errors
  94. duplicate-background-images
  95. duplicate-properties
  96. empty-rules
  97. selector-max-approaching
  98. gradients
  99. fallback-colors
  100. font-sizes
  101. font-faces
  102. floats
  103. star-property-hack
  104. outline-none
  105. import
  106. ids
  107. underscore-property-hack
  108. rules-count
  109. qualified-headings
  110. selector-max
  111. shorthand
  112. text-indent
  113. unique-headings
  114. universal-selector
  115. unqualified-attributes
  116. vendor-prefix
  117. zero-units
  118. For an explanation of those rules, [check the csslint wiki](https://github.com/stubbornella/csslint/wiki/Rules).
  119. *Side note: To update this list, run this:*
  120. ```bash
  121. node -e "require('csslint').CSSLint.getRules().forEach(function(x) { console.log(x.id) })"
  122. ```
  123. ## Contributing
  124. Please use the issue tracker and pull requests.
  125. ## License
  126. Copyright (c) 2012 Jörn Zaefferer
  127. Licensed under the MIT license.