Generator-saffron NPM

Generator-saffron

#Saffron Documentation

Wire Frontend Framework

This is a productive beta release - for internal Testing. Use the Issues when you find a Bug

Installation

###Install the dependencys for your development enviroment

You need Node.js (with NPM Package Manager) and Ruby.

Install Jade

$ npm install jade

Install SASS

$ gem install sass --pre

Install Compass

$ gem install compass --pre

Install Yeoman (included Grunt and Bower)

$ npm install -g yeoman

###Clone the Repository to your local machine

Because the Repository is private, we cant use the NPM Network. You need to Clone the Generator in a directory of your Choice, you can update it with Git.

The Name of the Directory is "generator-saffron", its the naming convention from Yeoman.

$ git clone https://github.com/WireConnect/generator-saffron.git
$ cd generator-saffron

You must link this directory with NPM, to call the Generator

$ npm link

Yeoman install some Dependencies. When its finished check with

$ yo

Should the "generator-saffron" is installed? When not relink

$ npm link

When its ok you can call the Generator in every directory that you want.

Activate the Generator

Make a new working directory in your Apache HTDocs, and call the Generator:

$ mkdir myapp && cd $_
$ yo saffron

Or use

$ yo

The Generator asks you some Questions and config the configuration files and install the Dependencies. When its finished works with Grunt and Bower.

Download the outer Packages

You can modifiy the bower.json when you want other JS Packages. Alternative you can install the packages on the Fly with Bower.

The Packages are downloaded in the "stash/bower" directory

$ bower install jquery

Better is to save the dependency in the bower.json file.

$ bower install jquery --save

With --save bower modifiy the bower.json file.

Initalise Grunt

Grunt a Taskrunner, inside the Saffron Package you will find one "package.json" and a "gruntfile.js". The "package.json" is only need that Grunt download the Dependencies for the Taskrunning. The "gruntfile.js" is the ruleset for Grunt.

Start with:

$ grunt develop

"develop" is one of the defined task. Grunt make the following things

Activate Compass to compile the Style.sass and copy it to the "dev/components/css" directory
Activate Coffee to compile the app.coffee to app.js inside "dev/components/js" directory
Compile the jade file and copy the HTML Output in the "dev" directory
Pack some JS File from Bower and include this as one js file in the "dev/component/js" directory
Copy some other files from the "stash" directory to the "dev" directory
Open the Browser
Start Livereload

Livereload

Thats it now you can Start with the Development. But Work only on the Source Files!

When you want Livereload comfort activate the server task:

$ grunt server

Grunt will now watch for modifications on the Jade/SASS/Coffee files, when you save it it will automaticly compile and refresh the browser. For the Livereload you dosent need a browser extension, the JS Call is automaticly included in the Jade Files.