In part one we discussed what a flat build is and why use it. In this second part I will outline how to set up your dev environment, and how to scaffold a project using Yeoman.
Step 1 - Set up your working environment
- Git is a free and open source distributed version control system.
- Ruby is a dynamic, open source programming language with a focus on simplicity and productivity.
- Compass is an open-source CSS Authoring Framework.
Step 2 - Install Yeoman
Install Yeoman globally by opening your terminal and running:
npm install -g yo grunt-cli bower
Step 3 - Scaffold your project
The easiest way to do this is by using Yeoman’s built-in webapp generator. In your terminal create a project folder, then navigate into it and follow this procedure:
- Run: 'yo webapp'
- Answer 'yes' or 'no' to the various options (such as “Would you like to include Twitter Bootstrap for Sass?”)
- Then run 'bower install' (this will install any dependent packages)
- Finally, to build your project for the first time (or at any other time) run 'grunt'
- Or, to open your project in your browser and start watching it for changes run 'grunt server'
If you look in your project folder you should see a directory structure that looks like this (after you have run 'grunt' for the first time). For clarity I’ve shown only the folders, not the files:
myproject/ |-- .sass-cache/ |-- .tmp/ |-- app/ | |-- components/ | |-- images/ | |-- scripts/ | `-- styles/ |-- dist/ | |-- components/ | |-- images/ | |-- scripts/ | `-- styles/ |-- node_modules/ `--test/
Basically you should always work in the 'app' folder. When you build the project the 'dist' folder is created automatically - this is the folder that you should distribute; it’s a self-contained, compiled, minified and optimised version of your project - you won’t need any of the other files/folders located outside of it.
Now that we have scaffolded the project we can move on to Part 3, where I will show you how to install and configure some extra Grunt tasks.
- Front-end Process - Flat Builds and Automation, Part 1: Introduction
- Front-end Process - Flat Builds and Automation, Part 2: Environment Setup & Yeoman
- Front-end Process - Flat Builds and Automation, Part 3: Grunt Tasks
- Front-end Process - Flat Builds and Automation, Part 4: CSS Framework