CodeKit + babel
[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,
Is set to use a directory named
es6 so if you create your files in some other directory you’ll want to change that.
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.
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:
Anyof the following are true
the output path of any processed file
- Run the following
Shell Script (/bin/bash)
Here’s the hook code:
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.