I’ve been using Codekit since it was in pre-release beta and haven’t looked back. Recently, I was building out a single-page app for YouNow and needed a build system to merge and minify my JS files. I was on the hunt for several setups and here’s what I settled on.
There are many tools available for building assets for production:
* Rails comes with its awesome asset pipeline that makes devs spoiled (yes, I’m jealous since I am forced to code PHP) and packages the JS up into a tight, content-hashed ball.
* Grunt.js could be used for Uglifying code
* Require.js has an optimizer (I haven’t used it) that seems applicable
* Ruby guard could be used for a custom build system
* There’s some ugly php based scripts that could be run
* You could roll your own bash script using YUI or Google Closure compiler for building
* And more, I’m sure.
The hard part is not picking a build system, but picking one that your team would adopt. This means that you need to choose a toolset that accommodates your team’s tech experience and competence. This is hard for a PHP-based team that detests extra steps in their dev process; rightly so.
I ended up going with Codekit for this, since I already use it for SLIM and SASS compilation. Since the team would have to adopt codekit for my preprocessors, it would be easy to also configure Codekit for my JS build system. Here’s the setup.
Codekit imports
Let’s say that I want to build several js files in my current directory into one file: app.min.js.
Here are my source files:
* a.js
* b.js
Using codekit, I can define a file app.js that contains codekit-specific statements used to import the contents of a.js and b.js for merge and minification.
Here’s what it looks like:
app.js
<code>// @codekit-append "a.js"// @codekit-append "b.js"</code>
This tells codekit that the contents of b.js will go after the contents of a.js. This allows you to define an order dependency for your javascripts.
In codekit, I can specify that app.js should be “Concatenated and Minified.” I typically set my build path to which ever folder I want (like a /build/ directory for my current project) and change the built extension from “-ck.js” to “.min.js” This means that app.js will compile to app.min.js.
Now, anytime you change a.js or b.js, app.js will get recompiled, which will produce a new version of app.min.js.
Codekit is a great tool that makes compilation simple and effortless with its seamless watch and build systems. I’m a fan.