grunt-codekit now supports js concatenation

A final missing piece was added to the plugin for Grunt I made a few months ago: javascript concatenation using CodeKit’s prepend and append directives. Now you might think that this is a useless feature, as we have had the grunt-contrib-concat plugin for ages, but to use that you would have to change your existing project for it to work. Adding support for handling inline build comments like these

// @codekit-prepend "some-file.js"
// @codekit-append "some-other-file.js"

makes it possible to keep using CodeKit&tm; and Grunt at the same time. That means non-Mac developers can still contribute to you project, you don’t have to change any code, and you can keep the nitty-gritty of various builds in Grunt, and just use CodeKit like you normally do. Which was kinda the point for me, since CodeKit < 2 sucked at sharing config between team members (build file changed all the time).

The process of actually making this happen was interesting from a technical perspective, as I did not implement any of the code used to do the building. Instead I knew that the PrePros application contained code to do this (and is MIT licensed!), and I ended up wrapping the PrePros code into a Node module of its own that I could call out into! The interesting bit was how to deal with the Angular specific bits, and the whole IOC/dependency injection mechanism it employs. I could see the similarity of the factory and filter calls to the way RequireJS defines and requires modules, I decided to employ the Adapter pattern. What I ended up with was a brief little piece of code that exposed these two methods and delegated the actual work to RequireJS under the hood. Quite elegant, IMNSHO🙂

Another nice thing was the building of the PrePros module, and I never copy pasted or modified any code. The build script clones the PrePros Github repo and  concatenates the needed files in one build step, followed by prepending and appending of some bits of code that stubs out dependencies and adds a module.exports definition. The end result was published as node-file-builder in the NPM registry.

Legg igjen en kommentar

Fyll inn i feltene under, eller klikk på et ikon for å logge inn:

WordPress.com-logo

Du kommenterer med bruk av din WordPress.com konto. Logg ut / Endre )

Twitter picture

Du kommenterer med bruk av din Twitter konto. Logg ut / Endre )

Facebookbilde

Du kommenterer med bruk av din Facebook konto. Logg ut / Endre )

Google+ photo

Du kommenterer med bruk av din Google+ konto. Logg ut / Endre )

Kobler til %s

%d bloggers like this: