So far you’ve learned how to use command line for third party package management, powering up your front end code, automation with task runners, live reloading and browser synchronizing.
In this final tutorial of the series you’ll learn how to use command line to get your projects off to a running start by scaffolding out new projects that have all the third party code they require, as well as Grunt or Gulp task management already setup, in just a matter moments.
There are over a thousand different types of projects you can currently scaffold out using the command line, but in this tutorial we’ll go through four of them for projects based on:
- Foundation
- Bootstrap
- HTML5 Boilerplate
- Google Web Starter Kit
Foundation
Foundation has its own CLI (command line interface) that is great for scaffolding out Foundation framework projects. Let’s go through how to use the Foundation CLI to create a project utilizing Compass.
Install Foundation CLI & Prerequisites
The first part of scaffolding out a new Foundation project is to install the required CLI. Before you do, you’ll need to ensure you have five prerequisites installed on your system:
- Git
- NodeJS
- Bower
- Ruby
- grunt-cli package
We covered installation of NodeJS, Git and Bower in Taming 3rd Party Packages, installation of Ruby was covered in Powering Up Front End Code, and installation of grunt-cli was covered in Automation with Task Runners.
After ensuring you have Ruby installed you’ll need to install the Compass and Bundler gems with these commands:
gem install compass
gem install bundle
Now you can go ahead and install the Foundation CLI with this command:
gem install foundation
Create a Foundation Project
Now any time you want to start a new Foundation project, open a terminal where you want to create it and run the command
foundation new project_name
You’ll then see your newly create project folder structure generated, like so:

From here, you’ll need to have a terminal pointed inside your actual project folder, e.g. inside “project_name”.
The “bundler” gem you installed earlier will be used here to make sure all the required libraries have been installed. Get everything squared away by running the command:
bundle
You only have to do this once when you first create your Foundation Compass projects.
In the browser, your new project will look like this:

You’re now ready to start development on your project. There is an inbuilt Sass compiler that will watch the “.scss” files in the library for changes, then recompile them to css for you. Activate it with the command:
bundle exec compass watch
Yeoman
Yeoman is a tool designed expressly for scaffolding out new projects. It works on top of NodeJS, integrates Bower for package management, and uses Grunt or Gulp for task running.
After installing Yeoman the basic process for scaffolding any new project becomes:
- Find and install a Yeoman generator for the type of project you want to create, e.g. generator-h5bp for an HTML5 Boilerplate project.
- Type
yo <generator_handle>
to generate a new project, e.g.yo h5bp
Read more about Yeoman at: http://yeoman.io/
Install Yeoman
To use Yeoman, you’ll need to have bower, grunt-cli and gulp installed globally, which you should have at this point as long as you’ve followed all the tutorials in the series so far.
Install Yeoman globally with the command:
npm install -g yo
Now you’re ready to go and find generators and scaffold new projects.
Create a Bootstrap Project
To scaffold out a Bootstrap project we’ll be using generator-gulp-bootstrap. Among other things, this generator sets you up with the Bootstrap framework, jQuery & Modernizr, BrowserSync, automatic Sass compilation via LibSass, automatic JS linting and image optimization.
Install the Generator
Install the generator globally with:
[sudo] npm install -g generator-gulp-bootstrap
Scaffold the Project
Point your terminal wherever you’d like to scaffold your new project and run:
yo gulp-bootstrap
You’ll get a little display like this in your terminal, and you’ll be able to verify that you want to use Bootstrap and Modernizr:

After the generator finishes running you’ll have a folder structure like this:

Commands
To build your project use the command:
gulp
To spin up a local preview with auto compilation and reload run:
gulp watch
In a browser, your new Bootstrap project will look like this:

Create a HTML5 Boilerplate Project
To scaffold a new HTML5 Boilerplate project we’ll be using generator-h5bp.
Install the Generator
Install the generator globally with:
[sudo] npm install generator-h5bp -g
Scaffold the Project
Scaffold out your new project with this command:
yo h5bp
You’ll get the option to choose whether or not you want docs included in your project, then the generator will run.

You’ll then have a new HTML5 Boilerplate project structured like so:

In a browser all you’ll see is a simple “Hello world!” message, but if you view the code you’ll see you have everything you need to get your HTML5 site underway:

Create a Google Web Starter Kit Project
Web Starter Kit is a project by Google, designed as “boilerplate & tooling for multi-device development”. You can read all about its features at: https://developers.google.com/web/starter-kit/
To scaffold it out we'll be using generator-mobile.
Install the Generator
Install the generator globally with:
[sudo] npm install yeoman/generator-mobile -g
Scaffold the Project
Scaffold out your GWSK project with the command:
yo mobile
In your terminal you’ll answer a series of questions based on which your project will be generated:

When the generator has finished running your new project will have this structure:

Commands
To open a BrowserSync powered localhost preview run this command:
gulp serve
The preview of your site will look like this:

Note: After running the gulp serve command you may see an error message saying browser-sync couldn’t be found. If so, manually install it into your folder with this command:
[sudo] npm install browser-sync
To build the whole project run this command:
gulp
To get feedback on the speed of your project run:
gulp pagespeed
This command will give you a readout of “pagespeed” data in your terminal like so:

And if you chose one of the hosting options while scaffolding your project, publish your site with:
gulp deploy
In Conclusion
That’s just about it for this tutorial–you now have a number of tools at your finger tips for getting up and running with a few common front-end frameworks, all through the power of the command line!
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post