0

I know I can get the clean CSS using gulp-uncss like so:

var gulp = require('gulp');
var uncss = require('gulp-uncss');
var rename = require('gulp-rename');

gulp.task('clean-my-css', function() {
    return gulp.src('original.css')
        .pipe(uncss({
            html: ['http://mywebsite.com']
        }))
        .pipe(rename('clean.css'))
        .pipe(gulp.dest('./fresh'));
});

And then run the task like so:

gulp clean-my-css

However, I'd like to get the unclean CSS as well. In other words, if I concatenated these two files (clean and unclean) I would effectively have the original.css:

clean.css + unclean.css = original.css

Is this possible with gulp-uncss or any other tool?

ObiHill
  • 11,448
  • 20
  • 86
  • 135
  • It seems UnCSS doesn't have this built-in. I would try with `gulp-diff` or something (https://www.npmjs.com/package/gulp-diff). Diff the `uncss`'d pipe with the `original.css` and attempt to construct a new CSS file from it. Haven't tried this though, could turn out a bit difficult depending on the output format of `gulp-diff`. – ojrask Jul 08 '15 at 13:03
  • @ojrask I just fiddled around with `gulp-diff` but it doesn't seem to be working, it's generating the same file as the clean.css, not sure why – ObiHill Jul 08 '15 at 13:12
  • I am a bit confused as to why you want to clean your css and then re-add it, care to give us a bit more context? – Rudi Strydom Sep 16 '15 at 05:53
  • @RudiStrydom I'm not re-adding it as you put it. In the page loading order, I want to inline clean.css (in the `` and then defer unclean.css: this is for performance reasons. But essentially, concatenating the two files will give me my original CSS. – ObiHill Sep 16 '15 at 13:17
  • Hi @ObinwanneHill, Uncss is meant to only give you back the CSS which is actually used by the page. So the other CSS by virtue, is unnecessary and thus redundant. Now PhantomJS which is the headless browser which checks which CSS is used on the page does not always pick up 100% of your style, like for hover over events. And content loaded with user interaction. The idea is that you can add an ignore list, with all the things uncss should ignore. https://www.npmjs.com/package/gulp-uncss And possibly provide multiple URL's for it to check to give you ALL the CSS **actually** used. – Rudi Strydom Sep 16 '15 at 15:34
  • @ObinwanneHill To follow on my previous comment, by doing that you should have only the CSS needed, and you wouldn't need to include it again. – Rudi Strydom Sep 16 '15 at 15:37
  • @RudiStrydom Thanks. What I'm trying to do is a bit more complicated i.e. I'm inlining clean-desktop.css in the `` for desktop, and then deferring the rest; and on mobile (smartphone) I'm doing something similar i.e. clean-mobile.css (different file entirely). The above-the-fold dynamics are different across device classes and I can't create clean CSS for every page individually (especially on mobile), so I'm looking to do two clean CSS files [desktop and mobile] that will cover 90% or more of the above-the-fold requirements, and then defer the unclean CSS to cover the rest of the pages – ObiHill Sep 16 '15 at 16:26
  • @RudiStrydom The optimization is a tad ultra, but for my use case it's necessary because the original omni-bus CSS file is quite large. I'll probably have to put something together myself using nightmarejs; I just wanted to make sure I wasn't reinventing the wheel by doing so. – ObiHill Sep 16 '15 at 16:30
  • @ObinwanneHill From the original question and example provided this is not evident. May I suggest you update the question with the additional detail. And maybe a better example showing these 2 separate "desktop" and "mobile" uncss tasks. I don't know of anything you are looking for, short of iterating and removing each selector manually from the cleaned file. Either way it will be painful. Good luck, please update if you figure it out! – Rudi Strydom Sep 16 '15 at 16:34

0 Answers0