Grunticon Setup

GrunticonSetup.markdown

Basic Grunticon Setup for CLI Idiots Like Me

I hacked and cursed my way to this point...better write it down!

1. Install node.js: http://nodejs.org/
2. Install grunt.js: http://gruntjs.com/getting-started
3. In the Terminal: $ cd [directory]
4. Either create package.json and use data in this gist's package.json, or run $ npm init and folow the steps
5. Make sure to add "grunt": "latest" in devDependencies if you use npm-init to create the package.jason file
6. Install Grunticon in the project: $ npm install --save-dev grunt-grunticon
7. Create Gruntfile.js and use data from the Gruntfile.js in this gist. Tweak grunticon file paths as needed.
8. Put some .svg icons in the src directory defined in the Gruntfile
9. (Make sure you $ cd to the project directory) $ grunt
10. MAGIC

Notes & Links:

• I still am pretty much a n00b when it comes to the command line and JS in general, so this may or may not be the right way to do it. But this did work for me.
• https://github.com/filamentgroup/grunticon
  • documentation here assumes good working knowledge of grunt.js and JS in general (which I do not have, hence the cursing)
• http://merrickchristensen.com/articles/gruntjs-workflow.html
  • this article gave me vital clues on properly setting up and configuring Grunt, particularly the Gruntfile.
  • I was getting nothing but errors in the command line until I figured out that:
    • I needed to wrap everything in the Gruntfile inside module.exports = function(grunt) { };
    • and the grunticon stuff needed to be inside of grunt.initConfig({ });
    • That's the assumed knowledge stuff that was tripping me up

Next Steps

• Figure out how to load the different stylesheets grunticon produces
  • I'd rather not load them as separate stylsheets using their javascript utlity.
  • I'd prefer to incorporate them into my SASS workflow
    • You can chnage the filenames of the CSS files grunticon generates, so cangeing them to .scss files is easy enough
    • Could use nested @imports: .no-svg{@import "icon-png.scss";}
    • May also need to check out this fork of grunticon for SASS
• Clone myself

Gruntfile.js

module.exports = function(grunt) {
  
grunt.loadNpmTasks('grunt-grunticon');
grunt.initConfig({
   grunticon: {
    myIcons: {
        options: {
        src: "css/dist/icons/",
        dest: "css/icons/"
      }
    }
   }
 });

  // Default task.
  grunt.registerTask('default', 'grunticon');

};

package.json

{
  "name": "test",
  "version": "0.0.0",
  "description": "grunticon",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "grunt"
  },
  "repository": {
    "type": "git",
    "url": "none"
  },
  "keywords": [
    "grunticon!"
  ],
  "author": "Me",
  "license": "BSD",
  "devDependencies": {
    "grunt": "latest",
    "grunt-grunticon": "~0.3.3"
  }
}

success.markdown