Web Starter Kit with Gulp

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
7. Views
   1. Pug Structure
   2. Environment Variables

Dependencies

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

Build

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

Environments

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.

Development

Run: gulp build --env=dev

Stage

Run: gulp build --env=stage

Production

Run: gulp build --env=prod

back to top

Server

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

• Local - http://localhost:3000
• UI - Set to false by default

Options

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

back to top

Assets

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

Run: gulp assets

Data

Copy data files to ./build/data.

Run: gulp data

Fonts

Copy font files to ./build/fonts.

Run: gulp fonts

Images

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

Media

Copy media files to ./build/media.

Run: gulp media

Miscellaneous

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

Vendors

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

Scripts

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

Styles

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.

Views

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 https://pugjs.org/api/getting-started.html/.

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