shresthasans/pv-styleguide

Frontend UI Development with Gulp and living Styleguide (SC5)

---

Getting Started

1. Open CMD or Terminal, point the path to your designed folder.
2. In the same CMD or , run cd pv-styleguide
3. Next, run npm i (i stands for install)

Now, run gulp from same CMD window. It will open the project server:

• Project - http://localhost:3000/
• Styleguide - http://localhost:3001/

Continue working, as soon as you save your updates, It will compare the latest changes, compiles and auto injects the updated HTML, CSS and JavaScripts.

Gulp Tasks

• gulp - Compiles the development files and generate the production ready files.
• gulp styleguide - Generate the styleguides with styleguide folder on root path.
• gulp webstandards - Checks whether the Code(HTML, CSS and JavaScript/jQuery) meets current web standards.

File Structure

Production Files:-

	+-- dist
	|   +-- images
	|   +-- fonts
	|   +-- scripts
	|	|   +-- main.min.js
	|   +-- css
	|	|   +-- styles.min.css 
	|   +-- index.html

Development Files:-

	+-- dev
	|   +-- fonts
	|   +-- images
	|   +-- scripts
	|	|   +-- vendors
	|	|	|   +-- Dependencies 1
	|	|	|   +-- Dependencies 2
	|	|   +-- scripts.js
	|	|	|   +-- Scriptfile 1
	|	|	|   +-- Scriptfile 2
	|   +-- scss
	|	|   +-- base
	|	|	|   +-- _branding.scss
	|	|	|   +-- _typo.scss
	|	|	|   +-- _units.scss
	|	|	|   +-- _vars.scss
	|	|   +-- components
	|	|	|   +-- _button.scss
	|	|	|   +-- _form.scss
	|	|	|   +-- modal.scss
	|	|	|   +-- _notification.scss
	|	|   +-- layout
	|	|	|   +-- _header.scss
	|	|	|   +-- _nav.scss
	|	|	|   +-- _footer.scss
	|	|	|   +-- _page.scss
	|	|   +-- modules
	|	|	|   +-- _modules-name.scss
	|	|   +-- vendors
	|	|	|   +-- _vendors 1.scss
	|	|	|   +-- _vendors 1.scss
	|	|   +-- styles.scss
	|   +-- includes
	|	|	|   +-- header.html
	|	|	|   +-- aside.html
	|	|	|   +-- footer.html
	|   +-- index.html

Note: -

Due to purpose based styleguide generation (Locally hosted and Server side hosting ready), An object of styleguide:generate on gulpfile needs to updated on conditional based.

• server: true - Commenting it out will generate the server hosting ready files.
• appRoot - Commenting it out will generate locally hosted styleguide, injecting latest files on client server.