Skip to content
Process css file to generate addition css ruless to add webp compatble
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.editorconfig
.gitattributes
.gitignore
.jscsrc
.jshintrc
.travis.yml
LICENSE
README.md
index.js
package.json

README.md

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

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.