ramstein74 / Coffee_Jade_Stylus_inside_web2py

Use coffeescript Jade and Stylus inside Web2py

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Coffee_Jade_Stylus_inside_web2py

Gitter

This is how you can work with coffeescript, jade and stylus inside your web2py app

see a youtube video here https://www.youtube.com/watch?v=zt5gnKk40Zw

Note: this is a per app procedure!!

1 - Firs make sure you have nodejs installed in your machine goto http://nodejs.org/ and download/install it
2 - install gulp
goto http://gulpjs.com/ and learn about it
install it with
npm install -g gulp
to install it globally
3 - there is a file called package.json at the root of the app. It has inside some dependencies to be installed.

from the command line execute:
npm install
this will make all dependencies written inside package.json to be installed in a node_modules folder
4 - in the command line execute at the root of your app:
gulp
this command will call gulp that in turn will call gulpfile.js . gulpfilejs will then call gulpfile.coffe. Hey, I LIKE coffeescript!!

5 - if you use chrome install the live reload plugin.

6 - Start your web2py server as usual
inside views/default/ folder you can create your jade files
inside static/css folder you can create your stylus files
inside satic/js folder you can create your coffeescript files

all of these files will be automatically converted to the same html,css and js respectively as soon as you save them

This is just an example it can be tweaked as we wish. For that just change the gulpfile.coffee file.

Note: there is a ng-classify and sourcemaps task inside my gulpfile.coffee.
Ignore them for this example.
Have fun!

About

Use coffeescript Jade and Stylus inside Web2py

License:Other


Languages

Language:Python 78.6%Language:JavaScript 8.9%Language:HTML 6.1%Language:CSS 5.9%Language:CoffeeScript 0.5%