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.

Tags: CodeKit Development JavaScript SASS

Found this post useful or interesting? Please share it with your friends!

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!

Or find posts by tag →

Friends & Influences

  1. Aching Brain
  2. Andy Budd
  3. Anthony Killeen
  4. Ben Everard
  5. Cameron Moll
  6. Dan Cederholm
  7. Dan Mall
  8. Dave Shea
  9. Elliot Jay Stocks
  10. Jamie Knight
  11. Jamie Rumbelow
  12. Jason Santa Maria
  13. Jeff Croft
  14. Jeffrey Zeldman
  15. Jeremy Keith
  16. Jon Hicks
  17. Khoi Vinh
  18. Mark Boulton
  19. Matt Croucher
  20. Nocturnal Monkey
  21. Sarah Parmenter
  22. Shaun Inman
  23. Simon Collison
  24. Tim Van Damme
  25. Toby Howarth