Webapp Boilerplate

Installation

Assuming you have git and node installed and you are starting a project from scratch, run:

• git clone --depth 1 https://github.com/iclanzan/webapp-boilerplate.git my-app
• cd my-app
• npm run setup

Local Development

Executing gulp watch will trigger a dev build which does the following:

1. Lints your scripts, stylesheets and html, and checks the coding style.
2. Spawns a webserver and opens the app in the default browser.
3. Compiles scss to css and automatically adds vendor prefixes.
4. Precompiles html (underscore) templates.
5. Automatically injects scripts and stylesheets (including bower installed dependencies) into index.html.
6. Watches project files and when changes occur it rebuilds the app and refreshes the browser.

Production

Running gulp with no arguments will trigger a production build into the output folder. The app can also be packaged in a zip file under the archives folder if gulp zip is used instead.

In addition to the development tasks listed above, a production build:

1. Concatenates scripts.
2. Minifies scripts, stylesheets, html and svg
3. Inlines scripts and stylesheets.
4. Optimizes images (png, jpg and gif)

When preparing for a new release run gulp bump, gulp bump-minor or gulp bump-major before triggering a build, to bump the patch, minor or major version respectively.

File Structure

This is a simplified example file structure to give an overview of where things reside.

.
├─ app
│  ├─ components
│  │  ├─ sidebar
│  │  │  ├─ sidebar.html
│  │  │  └─ _sidebar.scss
│  │  └─ modal
│  │     ├─ modal.html
│  │     ├─ modal.js
│  │     └─ _modal.scss
│  ├─ styles
│  │  ├─ main.scss
│  │  └─ _util.scss
│  ├─ scripts
│  │  ├─ definitions.js
│  │  └─ engine.js
│  ├─ assets
│  │  ├─ favicon.ico
│  │  └─ robots.txt
│  ├─ index.html
│  └─ app.js
├─ output
├─ archives
├─ gulpfile.js
├─ bower.js
└─ package.json