Django and Gulp - Frango, a FRontend and backend djANGO project template
Now frontend and backend will not live togheter anymore. Frango use by default Gulp to automate your frontend tasks, creating a familiar enviroment for frontend developers who works with Django as backend framework.
First of all, dependences. This is what Frango need from your system:
Install dependences:
curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
sudo apt-get install nodejs
sudo npm install -g npm
sudo npm install -g gulp-cli bower
To start a new Django project using Frango:
pip install django
django-admin startproject --template=https://github.com/hersonls/frango/archive/master.zip myproject
cd myproject
make config
Frango come with a django frontend app witch will suport you with several features, like management command to run developement server wich will manage a BrowserSync process for you and some helpfull templatetags.
To run development server with BrowserSync proxy:
cd myproject/backend
python manage.py server
All the frontend files now live in frontend
directory. The files here are
famliliar to all frontend developers. The main directores is:
gulp build
command.By default, frontend is automated by Gulp. This is which tasks Frango has by default:
All this stuff run automatically by default in your development server.
The main gulp tasks are:
gulp serve:django
- Run BrowserSync in port 9000 as a proxy to port 8000.gulp serve:test
- Run javascript tests using mocha by default.gulp serve
- Run web server using BrowserSync to serve template folder and statics ( usefull for create html without run a django server ).gulp build
- Create a distribution directory with all final files for production.To create a distribute build you need to execute the gulp build task:
cd myproject/frontend
gulp build
This task will create a dist
folder with all minified and compressed files.