Skip to content
πŸš€ A workflow for front-end projects with gulp
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.

πŸš€ 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-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.


  • Make sure you have these installed
  • Clone this repository using git clone 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:

└── 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
You can’t perform that action at this time.