grunt-webpcss

Gulp analog: gulp-webpcss
PostCSS filter: webpcss

grunt-webpcss

Process css file to generate addition css ruless to add webp compatble

Getting Started

This plugin requires Grunt ~0.4.4

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

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

grunt.loadNpmTasks('grunt-webpcss');

The "webpcss" task

Overview

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

grunt.initConfig({
  webpcss: {
    task: {
      options: {
        baseClass:'.webp',
        replace_from:/\.(png|jpg|jpeg)/,
        replace_to:'.webp'
      },
      files: {
        'main.css':['main.css']
      }
    }
  },
});

Options

check options in webpcss module

Usage Examples

Default Options

In this example, the default options are used to do something with whatever. Css transforms from

.test { background-image:url('test.png'); }

to

.test { background-image:url('test.png'); }
.webp .test { background-image:url('test.webp'); }

grunt.initConfig({
  webpcss: {
    task: {
      options: {},
      files: {
        'dest/default_options.css': ['default_options.css'],
      },
    }
  },
});

Custom Options

In this example, the default options are used to do something with whatever. Css transforms from

.test { background-image:url('test.png'); }

to

.test { background-image:url('test.png'); }
.webp1 .test { background-image:url('test.webp'); }

grunt.initConfig({
  webpcss: {
    options: {
      baseClass:'.webp1',
      replace_from:/\.(png|jpg|jpeg)/,
      replace_to:'.webp',
    },
    files: {
      'dest/default_options.css': ['default_options.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.1.0 - Plugin release