#Codekit for mac how to
#Codekit for mac install
#Codekit for mac full
#Codekit for mac software
#Codekit for mac trial

If everything built without errors, you should see nothing but green dots, which feels good. Once the build is complete, you can check the build log by clicking on the second icon on the left below the profile pic and the files icon. You can only preview after you build the project. Take note of the preview icon next to the green indicator (which should be yellow before the build). There is also a Build Project button at the lower right hand side of the dashboard, and it is here where CodeKit is pretty solid. This initial dashboard tells me that this app is definitely intended for coders who want to get past configuration and also communicate what is in their project without having to dive into an editor and touch individual files.

Once you drop in the project folder, you will be taken to a screen with your project files and some information (you can add the folder as a project or a framework):

#Codekit for mac install

This leads me to a soft first use case for this app: If you want to develop a website without using the command line to initiate and install modules, CodeKit is an interface that allows you to drag and drop your project folder to start the process: It is an alternative to the command line.

#Codekit for mac software

ĬodeKit doesn’t use any special or proprietary software to compile and build. If you want to watch the tutorials before downloading, feel free to check out the tutorials here. You can decide to watch the video tutorials, but of course I went right in.

#Codekit for mac trial

It does this through a build process that minifies the code, optimizes resources, and compiles languages.Īfter you download the trial version, you will see this splash screen upon opening it on your Mac:

But before we start doing cartwheels, let’s take a look at a few cases where this app will work and maybe not work for you.ĬodeKit is a Mac app (decidedly not available on the Mac App store) which uses a pretty intuitive GUI interface for task management. If you answered yes, then CodeKit may be right for you.

#Codekit for mac how to

If you have any questions about how to do this, feel free to leave a comment below.Are you tired of configuring your app setup for compiling, transpiling, and bundling? Would you ever want to upload your code to one place and then click a few buttons to lint, build, debug, and optimize your code? Now, every time I save my Sass file, a new CSS file is compiled and it gets copied to the outside directory that I specified. If any of the directories in the input or output paths have spaces in them, you will have to add double quotes to them like so: cp '$CK_INPUT_PATH' /path/to/your/outside/directoryĬp '$CK_OUTPUT_PATH' /path/to/your/outside/directoryĪdding double quotes would also apply to your outside directory paths if they have spaces in them. In this case, they are the Sass and CSS files. $CK_INPUT_PATH and $CK_OUTPUT_PATH are the whole input and output filepaths including the file name(s).

Use the cp command and CodeKit’s environment variables to copy the Sass and CSS files.

Select Filename, ends with, and type in scss to target Sass files.

Make sure Shell Script (/bin/sh) is selected from the dropdown menu.

On CodeKit, I set my local site’s Sass and CSS files to be in the same directory like so: Creating Hooks in CodeKit You also need to understand how to use CodeKit’s two special environment variables, $CK_INPUT_PATH and $CK_OUTPUT_PATH. Luckily, I understand the basics of using the command line (i.e. Using CodeKit’s hooks requires a little understanding of command line functions.

I wanted to automate copying the these files to Dropbox.Īfter emailing Bryan Jones (CodeKit’s creator) about my dilemma, he told me about CodeKit’s hooks. Before I learned about the solution that I’m going to tell you about, every time I saved a Sass or CSS file on a local WordPress site, I would have to copy those saved files to the corresponding directory in Dropbox, also. This means that I have 2 copies of a local site’s theme files.

#Codekit for mac full

Because I’m paying for the Dropbox space, and because plugin and core files are updated so frequently, I save the full local WordPress site outside of my Dropbox folder (e.g. When I’m doing WordPress web development, often times, I create a local WordPress site, and I save the theme (or child theme) in a Dropbox directory. Among many other features, it also compiles Sass and Less files. You can also look at your local sites on any device that is connected to your network with CodeKit. If you don’t know about CodeKit, it’s a local development Mac tool which auto-refreshes your local site every time a file is saved.