Is it possible to ignore a file with unCSS in Gulp?

Question

I've been looking through google to find a way to do what I want but did not succeed.

Here's my gulp task

    gulp.task('less', function() {
    return gulp.src('css/*.less')
        .pipe(less())
        .pipe(stripCssComments({
            all: true
        }))
        .pipe(concat('main.css'))
        .pipe(uncss({
            html: ['index.html'],
            ignore: [
                '.visited',
                '.ripple',
                '.rippleEffect',
                '.ripple2',
                '.rippleEffect2',
                '.rippleDrop', '.rippleDrop2',
                '.ripple3',
                '.rippleEffect3',
                '.rippleDrop3',
                '.slide'
            ]
        }))
        .pipe(minifyCSS())
        .pipe(gulp.dest('build/css'))
});

As you can see I already have a lot of classes to be ignored. But its getting worse with my new css frameworks which has dozens of classes called by javascript (so uncss will erase them). Instead of putting 30 classes in my ignore option, I'd like to just ignore the .css which contains the dynamic classes.

The point is, I still want my events.css to be concatened with the others css, so it has to go in the pipe (I want a single .css file for all my website).

Or should I make a second .less function, which will merge uncss files with non-uncss files ? I'm not sure whats the best way to achieve what I want

Try creating a separate HTML file that contains markup that matches the selectors you don't want uncss to delete. — mrkiffie, May 14 '15 at 18:01

score 2 · Accepted Answer · answered May 14 '15 at 18:01

The last point is actually the one to go for, but you don't have to do two functions, you just can use stream merging:

var merge = require('merge2');

gulp.task('less', function() {
    var streamMain = gulp.src(['css/*.less', '!css/events.less'])
        .pipe(less())
        .pipe(stripCssComments({
            all: true
        }))
        .pipe(uncss({
            html: ['index.html']
        }));

    var streamEvents = gulp.src('css/events.less')
        .pipe(less())
        .pipe(stripCssComments({
            all: true
        }));

    return merge(streamMain, streamEvents)
        .pipe(concat('main.css'))
        .pipe(minifyCSS())
        .pipe(gulp.dest('build/css'));
});

In Gulp, plugins should just do one thing. Everything related to handling files is actually in your hand :-)

great , thanks. I didnt know that merge plugin I will put it to use — Antonin Cezard, May 14 '15 at 18:05

Is it possible to ignore a file with unCSS in Gulp?

1 Answers1