grunt-csswring

grunt-csswring

Source Maps aware CSS minification task. Based on CSSWring based on PostCSS.

DEPRECATED

Instead there is:

• task shipped with CSSWring itself
• grunt-postcss to apply multiple transformation to css in one pass.

Getting Started

This plugin requires Grunt ~0.4.0

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-csswring --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-csswring');

The “csswring” task

Overview

In your project's Gruntfile, add a section named csswring to the data object passed into grunt.initConfig().

grunt.initConfig({
  csswring: {
    options: {
      // Task-specific options go here.
    },
    your_target: {
      // Target-specific file lists and/or options go here.
    },
  },
})

Options

options.banner

Type: String|undefined Default value: undefined

Allows to add comment to the beginning of minified files.

options.map

Type: Boolean|String|undefined Default value: undefined

If the map option isn't defined, PostCSS will look for source map from a previous compilation step (either inline map or separate one) and update it automatically. Let's say you have path/file.css and path/file.css.map from SASS, PostCSS will find that map, update it and save to a specified destination.

If true is specified, PostCSS will try to find an input source map file as described above and generate a new map based on the found one (or just generate a new map, unlike the situation when the map option is undefined).

If you keep your map from a pre-processor in another directory (e.g. path/file.css and another-path/file.css.map), you can specify the path another-path/ in the map option to point out where grunt-csswring should look for an input map to update it.

Also you can specify false. In that case PostCSS will not generate or update source map even if there is one from a previous compilation step near an input file or inlined to it (PostCSS will delete a map annotation comment from an input file).

You cannot specify a path where to save a map file, it will be saved at the same directory as the output CSS file or inlined to it (check out the option below).

options.mapInline

Type: Boolean|undefined Default value: undefined

If the option isn't specified, PostCSS will inline its map if a map from a previous compilation step was inlined to an input file or save its map as a separate file respectively.

You can specify true or false to force that behaviour as you like.

options.preserveHacks

Type: Boolean|undefined Default value: undefined

Allows to preserve properties hacks like *display: inline;

options.removeAllComments

Type: Boolean|undefined Default value: undefined

By default, CSSWring keeps a comment that start with /*!. If you want to remove all comments, set option to true.

options.report

Choices: min, gzip Default value: min Either report only minification result or report minification and gzip results. Using gzip will make the task take 5-10x longer to complete.

Usage Examples

grunt.initConfig({

  csswring: {

    options: {
      // Task-specific options go here.
    },

    // minify the specified file
    single_file: {
      options: {
        // Target-specific options go here.
      },
      src: 'src/css/file.css',
      dest: 'dest/css/file.css'
    },

    // minify all files
    multiple_files: {
      expand: true,
      flatten: true,
      src: 'src/css/*.css', // -> src/css/file1.css, src/css/file2.css
      dest: 'dest/css/' // -> dest/css/file1.css, dest/css/file2.css
    },

    // if you have specified only the `src` param, the destination will be set automatically,
    // so source files will be overwritten
    no_dest: {
      src: 'dest/css/file.css' // globbing is also possible here
    },

    sourcemap: {
        options: {
            map: true
        },
        src: 'src/css/file.css',
        dest: 'dest/css/file.css' // -> dest/css/file.css, dest/css/file.css.map
    },
  }
});

Acknowledgements

This task is mostly based on grunt-autoprefixer by Dmitry Nikitenko.

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.