Sage Gulp UnCSS - Ignore list

Hi,

I’ve used UnCSS with Roots/Grunt several times in the past with much success, but recently in moving over to sage/gulp I have run into a few issues due to my lack of gulp skills.

I was following the little guide put together by the awesome @cfx here and I was able to get it all UnCSSing, however I’m not sure how I would add the ignore list in this context of gulp as at the moment it of couse deletes a bunch of classes I don’t want it to.

Any help with this would be very much appreciated. Many thanks :smile:

What have you tried so far? :smile:

Thanks so much for the response.

I tried creating a new task that included options = { ignore : ['popover', 'top', 'arrow', 'popover-title', 'popover-content'] };

But that didn’t work, it seems to be throwing errors when I’m running gulp --production due to that popover js class.

  http://charthampc.dev/contact-chartham-parish-council/:211
  http://charthampc.dev/wp-includes/js/jquery/jquery.js?ver=1.11.3:2
  http://charthampc.dev/wp-includes/js/jquery/jquery.js?ver=1.11.3:2
  http://charthampc.dev/wp-includes/js/jquery/jquery.js?ver=1.11.3:2
  http://charthampc.dev/wp-includes/js/jquery/jquery.js?ver=1.11.3:2 in J
TypeError: 'undefined' is not a function (evaluating 'jQuery('[data-toggle=
"popover"]').popover({trigger: 'hover'})')

  http://charthampc.dev/business/chartham-theatre-school/:206
  http://charthampc.dev/wp-includes/js/jquery/jquery.js?ver=1.11.3:2
  http://charthampc.dev/wp-includes/js/jquery/jquery.js?ver=1.11.3:2
  http://charthampc.dev/wp-includes/js/jquery/jquery.js?ver=1.11.3:2
  http://charthampc.dev/wp-includes/js/jquery/jquery.js?ver=1.11.3:2 in J
TypeError: 'undefined' is not a function (evaluating 'jQuery('[data-toggle=
"popover"]').popover({trigger: 'hover'})')

  http://charthampc.dev/clubs-societies/:358
  http://charthampc.dev/wp-includes/js/jquery/jquery.js?ver=1.11.3:2
  http://charthampc.dev/wp-includes/js/jquery/jquery.js?ver=1.11.3:2
  http://charthampc.dev/wp-includes/js/jquery/jquery.js?ver=1.11.3:2
  http://charthampc.dev/wp-includes/js/jquery/jquery.js?ver=1.11.3:2 in J
[12:28:45] Finished 'styles' after 21 s
[12:28:45] Starting 'jshint'...
[12:28:46] Finished 'jshint' after 233 ms
[12:28:46] Starting 'scripts'...
[12:28:48] Finished 'scripts' after 2.69 s
[12:28:48] Starting 'fonts'...
[12:28:48] Starting 'images'...
[12:28:49] gulp-imagemin: Minified 4 images (saved 2.73 kB - 20.4%)
[12:28:49] Finished 'images' after 294 ms
[12:28:49] Finished 'fonts' after 411 ms
[12:28:49] Finished 'build' after 25 s

So I may have gotten quite a lot wrong in my guess there. That’s honestly a stab in the dark, I’m not really sure how to add the ignore list in gulp.

So you didn’t try modifying the example that’s back in the original thread you linked to?

I saw that it was written for Grunt, I did try it, but it didn’t work. But that is most likely because I don’t know the right syntax from gulp. This is why I tried building a task more similar to the uncss/gulp docs to see if that would work.
Perhaps it’s obvious but something about how to integrate that code just doesn’t click with me.

It’s right there in the example. Still not sure what’s unclear about it or what you mean by “written for Grunt.”

Are you not referring to this example? https://gist.github.com/darisi/7b4396bddc382b659e95

Can you paste an example so we are on the page please? Apologies if I’m missing something obvious, I have the flu and it could be softening my mind :confused:

I did manage to solve it in then end:

 .pipe(concat, filename)
   .pipe(function() {
     return gulpif(enabled.unCss, uncss({
       html: require('./sitemap.json'),
       ignore: [
       '/(#|\.)fancybox(\-[a-zA-Z]+)?/',
       '/expanded/',
       '/js/',
       '/wp-/',
       '/align/',
      '/admin-bar/',
      // needed for Bootstrap's transitions
      '.fade',
      '.fade.in',
      '.collapse',
      '.collapse.in',
      '.navbar-collapse',
      '.navbar-collapse.in',
      '.collapsing',
      // needed for the `<noscript>` warning; remove them when fixed in uncss
      '.alert-danger',
      '.visible-xs',
      '.noscript-warning',
      // currently only in a IE conditional so uncss doesn't see it
      // ".close", has error in syntax-opacity
      '.alert-dismissible',
      '.open',
      //theme specific
      '/shrink/',
      '.navbar-brand-s',
      // Woocommerce
      '/woocommerce/',
      // Flexible
      '/module/',
      '.mod-default',
      '.mod-primary',
      '.mod-secondary',
      '.mod-white',
      '.mod-gray',
       '.mod-dark',
       '/active/',
       '/hover/',
       '/after/',
       '/before/', 
       '.popover',
       '.popover .arrow', 
       '.popover-content', 
       '.popover-title', 
       '.top', 
       '.right', 
       '.left', 
       '.bottom', 
       '.arrow',
       'clearfix',
       '.postbox'.
       '.meta-box-sortables',
       '.fore',
       '.back',
       ]
     }));
   })

It wasn’t immediately obvious to me having never used gulp before that it needs to be added to the pipe in this way.

Thanks to @cfx for your help!

1 Like

Nice work, glad you figured it out!