A Organism Generator for smarter Frontends
Wire Frontend Framework
This is a productive beta release - for internal Testing. Use the Issues when you find a Bug
You need Node.js (with NPM Package Manager) and Ruby.
$ npm install jade
$ gem install sass --pre
$ gem install compass --pre
Install Yeoman (included Grunt and Bower)
$ npm install -g yeoman
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
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.
Make a new working directory in your Apache HTDocs, and call the Generator:
$ mkdir myapp && cd $_ $ yo saffron
The Generator asks you some Questions and config the configuration files and install the Dependencies. When its finished works with Grunt and Bower.
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.
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.
$ grunt develop
"develop" is one of the defined task. Grunt make the following things
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.
Your Dev Folder is for Working, when everything is ok you can publish the App.
$ grunt production