--- /dev/null
+# grunt-uncss [](http://gruntjs.com/)\r
+\r
+[](https://www.npmjs.com/package/grunt-uncss)\r
+[](https://travis-ci.org/addyosmani/grunt-uncss)\r
+[](https://ci.appveyor.com/project/addyosmani/grunt-uncss/branch/master)\r
+[](https://david-dm.org/addyosmani/grunt-uncss)\r
+[](https://david-dm.org/addyosmani/grunt-uncss?type=dev)\r
+\r
+>A grunt task for removing unused CSS from your projects with [UnCSS](https://github.com/giakki/uncss). Works across multiple files and supports dynamically injected CSS via PhantomJS.\r
+\r
+## Getting Started\r
+\r
+If you haven't used [Grunt](http://gruntjs.com/) before, be sure to check out the\r
+[Getting Started](http://gruntjs.com/getting-started) guide, as it explains how to create\r
+a [Gruntfile](http://gruntjs.com/sample-gruntfile) as well as install and use Grunt plugins.\r
+Once you're familiar with that process, you may install this plugin with this command:\r
+\r
+```shell\r
+npm install grunt-uncss --save-dev\r
+```\r
+\r
+Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:\r
+\r
+```js\r
+grunt.loadNpmTasks('grunt-uncss');\r
+```\r
+\r
+**Issues with the output should be reported on the UnCSS [issue tracker](https://github.com/giakki/uncss/issues).**\r
+\r
+## Preview\r
+\r
+Taking a multi-page project using Bootstrap with >120KB of CSS down to 11KB.\r
+\r
+\r
+\r
+## Uncss task\r
+\r
+*Run this task with the `grunt uncss` command.*\r
+\r
+Task targets, files and options may be specified according to the grunt [Configuring tasks](http://gruntjs.com/configuring-tasks) guide.\r
+\r
+## Options\r
+\r
+Options are passed to [UnCSS](https://github.com/giakki/uncss#within-nodejs). In addition this task defines an extra option:\r
+\r
+### report\r
+\r
+* Choices: `'min'`, `'gzip'`\r
+* Default: `'min'`\r
+\r
+Report minification result or both minification and gzip results.\r
+This is useful to see exactly how well clean-css is performing but using `'gzip'` will make the task take 5-10x longer to complete. [Example output](https://github.com/sindresorhus/maxmin#readme).\r
+\r
+## Usage examples\r
+\r
+Use the `grunt-uncss` task by specifying a target destination (file) for your cleaned CSS.\r
+Below this is `dist/css/tidy.css`.\r
+\r
+Along-side, specify the input HTML files you would like scanned for used selectors.\r
+In this case `app/index.html` and `app/about.html` are the two files we would like checked.\r
+\r
+```js\r
+uncss: {\r
+ dist: {\r
+ files: {\r
+ 'dist/css/tidy.css': ['app/index.html', 'app/about.html']\r
+ }\r
+ }\r
+}\r
+```\r
+\r
+Which you can then use alongside a processor like\r
+[processhtml](https://github.com/dciccale/grunt-processhtml) to\r
+rewrite the location of your stylesheet to `tidy.css` using a block like:\r
+\r
+```html\r
+<!-- build:css css/tidy.css -->\r
+<link rel="stylesheet" href="css/normalize.css">\r
+<link rel="stylesheet" href="css/main.css">\r
+<link rel="stylesheet" href="css/bootstrap.css">\r
+<!-- /build -->\r
+```\r
+\r
+and some configuration like:\r
+\r
+```js\r
+processhtml: {\r
+ dist: {\r
+ files: {\r
+ 'dist/index.html': ['app/index.html'],\r
+ 'dist/about.html': ['app/about.html']\r
+ }\r
+ }\r
+}\r
+```\r
+\r
+```js\r
+// Remove unused CSS across multiple files\r
+uncss: {\r
+ dist: {\r
+ files: {\r
+ 'dist/css/tidy.css': ['app/index.html', 'app/about.html']\r
+ }\r
+ }\r
+}\r
+```\r
+\r
+```js\r
+// Remove unused CSS across multiple files and ignore specific selectors\r
+uncss: {\r
+ dist: {\r
+ options: {\r
+ ignore: ['#added_at_runtime', '.created_by_jQuery']\r
+ },\r
+ files: {\r
+ 'dist/css/tidy.css': ['app/index.html', 'app/about.html']\r
+ }\r
+ }\r
+}\r
+```\r
+\r
+```js\r
+// Remove unused CSS from URLs (php, node, etc.)\r
+// (Note that`nonull` must be true, or else Grunt\r
+// removes remote paths that it can't find locally)\r
+uncss: {\r
+ dist: {\r
+ files: [{\r
+ nonull: true,\r
+ src: ['http://localhost:8080/path1', 'http://localhost:8080/path2'],\r
+ dest: 'dist/css/tidy.css'\r
+ }]\r
+ }\r
+}\r
+```\r
+\r
+### Test project\r
+\r
+There is a test project included under the `tests/app` directory which you can build by running `grunt` after an `npm install`.\r
+It also includes a `grunt compare_size` task for getting a feel of the before and after CSS sizes:\r
+\r
+\r
+\r
+## Examples\r
+\r
+### Sites\r
+\r
+* [HTML5Boilerplate.com website](https://github.com/h5bp/html5boilerplate.com)\r
+* [Mozilla's DXR documentation viewer](https://github.com/mozilla/dxr)\r
+* [Vanilla forums docs site](https://github.com/vanilla/vanilla-docs)\r
+\r
+### Apps\r
+\r
+* [GitHub Team Viewer - Angular app](https://github.com/vinitkumar/github-team-viewer)\r
+* [Angular Todo application](https://github.com/JeremyCarlsten/grunt-uncss-angular-example)\r
+* [CashSplitter - Angular app with PouchDB, Bootstrap](https://github.com/carlo-colombo/CashSplitter)\r
+* [This Week's Comics Express app](https://github.com/WillsonSmith/thisWeeksComics)\r
+* [Sample grunt-uncss in a Sass project](https://github.com/addyosmani/grunt-uncss-sass-example)\r
+\r
+### Other\r
+\r
+* [Using grunt-uncss with Wordpress](https://github.com/sboodhoo/Grunt-UnCSS-WordPress)\r
+* [JSON Sitemap generator for grunt-uncss](https://github.com/phoenixMag00/JSON-Sitemap-Generator-for-Grunt-UnCSS-with-WordPress)\r
+\r
+## The problem\r
+\r
+User-interface libraries like [Bootstrap](https://getbootstrap.com), [TopCoat](http://topcoat.io)\r
+and so on are fairly prolific, however many developers use less than 10% of the CSS they provide\r
+(when opting for the full build, which most do). As a result, they can end up with fairly bloated\r
+stylesheets which can significantly increase page load time and affect performance.\r
+`grunt-uncss` is an attempt to help with by generating a CSS file containing only the CSS used\r
+in your project, based on selector testing.\r
+\r
+## Research and alternative solutions\r
+\r
+There have been many efforts to try solving the problem of finding unused CSS in the past. Opera created\r
+[ucss](https://github.com/oyvindeh/ucss), @aanand created <https://github.com/aanand/deadweight>,\r
+Brian Le Roux [CSS Slap Chop](https://github.com/brianleroux/css-slap-chop) and there were a number of\r
+client-side solutions also crafted, such as [Helium-CSS](https://github.com/geuis/helium-css),\r
+[CSSESS](https://github.com/driverdan/cssess) and the Python [mincss](https://www.peterbe.com/plog/mincss).\r
+\r
+Unfortunately, most of these solutions don't actually generate what you're really after - a leaner build\r
+of your project CSS containing only those rules you used. Finding that a more recent project called\r
+[UnCSS](https://github.com/giakki/uncss) did try tackling this, I set out to share some of the problems we\r
+need to solve in this space with the developer and build a Grunt task to enable usage of it in builds more\r
+easily.\r
+\r
+Huge thanks go out to Giacomo Martino for his help with the Node module this task uses.\r
+\r
+## Coverage\r
+\r
+* [Spring-cleaning unused CSS with Grunt, Gulp & other build systems](https://addyosmani.com/blog/removing-unused-css/)\r
+* [Automating the removal of unused CSS - VelocityConf](https://www.youtube.com/watch?v=833xr1MyE30)\r
+* [Use Grunt and UnCSS to speed up the load time of your site](http://xdamman.com/website-optimization-grunt-uncss)\r
+* [Foundation 5, Sass and Grunt UnCSS](https://corydowdy.com/blog/foundation-5-sass-and-grunt-uncss)\r
+* [Automating Front-end Workflow (slides)](https://speakerdeck.com/addyosmani/automating-front-end-workflow)\r
+* [Automatically removing unused CSS - Windows](http://deanhume.com/Home/BlogPost/automatically-removing-unused-css-using-grunt/6101)\r
+* [Workflow for responsive email with Grunt and UnCSS](https://medium.com/p/32d607879082)\r
+\r
+## WordPress\r
+\r
+While UnCSS works best (and quickest) with static HTML files, it is possible to pass in\r
+a URL array that contains all the URLs on your website, and process all used selectors that way.\r
+[@lgladdy](https://github.com/lgladdy) wrote a guide on how to do this\r
+[on his blog](https://gladdy.uk/blog/2014/04/13/using-uncss-and-grunt-uncss-with-wordpress/)\r
+\r
+## Yeoman Generator\r
+\r
+If you're looking for a webapp starting point with grunt-uncss integrated, see [generator-webapp-uncss](https://github.com/addyosmani/generator-webapp-uncss).\r
+\r
+## Limitations\r
+\r
+Please note that the CSS parser used in the `uncss` module we rely on currently isn't able to work with complex selectors.\r
+For example `[data-section=''] > section > [data-section-title] a`. This may mean that at build time you run into exceptions\r
+such as `TypeError: Cannot convert undefined or null to object`. If this is the case, please consider moving these selectors\r
+to a separate stylesheet which the task does not run on.\r
+\r
+We are actively looking at how to improve the CSS parsers used and will update this notice once this problem has been solved.\r
+\r
+## Maintainers\r
+\r
+* [@addyosmani](https://github.com/addyosmani)\r
+* [@XhmikosR](https://github.com/XhmikosR)\r
+\r
+## License\r
+\r
+(C) Addy Osmani 2016, released under the MIT license\r
projects / yaffs-website / blobdiff