Is a pseudo workflow for frontend developments, it's built over preprocessors: Jade for html, Stylus for css and Coffeescript for javascript. This works thanks Gulp, you can see the gulpfile.js for understand the defaults tasks and feel free to change whatever you want for your project. Also, we're using Bower to manage dependencies that you can add or delete from bower.json
Clone the repo and you'll get something like this:
Go the automatization folder and run the .folder.sh file: Just for the record, we're working at automatization folder every time
$ sudo bash .folders.sh
After that, you'll see this
If you are using OSX Yosemite, could try to open and edit the .local_osx.sh for config virtual host, read it carefully and then run the file:
$ sudo bash .local_osx.sh
Be sure that you have install gulp and bower already, if not, just run:
$ sudo npm install gulp -g
$ sudo npm install bower -g
After that, you need to install node's package and the bower dependencies:
$ sudo npm install
$ bower install
if you have an error with bower install, is probably that you need to give permissions, something like this:
$ sudo chmod -R 777 alpha/
there is only modify the page.jade file at frontend/sources/jade/_config/
- page.url = "http://local.alpha.com/"
- page.app = "http://local.alpha.com/"
to...
- page.url = "http://local.myproject.com/"
- page.app = "http://local.myproject.com/"
And finally run every task in the gulpfile.js
$ gulp
Tasks:
- gulp - run task default
- gulp html - compile jade
- gulp css - compile stylus
- gulp js - compile coffeescript
- gulp watch - watching jade, stylus and coffeescript files for compile
- gulp fonts - join every .svg in static/icons folder, generate icons.styl and the fonts in static/fonts/icons
- gulp sprite - compile the images in static/img/sprite to make a sprite and minified
you can run
$ gulp server
instead of
$ gulp watch
and change
- page.url = "http://local.alpha.com/"
- page.app = "http://local.alpha.com/"
to...
- page.url = "http://localhost:3000/"
- page.app = "http://localhost:3000/"
that's it...
PD: if you have any problem with anything, just send a tweet @paulrrdiaz
For this small version the views will be in the first level of jade folder, like this:
and you set up your css and js module in each view, I mean: