Skip to content
This repository has been archived by the owner. It is now read-only.
Switch branches/tags

Latest commit


Git stats


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

Web Starter Kit with Gulp

Alt text

Web Starter Kit is an opinionated build automation for front-end web development based on Gulp, Node, NPM, Bower, Babel, Sass, and Pug.

Note: Web Starter Kit is simply a guideline and it doesn't solve everything. It is up to you to modify whatever necessary to achieve your project goals.

Table of Contents

  1. Dependencies
  2. Build
    1. Environments
      1. Development
      2. Stage
      3. Production
  3. Server
    1. Local URLs
    2. Options
  4. Assets
    1. Data
    2. Fonts
    3. Images
    4. Media
    5. Miscellaneous
    6. Vendors
  5. Scripts
  6. Styles
    1. BEM Structure
    1. Pug Structure
    2. Environment Variables


Run: npm cache clear && npm i && bower cache clean && bower install

Note: Before you can install Web Start Kit dependencies, you will need to install Gulp, Node, NPM, and Bower.

back to top


Generate a fresh build of your project. Task will run several individual tasks on files within ./src and then output them to ./build.

Run: gulp build


You can specify which environment you want to build. If you do not pass env as an option, then dev will be used by default.


Run: gulp build --env=dev


Run: gulp build --env=stage


Run: gulp build --env=prod

back to top


Start a local dev server. Additionally, gulp will watch for any changes to files and reload browser while server is running.

Run: gulp server

Local URLs


You can modify port, proxy, and many other settings in ./gulpfile.babel.js. For more information about BrowserSync go to

back to top


Run several individual tasks to copy static files from ./src to ./build.

Run: gulp assets


Copy data files to ./build/data.

Run: gulp data


Copy font files to ./build/fonts.

Run: gulp fonts


Copy images to ./build/images. As a personal preference Web Starter Kit doesn't use automated image optimization. It is strongly recommended to use services like TinyPNG and TinyJPG to optimize images manually.

Run: gulp images


Copy media files to ./build/media.

Run: gulp media


Copy miscellaneous files, such as .htaccess or robots.txt, to the root of ./build. If your project require custom settings per environment, then you can save individual files into appropriate directory within ./src/misc.

Run: gulp misc


Bundle vendor files to ./build/vendors. You can install new client-side vendors using Bower, then reference appropriate files in ./src/vendors/bundle.js and ./src/vendors/bundle.min.js. Web Starter Kit comes with jQuery example.

Run: gulp vendors

back to top


Run a series of sub-tasks to generate final JavaScript files. See ./gulpfile.babel.js for reference.

Note: Each file on the root of ./src/scripts will be compiled to its own file in ./build/scripts. Each file can have own includes, just like Sass with @import functionality. See ./src/scripts/main.js as an example.

Run: gulp scripts

back to top


Run a series of sub-tasks to generate final CSS files. See ./gulpfile.babel.js for reference.

Note: Each file on the root of ./src/styles will be compiled to its own file in ./build/styles.

Run: gulp styles

BEM Structure

Web Starter Kit follows a strict naming convention using BEM methodology.

Directory structure and selector names are divided into namespaces based on More Transparent UI Code with Namespaces article by Harry Roberts.


Run a series of sub-tasks to generate final HTML files. See ./gulpfile.babel.js for reference.

Run: gulp views

Pug Structure

Web Starter Kit follows an opinionated directory structure. To learn more about Pug go to

Environment Variables

Every Pug file has access to global env variable. You can use it to conditionally load unminified/minified assets. See ./src/views/includes/head.pug as an example.

back to top