javascriptgulpgulp-usemin

How to add "gulp-uncss" to "gulp-usemin"


Actually I have this, but I want to add uncss plugin. Or how I can add dynamically references.

var usemin = require('gulp-usemin');
var uglify = require('gulp-uglify');
var uncss = require('gulp-uncss');
var minifyHtml = require('gulp-minify-html');
var minifyCss = require('gulp-minify-css');
var rev = require('gulp-rev');

gulp.task('usemin', function () {
return gulp.src('./*.html')
    .pipe(usemin({
       css: [minifyCss(), 'concat'],
       html: [minifyHtml({empty: true})],
       js: [uglify(), rev()]
     }))
    .pipe(gulp.dest('build/'));
});

Solution

  • After running usemin() you could uncss() the resulting minimized CSS file.

    Something along the lines of:

    gulp.task('usemin', function () {
    return gulp.src('./*.html')
        .pipe(usemin({
           css: [minifyCss(), 'concat'],
           html: [minifyHtml({empty: true})],
           js: [uglify(), rev()]
         }))
        .pipe(gulp.dest('build/'));
    });
    
    gulp.task('uncss', ['usemin'], function () {
    return gulp.src('./build/*.css')
        .pipe(uncss({
          html: ['./build/*.html']
        }))
        .pipe(gulp.dest('build/'));
    });
    
    gulp.task('build', ['usemin','uncss']);