Skip to content

Instantly share code, notes, and snippets.

@tomfuertes
Created February 9, 2014 17:47
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save tomfuertes/8902906 to your computer and use it in GitHub Desktop.
Save tomfuertes/8902906 to your computer and use it in GitHub Desktop.
uncss on a rails landing page in < 15 min (initial config steps in comments)
diff --git a/Gruntfile.js b/Gruntfile.js
index 53fe849..80ce14a 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -56,6 +56,16 @@ module.exports = function (grunt) {
max_jshint_notifications: 5
}
},
+ uncss: {
+ gettingStarted: {
+ options: {
+ stylesheets: ['../../vendor/assets/bower_components/bootstrap/dist/css/bootstrap.css']
+ },
+ files: {
+ 'app/assets/stylesheets/builds/getting-started.css': ['tmp/grunt/getting-started.html']
+ }
+ }
+ },
watch: {
lib: {
options: {
@@ -100,6 +110,9 @@ module.exports = function (grunt) {
},
cleanGit: {
command: 'git clean -fdx -- tmp public'
+ },
+ gettingStarted: {
+ command: 'curl -o tmp/grunt/getting-started.html http://localhost:3000/getting_started'
}
}
});
@@ -110,6 +123,7 @@ module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-jsbeautifier');
grunt.loadNpmTasks('grunt-concurrent');
grunt.loadNpmTasks('grunt-shell');
+ grunt.loadNpmTasks('grunt-uncss');
// grunt.loadNpmTasks('grunt-notify');
// Default task.
@@ -124,5 +138,11 @@ module.exports = function (grunt) {
'jshint'
]);
+ // Auto format files
+ grunt.registerTask('gettingStarted', [
+ 'shell:gettingStarted',
+ 'uncss:gettingStarted'
+ ]);
+
};
diff --git a/app/assets/stylesheets/getting_started.scss b/app/assets/stylesheets/getting_started.scss
index f0ffc83..16733ab 100644
--- a/app/assets/stylesheets/getting_started.scss
+++ b/app/assets/stylesheets/getting_started.scss
@@ -1,5 +1,5 @@
/*
- *= require bootstrap/dist/css/bootstrap.css
+ *= require builds/getting-started.css
*= require_self
*/
@tomfuertes
Copy link
Author

Caveats/Notes: This is a one off PPC landing page that references Bootstrap (bower maintained/installed) and a file of it's own styles. Weekend trying out grunt-uncss project theory was to just rid the dead weight that we weren't using in the library.

$ npm install grunt-uncss # install grunt-uncss
$ mkdir tmp/grunt/ && touch tmp/grunt/.gitkeep && git add -f tmp/grunt/.gitkeep 
$ git add package.json && git commit -m "npm install grunt-uncss"

# apply config above

$ grunt gettingStarted

Summary from a pre/post filesize diff was ~100K :) Know it's not the most automatable/clean code, but for ~15 minutes for doc reading, npm install, and conf - was a good poc.

@SemperEadem
Copy link

Hi, I'm new to Grunt and I don't really understand how to use that with a rails app. Should I put the uncss: { } part in my grunt file ? If so, where ?

Thanks !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment