Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hersonls/frango
Django and Gulp - Frango, a FRontend and backend djANGO project template
https://github.com/hersonls/frango
browsersync django frontend gulp python sass
Last synced: 3 months ago
JSON representation
Django and Gulp - Frango, a FRontend and backend djANGO project template
- Host: GitHub
- URL: https://github.com/hersonls/frango
- Owner: hersonls
- Created: 2015-09-23T06:53:58.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-12-09T21:10:29.000Z (about 6 years ago)
- Last Synced: 2024-08-01T09:23:50.968Z (6 months ago)
- Topics: browsersync, django, frontend, gulp, python, sass
- Language: Python
- Homepage:
- Size: 286 KB
- Stars: 53
- Watchers: 6
- Forks: 10
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- starred-awesome - frango - Django and Gulp - Frango, a FRontend and backend djANGO project template (Python)
README
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.
Test in heroku
--------------
[](https://heroku.com/deploy)
System dependences
------------------
First of all, dependences. This is what Frango need from your system:
- NodeJS
- NPM
- Bower
- Gulp
### Ubuntu setup
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
```
Start new Frango project
------------------------
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
```
Backend
-------
### Development server
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
```
Frontend
--------
All the frontend files now live in ```frontend``` directory. The files here are
famliliar to all frontend developers. The main directores is:
- ***static*** - All static files for project like: images, styles, scripts and fonts.
- ***templates*** - All project templates
- ***dist*** - All build files for production. This directory will be generated by ```gulp build``` command.
- ***.tmp*** - All runtime files generated by development server. Like output from sass and javascript from babel.
### Frontend features
By default, frontend is automated by [Gulp](http://gulpjs.com/). This is which tasks Frango has by default:
- [BrowserSync]() - Here's pleasure, now all your test browser will be automatically updated when any changes happen.
- [sass](https://www.npmjs.com/package/gulp-sass) - Compile automaticaly all sass files.
- [babel](https://www.npmjs.com/package/gulp-babel) - Now you can write ES6 without worry about browser support.
- [autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) - You don't need to remember all browser support tags, this task will add for you.
- [cssnano](https://www.npmjs.com/package/cssnano) - This task will make your css small as possible.
- [eslit](https://www.npmjs.com/package/gulp-eslint) - If you make something wrong in your Javascript, this task will make you know about it.
- [imagemin](https://www.npmjs.com/package/gulp-imagemin) - If your image has pixel wich you don't need, this will remove for you.
- [sourcemaps](https://www.npmjs.com/package/gulp-sourcemaps) - You need to be remembered where your source code live, this task will create a map for you.
- [wiredep](https://www.npmjs.com/package/gulp-wiredep) - Dude, you don't need to put your dependences by yourself, this will put for in your html or sass files after execute bower install.
- [uglify](https://www.npmjs.com/package/gulp-uglify) - This task is what you need to minify your javascript.
- [useref](https://www.npmjs.com/package/gulp-useref) - This task will help you concatenate your files easily.
- [mocha](https://mochajs.org/) - By default we have mocha for your tests.
- [notify](https://www.npmjs.com/package/gulp-notify) - Gulp will notify you when your styles or scripts have errors.
All this stuff run automatically by default in your development server.
### Gulp tasks
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.
### Create a distribution build
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.
TO-DO
-----
- Test, test and more test.
- Feedback from frontend nation.
- Improve npm speed and a better strategy for first install of dependency in deployment proccess.
- Improve django management command for manage gulp process. Gulp process is restart always django
server is restarted.
- Documentation.