gulp-webp-css-splitter

Example

Duplicate background images with webp. Add .webp and .no-webp classes. Minify result css

// Input
.logo {
  width: 30px;
  height: 30px;
  background: url(/logo.png);
}

// Output (minified in reality)
.logo {
  width: 30px;
  height: 30px;
}
.webp .logo {
  background: url(/logo.webp);
}
.no-webp .logo {
  background: url(/logo.png);
}

Install

npm i --save-dev gulp-webp-css-splitter

Usage

var webpCss = require('gulp-webp-css-splitter');

gulp.task('css', function () {
    gulp.src('./assets/css/*.css') // or .pipe(sass())
        .pipe(webpCss()) // or .pipe(webpCss(['.jpg','.jpeg']))
        .pipe(gulp.dest('./public/css/'))
});