grunt-bless

Split CSS files suitable for IE

grunt-bless

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).

Getting Started

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');

The "bless" task

Overview

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. 
      }
    }
  }
})

Options

options.banner

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 */'
  }

options.compress

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.

options.cleanup

Type: Boolean Default value: true

Clean up files generated by bless before proceeding.

options.force

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.

options.imports

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.

options.cacheBuster

Type: Boolean Default value: true

Add or remove a cache-buster parameter from the generated CSS files.

options.logCount

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.

Usage Examples

Default Options

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'
      }
    }
  }
})

Custom Options

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'
      }
    }
  }
})

Without writing

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'
      ]
    }
  }
})

Contributing

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.

Release History

• 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
• 0.1.1 Fatal documentation flaw, no actual code changes, thanks @codecollision
• 0.1.0 Initial release, courtesy of Aki Alexandra Nofftz