1

I'm working on a site that uses bootstrap so has a very large CSS file with many selectors that are not being used. To reduce the size of the file, I'd like to use the grunt-uncss task, but it does not work as well with CMS-based sites, as opposed to static HTML files.

I've seen guides for how to make it work on Wordpress but the guide includes Wordpress specific plugin-ins that I don't believe are available on Craft.

Curious if anyone is using the grunt-uncss with on a Craft site and how it was set-up to make it work effectively? Would like it to run on all pages of the site, ideally. Thanks!

3

So to close the loop on this one, I actually ended up using a different grunt tool that essentially accomplishes the same goal called purifycss. I was able to target purifycss at the craft template folder, get it to look at bootstrap css selectors actually in use in the templates, compare it to the full bootstrap css files, and then have it output only the css that was being utilized in a final minified css file.

It ended up being that I was only using about half of the available bootstrap css selectors so it cut a bunch of unused css out of a very large file.

Also, I believe I could have taken the same or similar approach with uncss so if you prefer that tool, I believe you can use it in the same way (though I did not personally so can't speak in detail to it).

Here is the excerpt from my gruntfile.js:

purifycss: {
  options: {
    minify: true,
  },
  target: {
      src: ['./craft/templates/*.{html,twig}','./craft/templates/**/*.{html,twig}','./craft/templates/**/**/*.{html,twig}','./craft/templates/**/**/**/.{html,twig}'],
      css: ['./public/lib/css/dev/vendor/_bootstrap-theme.min.scss','./public/lib/css/dev/vendor/_bootstrap.min.scss'],
      dest: './public/lib/css/dev/vendor/_bootstrap-purified.min.scss'
  }
},
  • I'm having the same issue. Would you please share you solution. For example the path to Craft templates. Thanks! :) – Andrea DeMers Apr 23 '17 at 14:29
  • Hi @andrea, I've been out on vacation so sorry for the late response on this. I updated the answer above to include an excerpt from my Gruntfile.js that points grunt at the templates to read, tells it which css files to compare to, and what new css file to output to. Hope that helps! – dpayne May 2 '17 at 0:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.