Laravel PHP Framework - front stack integration
, (*1)
Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable, creative experience to be truly fulfilling. Laravel attempts to take the pain out of development by easing common tasks used in the majority of web projects, such as authentication, routing, sessions, queueing, and caching., (*2)
Laravel is accessible, yet powerful, providing tools needed for large, robust applications. A superb inversion of control container, expressive migration system, and tightly integrated unit testing support give you the tools you need to build any application with which you are tasked., (*3)
Official Documentation
Documentation for the framework can be found on the Laravel website., (*4)
Getting start
This project is based on the Laravel5 framework. The boilerplate which was added to the initial laravel structure is composed by several front usefull tools listed below.
- gulp (version 4)
- bower
- es6 (with babel transpiler)
- requirejs
- sass full integration with vendors dynamic dependecies
- bootstrap 4 (sass integrated)
- font Awesome (sass integrated)
- eslint
- jsdoc, (*5)
To add a library, add it into bower.json file and into public/js/app.config.js => paths., (*6)
Then set js / sass / fonts required files for your new external lib into paths const declaration L.24 in gulp.babel.js, (*7)
Then run gulp bower and voilĂ , your lib is ready to be used !, (*8)
All js vendors files are imported in public/js/vendors directory., (*9)
All scss vendors files are imported in resources/assets/sass/vendors directory., (*10)
All fonts vendors files are imported in resources/assets/fonts directory., (*11)
Note: To use an es6 module, add es6!your-es6-module in your require|define call, (*12)
Gulp integration
Gulp is used to automatize tasks, using nodeJs to process files., (*13)
Laravel uses a tool called elixir which is basically a wrapper for gulp to quickly process basic tasks., (*14)
I decided to overwrite this tool and using directly a pure gulp 4 implementation with a nice es6 syntax while elixir is based on gulp 3., (*15)
Gulp tasks:, (*16)
- Vendors bower requirements
-
bowerDownload (Download bower dependencies in bower_components directory)
-
bowerMoveJs (Move js vendors files into public/js/vendor directory)
-
bowerMoveSass (Move sass vendors files into resources/assets/vendor directory)
-
bowerMoveFonts (Move fonts vendors files into resources/assets/fonts directory)
-
bowerClean (Clean bower dependencies in js, fonts and sass source files (not in bower_components))
-
bower (Wrapper for bowerDownload then bowerClean then bowerMoveJs, bowerMoveSass and bowerMoveFonts)
- Sass / js build
-
sassDev (Compile sass files and generate map in .css result file)
-
sassProd (Compile sass files in a .css file)
-
buildJs (Build the js source files into public/dist/app.js using requirejs and the requirejs optimizer)
- Linter
-
eslint (Lint js files with eslint linter)
- jsDoc
-
jsdoc (Generate the jsdoc in storage/app/public/jsDoc)
All dependencies must be listed in paths const declaration L.24., (*17)
Sass
The sass integration is pretty simple here. A main resources/assets/sass/app.scss is used to required all sass dependencies., (*18)
This file is compiled using sass pre-processor and generate a unique public/dist/style.css file for all you app with the command gulp sassDev or gulp sassProd (without sources map)., (*19)
You can add as much custom .scss files as you want in resources/assets/sass directory, be sure to add those files in the main resources/assets/sass/app.scss file., (*20)
Eslint
Natively eslint:all is set in the .eslintrc.json file which can be edited to add / remove js lint rules., (*21)
Jsdoc
The jsdoc is automaticaly generated in storage/app/public/jsDoc directory with the commande gulp jsdoc., (*22)
ink-docstrap theme is used to generate the documentation., (*23)
Jsdoc parameters can be edited in jsdocConfig.json file., (*24)
Wallogit.com
