- Open
CMD
orTerminal
, point the path to your designed folder. - In the same CMD or , run
cd gulp-fe-dev
- Next, run
npm i
(i
stands forinstall
)
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 - it will compile CSS, and Refresh HTML too.
gulp
- Compiles the development files and generate the production ready files.gulp styleguide
- Generate the styleguides with styleguide folder on root path.gulp webstandards
- Validates whether your HTML/CSS/JS is up-to-date or not and or according to Web Standards.
Production Files:-
+-- dist
| +-- images
| +-- scripts
| | +-- main.min.js
| +-- css
| | +-- styles.min.css
| +-- index.html
Development Files:-
+-- dev
| +-- fonts
| +-- images
| +-- includes
| | +-- aside.html
| | +-- header.html
| | +-- footer.html
| +-- scripts
| | +-- vendors
| | | +-- Dependencies 1
| | | +-- Dependencies 2
| | +-- scripts.js
| +-- scss
| | +-- base
| | | +-- _branding.scss
| | | +-- _typo.scss
| | | +-- _units.scss
| | | +-- _vars.scss
| | +-- components
| | | +-- _button.scss
| | | +-- _form.scss
| | +-- layout
| | | +-- _header.scss
| | | +-- _nav.scss
| | | +-- _footer.scss
| | | +-- _page.scss
| | +-- modules
| | | +-- _modules-name.scss
| | +-- vendors
| | | +-- _vendors 1.scss
| | | +-- _vendors 1.scss
| | +-- styles.scss
| +-- index.html
- Autoprefixer
- BEM
- Bootstrap V4
- BrowserSync
- Concat
- File-include
- Gulp
- Htmlmin
- Imagemin
- Jshint
- Plumber
- Rename
- Sass
- SMACSS
- Sourcemaps
- Strip comments
- Sc5 styleguide
- Uglify
- Util
- Webstandards
Iām Sanjay Shrestha from Kathmandu, Nepal. Iām a Certified Usability Analyst, UX/UI Expert and UI Developer. I have more than 8 years of experience in the field and got good grasp on User Centric Design Process, Software Development Cycle and AGILE Methodology. I have a vast experience designing UI backed with science and data.
Name | Sanjay Shrestha |
---|---|
[email protected] | |
http://facebook.com/dziner.sanjay | |
http://linkedin.com/in/shresthasans | |
http://twitter.com/shresthasans | |
Skype | sanzaysan |
Behance | http://behance.net/shresthasans |
Dribbble | http://dribbble.com/shresthasans |