[UPDATE] CodeKit 3 is now available and supports babel natively.

Currently CodeKit does not support babeljs transpiling, but appears it will at some point in the future. This doesn’t mean you can’t use CodeKit to transpile babel, you’ll just need to install babel locally and use a hook to do so.

There’s one unfortunate thing with this hook, since we can’t trigger a hook on file save _(unless you’re running JSLint/JSHint, but the file name is not passed to the CK_INPUT_PATHS variable)_ we’ll need to create specific output files for our babel files so that CodeKit will trigger hooks. This adds a minor bit of complexity, but doable with a small amount of work.

With this hook there are three variables of interest to you, SRC, DIST, and SUFFIX.

SRC:

Is set to use a directory named es6 so if you create your files in some other directory you’ll want to change that.

DIST:

Is where babel will save the transpiled files, currently that is set to js. Also, this folder must already exist, I may update this hook later so that it will create that folder if it does not already exist.

SUFFIX:

This one is needed since we can’t set CodeKit to trigger hooks on file save, hence adding a minor bit of complexity to this hook. So for each file you’re wanting this hook to trigger on, you need to set the output path to *-babel.js (or whatever you change this var to).

Also, make sure when you set the output file it’s not saving the output in the root of the project but within the es6 directory (or whatever directory you’re using).

Here’s the hook criteria:

• Any of the following are true
• the output path of any processed file ends with -babel.js
• Run the following Shell Script (/bin/bash)

Here’s the hook code:

##### Concat & Minifying the Results

You could create a main.js file that’s used to concat all your babel transpiled files and minify in one go.

The contents would look something like:

From there you can set an output file for main.js and adjust the Output style: to your liking.

I have ran into issues with the above concat/minify file not triggering, usually another save to my source file will trigger it.

Hopefully this will help you get up and running with babel and CodeKit or has inspired you to create your own hook with some other CLI tool.