🚀 Frontier

A starter for front-end projects with gulp

This is a workflow for front-end and ui projects. Works done with this workflow is:

• Sass: Watch, compile, add source maps, autoprefix, minify, csscomb and rtl
• HTML: Use partials, conditions and loops using gulp-file-include
• JS: Concat, uglify and minify js files with seperation of vendor and libraries files.
• Images: Compression
• Fonts: Copy
• Build: Backup source, zip and clear dist

Packages used:

• gulp
• gulp-sass
• gulp-sourcemaps
• gulp-cssnano
• gulp-autoprefixer
• gulp-rename
• gulp-newer
• gulp-rimraf
• gulp-concat
• gulp-file-include
• gulp-uglify
• gulp-csscomb*

• gulp-csscomb has a config file that is placed in route folder called .csscomb.json. You can change it's configs using it's own documentations.

Install

• Make sure you have these installed
  • Node.js
  • npm
  • Git
• Clone this repository using git clone https://github.com/peyman3d/frontier.git FOLDERNAME
• CD to the folder cd FOLDERNAME
• Run npm install to install the node.js dependencies
• Run gulp to start gulp workflow watchers

Folder structure

I tried to make folder structure as simple as it can and it's like this:

project
└── src
    ├── fonts
    ├── html
    │   ├── elements // for elements like post-item.html
    │   ├── partials // for partials like header.html or sidebar.html
    ├── images
    ├── js
        ├── vendor // for external plugins like jquery
        ├── lib // for project js files
    └── sass // for sass files. you can set inner structure as you want