Buy
now
Project structure
| Folder / File name | Description |
|---|---|
| JoinLesson | Folder contains all template source and production files. |
| JoinLesson / src |
This folder holds all template source files like .pug,
.scss, .js that are then processed (compiled / minified)
to dist folder.
|
| JoinLesson / dist |
Folder contains all template distribution files like
.html, .css, .js that have been processed (compiled /
minified) from src folder using Node.js and
Gulp.
|
| JoinLesson / dist / vendor |
This folder contains all vendor plugins'
.js / .css files.
|
| JoinLesson / package.json | File contains meta data about your app or module. Most importantly, it includes the list of dependencies to install from npm when running npm install. |
| JoinLesson / gulpfile.js | Configuration file for Gulp library. It contains all tasks you want to perform with Gulp. Learn more about it from Working with Gulp section or official Gulp documentation. |
| JoinLesson / src / js |
This folder contains main theme.js and
components subfolder with all modules.
theme.js is processed (compiled / minified)
into 2 files: dist/js/theme.js and
dist/js/theme.min.js. The latter is linked to
all .html documents.
|
| JoinLesson / src / scss |
This folder contains all project sass files
that are compiled and minified to styles in
dist/css/ folder.
|
| JoinLesson / src / templates |
This folder contains all pug files that are
compiled into HTML in dist,
dist/components and
dist/docs folders.
|
Note: if you do not use Pro Front-End setup with Node.js and Gulp and want directly edit html / css / js files you should be looking into dist folder.
Whether you work with Node.js and Gulp or not you can still take
advantage of preprocessors for HTML and CSS.
In this case you
might want to learn
how to use Pug and Sass.