Getting Started with Foundation 6’s CLI Tools

The recently released Foundation 6 gives you many ways and tools to use it. You can download the static files, or you can use Yeti Launch, a special desktop app for Mac (soon there will be a Windows version).

A lesser-known feature is a set of command line tools available with Foundation 6, and that’s what I will cover in this article. Foundation 6 is a really flexible front-end framework, which, besides many obvious CSS features and JavaScript plugins, also has great developer tools.

[author_more]

When Might I Want to Use Foundation’s CLI Tools?

You’re probably asking why you should bother with CLI tools when you have access to the static JavaScript and CSS files, which works just fine. You probably need standard structures and an easy-to-use workflow, and that’s ok.

I’m sure you can achieve your goals that way, but I know that there are many developers who want to gain more control over the build process. This would include SCSS compilation, concatenation, minification, image optimization, and templates. I prefer to have access to these extra tools. And so there are use cases where CLI tools might be a better option.

If you work regularly with the command line but don’t know exactly what Foundation 6 has to offer in this area, or you don’t work with the command line and maybe want to learn something new, then this article is for you.

Up and Running

To get started there are some prerequisites. You’ll need to have NodeJS installed and also the npm tool that should be installed with NodeJS. You also need Git, Gulp, and Bower, all of which our foundation-cli will use. You can install these by running the following command:

[code language="bash"]
$ npm install --global gulp bower
[/code]

On some systems you’ll need super user access, especially when installing something with npm globally, so you might need to use sudo before the commands described in this post.

Installing foundation-cli

If you already have the Foundation 5 CLI on your machine, you’ll only be able to access one of the commands, depending on how your command line environment is configured. So it’s better to remove the old tools first. You can do this with the following commands:

[code language="bash"]
$ gem uninstall foundation
$ npm uninstall --global foundation-cli
[/code]

Then install the new CLI tools:

[code language="bash"]
$ npm install --global foundation-cli
[/code]

You can read more about the installation in Foundation’s documentation.

If you don’t want to install foundation-cli on your system and you have installed Gulp and Bower in the past, you can simply clone the repository with the Foundation template and then instead of using the foundation command, you can use the gulp and npm commands. Everything should work the same way as when using foundation-cli.

What Does Foundation CLI Give Me?

As mentioned, Foundation CLI uses Gulp and Bower under the hood. What are Gulp and Bower? Gulp is a toolkit that will help you automate painful or time-consuming tasks in your development workflow. Here, we can think of SCSS compilation, minification, concatenation, but also image compression or other useful tasks. Bower is a package manager for the web, which lets you download and install front-end libraries via the command line. For example, installing jQuery is a one line command: bower install jquery.

Foundation CLI downloads and installs blank templates for any of the three Foundation frameworks: Sites, Apps, and Emails. All of these templates are ready to work with Gulp and Bower, with preconfigured Gulp tasks and Bower installation sources. This is similar to a tool like Yeoman.

Using Foundation CLI

When you’ve installed foundation-cli, you can start using it by running:

[code language="bash"]
$ foundation new --framework sites --template zurb
[/code]

As you can see, we use foundation as the name and not foundation-cli. Also, we’ll only take a look at the Foundation for Sites zurb advanced template. We need to use the --framework flag to choose the proper framework and also the --template flag to choose the proper template. You can also choose the basic template, but I think the advanced is much better if you want to take a closer look.

After the installation, you should have a project folder with the name you’ve provided during the installation. Also, all dependencies should be installed there. All you need to do now is cd into the newly created project and inside the folder you can run:

[code language="bash"]
$ foundation watch
[/code]

Here comes the magic! What this does is run the Gulp build and server tasks and also the watch command. This means it triggers all configured Gulp tasks, which you will be able to see in the code. So when you run this command you should see some information in the console. The most important for now are:

Continue reading %Getting Started with Foundation 6’s CLI Tools%

by Julian Ćwirko via SitePoint