<p>So to close the loop on this one, I actually ended up using a different grunt tool that essentially accomplishes the same goal called <a href="https://github.com/purifycss/grunt-purifycss" rel="nofollow noreferrer">purifycss</a>. 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. </p>

<p>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. </p>

<p>Also, I believe I could have taken the same or similar approach with <a href="https://github.com/addyosmani/grunt-uncss" rel="nofollow noreferrer">uncss</a> 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). </p>

<p>Here is the excerpt from my gruntfile.js:</p>

<pre><code>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'
  }
},
</code></pre>

CC BY-SA 3.0
2017-04-23T14:29:17.760Z
I'm having the same issue. Would you please share you solution. For example the path to Craft templates. Thanks! :)
Andrea DeMers
CC BY-SA 3.0
2017-05-02T00:21:46.927Z
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
CC BY-SA 3.0
2017-02-02T18:51:03.267Z
2017-05-02T00:23:27.550Z
2017-05-02T00:23:27.550Z
dpayne
<p>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 <a href="https://github.com/addyosmani/grunt-uncss" rel="nofollow noreferrer">grunt-uncss task</a>, but it does not work as well with CMS-based sites, as opposed to static HTML files. </p>

<p>I've seen guides for how to <a href="https://gladdy.uk/blog/2014/04/13/using-uncss-and-grunt-uncss-with-wordpress/" rel="nofollow noreferrer">make it work on Wordpress</a> but the guide includes Wordpress specific plugin-ins that I don't believe are available on Craft.</p>

<p>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!</p>

<css><bootstrap-craft>
Possible to Get grunt-uncss Working with Craft?
# Possible to Get grunt-uncss Working with Craft?

(Asked by: username_0 on 2017-01-05)

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](https://github.com/addyosmani/grunt-uncss), 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](https://gladdy.uk/blog/2014/04/13/using-uncss-and-grunt-uncss-with-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!

**Tags:** css, bootstrap-craft


---

## 1 answers

### Answer by username_0 on 2017-02-02. Score: 3 | Accepted answer

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'
  }
},

> **Comments:**
> **username_1**: I'm having the same issue. Would you please share you solution. For example the path to Craft templates. Thanks! :)  
> **username_0**: 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!  

---

