Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Grunt analog: grunt-webpcss
PostCSS filter: webpcss

gulp-webpcss

NPM version Build Status Coverage Status Dependency Status DevDependency Status

webpcss plugin for gulp

Usage

First, install gulp-webpcss as a development dependency:

npm install --save-dev gulp-webpcss

Then, add it to your gulpfile.js:

var webpcss = require("gulp-webpcss");

gulp.src("./src/*.css")
	.pipe(webpcss({}))
	.pipe(gulp.dest("./dist"));

API

webpcss(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'); }
var webpcss = require("gulp-webpcss");

gulp.src("./src/*.css")
	.pipe(webpcss({}))
	.pipe(gulp.dest("./dist"));

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'); }
var webpcss = require("gulp-webpcss");

gulp.src("./src/default_options.css")
	.pipe(webpcss({
	  baseClass:'.webp1',
      replace_from:/\.(png|jpg|jpeg)/,
      replace_to:'.webp',
	}))
	.pipe(gulp.dest("./dist"));

License

MIT License

Bitdeli Badge

About

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

Resources

License

Packages

No packages published