At Centresource, we’ve been using Codekit for the majority of our projects for over a year now. Codekit is a Mac desktop application that provides a nice UI to help concatenate, minify and otherwise optimize your javascript and SASS files. In our entire workflow, this is the only non open-source piece of software we use.
For our Rails projects, this isn’t a problem because the asset pipeline does this for us. We use Codekit primarily for our Wordpress and Drupal projects.
Why Codekit Is Bad
Don’t get me wrong, Codekit is great if you are new to SASS and/or Coffeescript and you are in need of a tool the processes and optimizes the output. But once you feel comfortable taking the training wheels off, you should be looking for the best practice when it comes to this part of your dev workflow. The following reasons why Codekit is a bad practice will make sense to you:
-
A contributing developer will need to have Codekit watching their code to prevent superfluous changes to your JS or SASS.
-
It’s a proprietary piece of software in an otherwise open-source codebase. Why use it if there are equal or better, free alternatives?
-
It assumes all developers will be using a Mac OS.
Why GruntJS Is A Good Solution to Codekit
-
It’s the hot thing right now. Check out the Yeoman workflow.
-
It’s free.
-
The open-source natures makes it customizable with tons of plugins.
How To Use GruntJS With Wordpress
Below is a basic run down of steps, but I recommend the GruntJS Getting Started documentation.
npm install grunt-cli -g #install the Grunt Command Line Interface globally
cd ./path/to/your/app
npm init #create package.json file. Defaults are adequate. We'll change things later.
npm install grunt-contrib-sass --save-dev #add SASS preprocessor
npm install grunt-contrib-watch --save-dev #add ability to run GruntJS anytime there is a change to your app
npm install node-bourbon --save-dev #for ability to @import "bourbon" in your SASS file.
Download my recommended Gruntfile.js. Be sure to change the source and destination paths for the Uglify build parameters for what is specific to your Wordpress application.
Refrences: