027 Yeoman
Yeoman serves to help us create a modern workflow for building modern applications. In this episode, we will create a little project on terminologies related to object-oriented programming (oop) that will help us explore the main features of Yeoman such as scaffolding, compiling into css and js, linting, starting a local web server, image optimisation and so much more!
Download video: mp4
Sample code: Github
Version: 0.9.6
Similar episodes: 002 Terminal, 009 Package Managers, 013 RequireJS, 021 GruntJS
##Background on Yeoman and Tools
##Things to learn with Yeoman
####1. installing yeoman
- in the command line:
curl -L get.yeoman.io | bash
- the installation will prompt you to install its pre-requisites as needed such as Homebrew, Command Line Tools for Xcode, Compass, Git, JPEGTran, NodeJS, npm, PhantomJS, Ruby, RubyGems, OptiPNG and yeoman itself.
- once installed check with
yeoman --version
- with just
yeoman
oryeoman help
you will also get a list of helpful commands yeoman init --help
will show a list of projects to get started with
####2. starting a simple project in yeoman
-
go to an empty project folder
oop
andyeoman init
[?] Would you like to include Twitter Bootstrap for Compass instead of CSS? (Y/n) Y [?] Would you like to include the Twitter Bootstrap JS plugins? (Y/n) n [?] Would you like to include RequireJS (for AMD support)? (Y/n) n [?] Would you like to support writing ECMAScript 6 modules? (Y/n) n [?] Do you need to make any changes to the above before continuing? (y/N) N
-
start the yeoman server with
yeoman server
####3. add in plugins/components to the project
yeoman list
will list all plugins for the project - will be nilyeoman search
to list packages available for installyeoman install prism
to install prismjs for syntax highlighting- connect styles with
<link rel="stylesheet" href="components/prism/prism.css">
- connect scripts with
<script src="components/prism/prism.js"></script>
- connect styles with
yeoman list
will list prism nowyeoman update
will list- tryout
yeoman install <package>
and thenyeoman uninstall <package>
####4. prepare for production
Ctrl + C
to quit the running any serveryeoman build
to runGruntfile.js
- new folderdist
created for production- start server
yeoman server:dist
to view production ready app from thedist
folder
##More Resources on Yeoman
- Say Yo to Yeoman from Nettuts
- Yeoman at your Service from Adobe
- Improved developer tooling and Yeoman by Addy Osmani
- The Breakpoint episode on Yeoman by Paul Lewis and Addy Osmani
- Web Application Development Workflow talk by Paul Irish
##More Resources on the episode project about Object Oriented Programming (OOP)
on oop:
- Python and OOP by Nettuts
- JavaScript and OOP by MDN
- PHP and OOP by Lynda
- OOP video explanation by CodeSchool.org
- OOP: A critical appraoch by Udemy blog
on building the project:
- prismjs for syntax highlighting
##Build Link of this Episode
The Breakpoint [youtube], a live show hosted by Paul Irish and Addy Osmani.