A grunt module for Blessing your CSS files so they will work in Internet Explorer. This is based on a pull request by Aki Alexandra Nofftz (@akinofftz).
This plugin requires Grunt ~0.4.1
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-bless --save-dev
One the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-bless');
In your project's Gruntfile, add a section named bless
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
bless: {
css: {
options: {
// Task-specific options go here.
},
your_target: {
// Target-specific file lists and/or options go here.
}
}
}
})
Type: String
Default value: undefined
Add a banner followed by a new line to the top of the main file, the one that you will include in your source.
options: {
banner: '/* this is a banner */'
}
Type: Boolean
Default value: false
Compress the css output added by bless. This does not compress the CSS you wrote. For that you should try the cssmin plugin.
Type: Boolean
Default value: true
Clean up files generated by bless before proceeding.
Type: Boolean
Default value: false
if grunt --force
flag is not set
Override the Grunt option for this task. This will allow bless to overwrite the input file.
Changed in v0.2.0, grunt-bless will refuse to overwrite the input file. To return to the old behavior, set this option to true.
Type: Boolean
Default value: true
Enable or disable the use of @import
in generated CSS files. This feature was
added in bless.js 3.0.3.
Type: Boolean
Default value: true
Add or remove a cache-buster parameter from the generated CSS files.
Type: Boolean | String
Default value: false
If set to true
, you'll get output with all file selectors count. If set to warn
, you'll get only log messages only on files that reached CSS selectors limit.
Type: Boolean
Default value: false
Requires logCount
. If set to true,
the process will exit with an error if the selector limit is exceeded.
The default options will split the files and add a cache-buster parameter. Just as the defaults for blessc
are.
grunt.initConfig({
bless: {
css: {
options: {},
files: {
'tmp/above-limit.css': 'test/input/above-limit.css'
}
}
}
})
You can set any option allowed by bless.
grunt.initConfig({
bless: {
css: {
options: {
cacheBuster: false,
compress: true
},
files: {
'tmp/below-limit.css': 'test/input/below-limit.css'
}
}
}
})
If you don't want to write blessed files, you can just set input files, without destination and add logging.
grunt.initConfig({
bless: {
css: {
options: {
logCount: true
},
src: [
'test/input/below-limit.css'
]
}
}
})
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
- Next
- Clean up the NPM package, thanks @mimiflynn
- other assorted clean up and formatting.
- 0.2.0
- Updated documentation to note the newness of the not yet released to npm
imports
option, thanks @spoike - Added a banner option to avoid banners getting misplaced in the blessing process, thanks @jelmerdemaat
- Added implementation for the
force
option. - Added logCount option, thanks @operatino
- Added logging on file modification and creation, thanks (again) @operatino
- Updated documentation to note the newness of the not yet released to npm
- 0.1.1 Fatal documentation flaw, no actual code changes, thanks @codecollision
- 0.1.0 Initial release, courtesy of Aki Alexandra Nofftz