| 1 | # Installing
|
| 2 | For installing Front End Architecture which consist of (Stylus, Pug, Webpack + Babel, Gulp), you must do all at example:
|
| 3 |
|
| 4 | ```sh
|
| 5 | $ cd /to/project/folder
|
| 6 | $ npm i fe-builder
|
| 7 | $ echo "require('fe-builder')" >> index.js
|
| 8 | $ node index.js
|
| 9 | $ rm index.js
|
| 10 | ```
|
| 11 |
|
| 12 | Now you have project tree:
|
| 13 | - public
|
| 14 | - img
|
| 15 | - fonts
|
| 16 | - build
|
| 17 | - css
|
| 18 | - js
|
| 19 | - app.js (Entry point for webpack)
|
| 20 | - core (Core UI Framework) https://github.com/Vladimirtishenko/core-ui-framework
|
| 21 | - pug
|
| 22 | - layout
|
| 23 | - layout.pug (Layout for all block with link css to path /build)
|
| 24 | - include (Folder for some included files e.g: header.pug, menu.pug et al.)
|
| 25 | - index.pug (Main html block content)
|
| 26 | - styl
|
| 27 | - vendor
|
| 28 | - bootstrap.styl
|
| 29 | - build.styl (included core.styl from core-ui-framework and bootstrap.styl)
|
| 30 | - gulpfule.js (With tack for transformation pug file to html and image minified)
|
| 31 | - webpack.config.js (With architecture for transform stylus to css and ES6 to ES5)
|
| 32 | - .babelrc
|
| 33 | - .gitignore
|
| 34 | - node_modules
|
| 35 |
|
| 36 | # Reqirement
|
| 37 |
|
| 38 | - Node.js >= 6.4.*
|
| 39 | - NPM >= 3.10.*
|
| 40 | - Webpack 2+
|
| 41 |
|
| 42 |
|
| 43 | # Tech
|
| 44 |
|
| 45 | Dillinger uses a number of open source projects to work properly:
|
| 46 |
|
| 47 | * [Twitter Bootstrap] - great UI boilerplate for modern web apps
|
| 48 | * [node.js] - evented I/O for the backend
|
| 49 | * [Express] - fast node.js network app framework [@tjholowaychuk]
|
| 50 | * [Gulp] - the streaming build system
|
| 51 | * [Webpack] - Module bundler
|
| 52 | * [Pug] - The general rendering process of Pug is simple.
|
| 53 | * [Stylus] - Expressive, dynamic, robust css
|
| 54 |
|
| 55 | [//]: # (These are reference links used in the body of this note and get stripped out when the markdown processor does its job. There is no need to format nicely because it shouldn't be seen. Thanks SO - http://stackoverflow.com/questions/4823468/store-comments-in-markdown-syntax)
|
| 56 |
|
| 57 |
|
| 58 | [dill]: <https://github.com/joemccann/dillinger>
|
| 59 | [git-repo-url]: <https://github.com/joemccann/dillinger.git>
|
| 60 | [john gruber]: <http://daringfireball.net>
|
| 61 | [df1]: <http://daringfireball.net/projects/markdown/>
|
| 62 | [markdown-it]: <https://github.com/markdown-it/markdown-it>
|
| 63 | [Ace Editor]: <http://ace.ajax.org>
|
| 64 | [node.js]: <http://nodejs.org>
|
| 65 | [Twitter Bootstrap]: <http://twitter.github.com/bootstrap/>
|
| 66 | [jQuery]: <http://jquery.com>
|
| 67 | [@tjholowaychuk]: <http://twitter.com/tjholowaychuk>
|
| 68 | [express]: <http://expressjs.com>
|
| 69 | [AngularJS]: <http://angularjs.org>
|
| 70 | [Gulp]: <http://gulpjs.com>
|
| 71 | [Webpack]: <https://webpack.github.io/>
|
| 72 | [Pug]: <https://pugjs.org/api/getting-started.html>
|
| 73 | [Stylus]: <http://stylus-lang.com/>
|
| 74 |
|