generator-webdev

Yeoman generator for webdevelopment with Assemble, jQuery, Boostrap, Sass/SCSS, Less, TypeScript and / or CoffeeScript.

Installation

All following commands are executed in a terminal ( Linux / Mac OS X ) or in the PowerShell ( Windows ).

If you use a Mac OS X for development, you have to install Xcode via Mac App Store first. You can check it with this command: gcc --version.

Node.js

You need to pre-install Node.js (inclusive npm)

Check:

node --version
npm --version

git

For some packages you have to install git.

Check:

git --version

Compass

Because of grunt-contrib-compass for Sass/SCSS, this generator requires Ruby, Sass, and Compass >=1.0.1. If you use OS X or Linux you probably already have Ruby; test with ruby -v in your terminal. When you've confirmed you have Ruby installed, run gem update --system && gem install compass to install Compass and Sass - It may be necessary to do this as administrator (root).

Check:

compass --version

npm packages

Installation of the npm packages Yeoman, bower, grunt-cli and generator-webdev using npm:

npm install -g yo
npm install -g bower
npm install -g grunt-cli
npm install -g generator-webdev

It may be necessary to do this as administrator (root) => sudo npm install -g yo ....

Initialize a new project

If everything is installed properly, setting up a new projects is done very quickly.

Generate your new project:

mkdir new-project
cd new-project
yo webdev

Development

cd new-project
grunt serve

This will start a new local server on http://localhost:9000. The page in your browser automatically refreshes when files are changed.

You can stop the server with: CTRL + C

Building

cd new-project
grunt build

This will build a distribution version of your website in the dist directory.

Development-Files:

All development files are in the app directory:

In app/scripts you can use JavaScript (.js), CoffeeScript (.coffee) and / or TypeScript (.ts).
In app/styles you can use CSS (.css), Sass (.sass) / SCSS (.scss) and / or Less (.less).
In app/templates you find the handlebar-files (.hbs). app/templates/layouts/layout.hbs is the main file. Files in app/templates/pages and app/templates/partials will render into it.

Getting To Know Yeoman

Yeoman has a heart of gold. He's a person with feelings and opinions, but he's very easy to work with. If you think he's too opinionated, he can be easily convinced. Feel free to learn more about him.

Thanks

This generator was created with the support of the following articles: