Why I am not getting a new CSS file from gulp-uncss?

1.3k views Asked by At

I am simply trying to further compress a css file. And I am getting an error which is peculiar. I wondered why I would get a ReferenceError: Can't find variable: jQuery for just a task which solely encompasses selectors from HTML & CSS? Unless it's reading the script tags in my HTML which have selectors?

UPDATE I forgot to mention the task is not spitting out, a new CSS file!

Also I noticed many gulp tasks have ./ preceding the directory, What is the purpose of that? Anyway, see below:

This is my Gulp file, figured I include it...

gulp.task('uncss', function() {
return gulp.src('site/assets/stylesheets/style.min.81113a5b.css')
    .pipe(uncss({
        html: [
            'site/**/*.html'
        ]
    }))
    .pipe(gulp.dest('./out'));

});

This is the error I am getting.

ReferenceError: Can't find variable: jQuery

  file:///Users/antonioortiz/Sites/antonioortiz.github.io/site/cookie_control/cookie_example/index.html:12
  file:///Users/antonioortiz/Sites/antonioortiz.github.io/site/cookie_control/cookie_example/index.html:43

/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/async.js:43
        fn = function () { throw arg; };
                                 ^
Error: uncss/node_modules/css: unable to parse undefined:
missing '}' near line 1:46497
    1:     -> ebkit-min-device-pixel-ratio:0){@media{.

    at error (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:57:15)
    at declarations (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:224:26)
    at rule (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:481:21)
    at rules (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:103:56)
    at atmedia (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:345:35)
    at atrule (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:457:10)
    at rules (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:103:44)
    at stylesheet (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:73:16)
    at Object.module.exports [as parse] (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:485:10)
    at process (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/src/uncss.js:158:22)
    at tryCatcher (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/util.js:26:23)
    at Promise._settlePromiseFromHandler (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/promise.js:501:31)
    at Promise._settlePromiseAt (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/promise.js:577:18)
    at Promise._settlePromises (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/promise.js:693:14)
    at Async._drainQueue (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/async.js:123:16)
    at Async._drainQueues (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/async.js:133:10)
2

There are 2 answers

0
Brett DeWoody On

Sounds similar to Issue 157. The solution - try using paths like /site/**/*.html instead of site/**/*.html.

Next thing to try is setting a higher value for the timeout option to give jQuery more time to load.

1
gustavohenke On

Taken from the UnCSS documentation:

How?

The process by which UnCSS removes the unused rules is as follows:

  1. The HTML files are loaded by PhantomJS and JavaScript is executed.
  2. ...

This means that your page will be loaded in a headless browser, so that library is able to find which selectors are really used.

I never used UnCSS, but what it seems to me is that:

  • it will throw JS errors in case they happen;
  • it will complain in case your CSS is not error-free.

That's why you're getting those errors.