Grunt concat: Use file instructions a la Codekit

Question

I'm trying to convert a CodeKit project to use Grunt (so we can support our Windows friends).

In CodeKit, you can concatenate JS files by including concat instructions as comments in the files you want concatenated. For example, to prepend jquery.validate.js to your scripts.js file, you would add the following comment to scripts.js:

 /* @codekit-prepend "jquery.validate.js" */

How can I configure grunt-concat (or a similar plugin) to concatenate JS files based on instructions within the files themselves? I'd prefer to have concat instructions in the files so it's more clear what's going on (as opposed to referring to Gruntfile.js).

Answer 1

I do not know about codekit syntax, but if all you need is the prepend feature, then take a look at https://github.com/miensol/grunt-concat-in-order, and specifically the filebased approach. You could customize the syntax to extract your codekit prepend syntax or replace that to something like @depend used in the example.

(for a cross platform example check out my fork, it has a windows safe example, using path.normalize)

Answer 2

I made a plugin for Grunt that understands the Kit language of CodeKit, as well as its @codekit-append and @codekit-prepend instructions. You can then build your projects both using Grunt and CodeKit interchangably without changing any code.

EDIT This functionality is still available through grunt-codekit version 0.4.x, but was removed in version 1.0.0 due to a general lack of interest. I am intending to split the functionality into a module of its own, but need some time to do it (or you can fork the code and create it yourself). Anyway, to simply use the 0.4 version you can do this npm install grunt-codekit@0.4.0 --save