Of all the various build tools that are available right now (such as Gulp, Grunt, and others), I still find myself using CodeKit. I’ve been a fan of it for a long time, and it still fits well into my workflow.
It’s not that I’m making a case for you to use it, but if you are using it, then there are some that it offers that aren’t immediately evident. Things that other build tools tend to make a bit easier to achieve.
CodeKit makes this possible in two ways: Through the GUI and directives in an individual file.
There are some advantages to doing this (as well as alternative ways of doing this), but before I talk about those, I want to show how actually to do it.
First, I assume that you have some directory structure set up so that you’ve got your un-minified, raw JavScript files. These are the ones that you typically work with during development.
If you’ve got something like this, then setting up your environment to create a single, minified file for the project is easy.
Notice in the image above, I have a file called
app.js. This file is where I define the files I want to include in app.min.js. Specifically, the file contains instructions for the files and the order in which I want the files added to the output file.
Of course, you don’t have to call the file
app.js. This is what I’m calling it in my project. Call it whatever you’d like.
app.js), it will rebuild the entire file.
Depending on your configuration, CodeKit will write the single, minified file into the directory that corresponds to your configuration. If you want to place it somewhere else, you can edit
Regardless, wherever you save it, this is the single file you’ll enqueue with WordPress.
If you’re planning to do this in WordPress, there are a few things that I think are worth considering. In no particular order:
- Feel free to create several files that are composed of individual files, then use server side API functions to determine which page to load. For example, use the
is_single()functions to determine which files to load.
- When you’re in development, use the un-minified files to test the functionality for bugs or errors. Once done, repeat the tests to make sure the functionality continues to work after the files are minified and combined into a single file.
- Make sure that the files you’re creating are logically cohesive. That is, separate the code that will be added to the administration area from the code that will be in the public facing area of the plugin.
- Heavily comment the code in your development files. Add whatever function comments, file-level comments, and even block comments that you deem necessary to explain what’s happening in the code. None of this will make it into the final, minified file but it will save you a lot of time in maintenance and debugging when you’re working on the files in development.
With all of that said, I’m sure there is more than you could add to what I’ve offered above. If so, feel free to include it in the comments; otherwise, I hope this helps streamline some of the work you’re doing with whatever build tool you use (whether or not it’s CodeKit).