I usually just do all of this locally and send it up through FTP – but, if you’re a fan of vi feel free to do it in your shell. Substitute yourPlugin for cssmin or any plugin you have installed. Grunt.loadNpmTasks('grunt-contrib-yourPlugin') Generally, you can find good examples on the github page Below is a simple example (also modified from Chris’s article): That’s how you tell Grunt what plugins to use and how to use them. When you run the grunt command it turns to your Gruntfile.js for instruction. That will update your dependencies automagically while also installing the plugin. Npm install grunt-contrib-pluginName -save-dev Big surprise right? (modified from Chris’s article) Install of those plugins needs to be done, again, through npm. I mentioned a few earlier (cssmin, imagemin, uglify) but you can see a more comprehensive list ( "Grunt JS Plugins"). Grunt depends on plugins to do it’s awesomeness. That will install the grunt command line interface so you can run things with the grunt command. After completion make sure you also run `npm install -g grunt-cli`. That will go out and grab Grunt, and it’s dependencies, and install it for you. You should be able to now run `npm install `from your shell. This just tells NPM (the node package manager) what you want. If you’ve done that locally, upload it, if you did it on the server, you’re good to go. "grunt": "~0.4.1" //the version of grunt you'd like - check the site for this number "version": "1.0", //your given version number The contents should look like this (modified from Chris’s article): To do this create a package.json file in the root directory of your site (locally or on the server, doesn’t matter for now). After you’ve gotten that done you need to install grunt. The process for this can vary depending on your flavor of server so I’ll leave that step to you. None the less, I’ll provide you with a few brief nuggets from that article here.įirst and foremost, you have to have NodeJS installed. I’m not going to go into a lot of depth here, I feel like Chris’s write up does a great job of walking you through everything and that would be my recommended reading. I know that sounds complicated – it’s not. If you choose the latter, you just define the processes you’d like to run and the files you’d like run them on inside the Gruntfile.js, upload it, and, inside of a shell, run grunt from your directory. You can install those plugins individually and run them individually, or you can run them as part of your ‘master’ Gruntfile. Grunt makes use of plugins such as uglify, cssmin, imagemin, and bevy of others, to bang out that list above in one command (if you wish). This was hard for me to come to grips with, my reaction was – ‘yeah, right’. Well, take those work flow processes listed above and roll them into a single command and that is what Grunt does. Depending on your current work flow, making small modifications to CSS could require three or four steps just to move from development to production. As you can imagine (or don’t have to imagine because you suffer through it in practice) the process of making changes is a pain in the ass. CodeKit and, I believe, programs like PrePros can do the concatenation and minification. For me, I was running images through something like RIOT or CodeKit on a mac. CSS Minification – compressing styling weight by removing excess white space.Īll of those things have their own ways of being accomplished.CSS and Js concatenation – combine all your nice bite size scripts.Image optimization – reducing the weight of images to improve mobile performance.That list typically would involve, but not be limited to: Most developers work flows involve a certain amount of optimization of production websites. While Grunt is exactly this, what it DOES is the real revelation. Oh…of course… If that doesn’t mean much to you don’t worry, I think that’s a common reaction. That will walk you through the baby steps of getting up and running and will probably provide an ‘a-ha’ moment or two, I can’t recommend reading it enough.ĭirectly from their homepage – Grunt is a javascript task runner. The real kicker was Chris Coyier’s write up at 24ways – ( "Chris Coyier on Grunt JS"). After recently installing NodeJS on my server to get a ( "Getting Started on The Ghost Blogging Platform") I decided that I should give Grunt a go. I kept hearing ( "Dave Rupert") and ( "Chris Coyier") reference it on the ( "Shop Talk Show Web Development Podcast") and, slowly, I picked up little bits and pieces of what it was all about. I’ll admit it – until about a month ago I had no idea what the hell Grunt did.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |