Grunt analog: grunt-webpcss
PostCSS filter: webpcss

gulp-webpcss

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