Skip to content

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

License

Notifications You must be signed in to change notification settings

lexich/gulp-webpcss

Repository files navigation

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

Stars

Watchers

Forks

Packages

No packages published