An Easy Way to Include a Comment at the Top of Your JavaScript in CodeKit

Don’t judge me, but I’ve only just started getting to grips with SASS. To help with the process I’ve been using CodeKit and loving it. As well as compiling my SASS stylesheets I have it set to concatenate and minify my JavaScript too.

So my main JavaScript file looked like this:

/*! 
 *  
 * Example JavaScript
 * By Kris Noble
 * 
 * @license Example license
 * 
 * Original: /js/functions.js
 * 
 * Includes: 
 *  - Library v2.1.1 | (c) 2014 Example Group | example.org/license
 *  - Another Library v1.1 | github.com/dev/another-library | MIT license 
 *  
 */

// @codekit-prepend "library.js"; 
// @codekit-prepend "another-library.js"; 

$(window).load(function(){
 // …
});

Nothing special, just a normal doc comment, a couple of prepends for libraries and then my own code.

Getting CodeKit to keep the comment is no problem, the @license takes care of that. However, @codekit-prepend works differently from SASS’ @import - it doesn’t insert the file at the point of the comment, it takes the "prepend" part literally and sticks it right at the start of the file.

So from my file above, I’d get the prepends, then the comment, then my code - not exactly optimal. I thought about just adding the comment manually, but that feels kind of janky compared to the usual flow of CodeKit.

Then, I came upon a simple solution - move the comment out to its own file and prepend it, like this:

// @codekit-prepend "_doc.js"; 
// @codekit-prepend "library.js"; 
// @codekit-prepend "another-library.js"; 

$(window).load(function(){
 // …
});

_doc.js contains the comment and nothing else, and gets prepended as you would expect. In my example above the @license part stops the comment getting stripped out, but you can also use @preserve to achieve the same thing.

Posted on Thursday, 6th November 2014.

Tags: CodeKit Development JavaScript SASS

Feedback

Sorry, feedback is now closed on this post, but please feel free to get in touch if you would like to talk about it!