Home

##Welcome to the generator-tze wiki!

My generator lets you quickly scaffold a basic grunt-sass-jshint webapp project.

It includes just enough Node modules and JavaScript libraries to quickly get started with your project:

• grunt
• grunt-contrib-sass
• grunt-contrib-jshint
• grunt-contrib-connect (optional)
• grunt-contrib-watch
• grunt-contrib-clean
• grunt-contrib-concat
• grunt-contrib-copy
• grunt-processhtml
• jQuery
• jQuery-UI / Bootstrap
• Modernizr

###Dependencies

Node

Download the appropriate Installer from http://nodejs.org/download/ and run it.

Verify installation in cmd/terminal:

node -v

This should display the Node version.

Grunt

Since Grunt is a Node module, you install it in cmd/terminal:

npm install -g grunt
npm install -g grunt-cli
grunt -v

Disregard "Fatal error: Unable to find local grunt." Grunt is not in your current location. The -g option tells Node Package Manager (NPM) to globally install grunt & grunt-cli into your OS-User NPM repository, which makes them available everywhere on your machine.

####Yeoman

Yeoman is another Node module:

npm install -g yo
yo -v

####Ruby [Windows only]

If you're on a Windows machine, you get to install one more dependency, Ruby. Macs come with Ruby pre-installed.

Download the appropriate Installer from http://rubyinstaller.org/downloads/ and run it.

Verify installation in cmd/terminal:

ruby -v

###Setup

Now that all the dependencies are installed, you're ready to install generator-tze, which is another Node module:

npm install -g generator-tze

Verify installation by listing your global NPM modules and finding generator-tze and its version:

npm ls -g --depth=0

Getting Started

OK! Now you're ready to generate your first grunt-sass-jshint basic webapp project!

In cmd/terminal, create a project folder and run generator-tze inside it:

mkdir myproject
cd myproject
yo tze

If you chose to include grunt-contrib-connect and grunt serve task, then start by compiling main.css, opening the sample webpage, and watching your source files:

grunt serve

Otherwise*, start by compiling main.css and watching your source files:

grunt sass:dev
grunt watch

THAT'S IT! Your /src folder now has a working, boilerplate webapp ready to view in your browser once you set up a local virtual host on it.

For final local testing before release or deployment, run grunt buildWatch to generate build output and load locally into your default browser. In case you need to fix anything, the watch task will automatically rebuld and refresh your browser.

You can of course install more Node modules and/or JavaScript libraries to suit your needs/tastes, or just get to work right away.

*By choosing NOT to include grunt-contrib-connect, I'm assuming that you already have a local webserver installed -- create a virtual host with src folder as docroot.

###CHILD PAGES

The following child pages cover usage in more detail:

• ####Development
• ####SASS