Front End Template

A front-end project template based off of the workflow from the Sage WordPress starter theme and HTML5BP.

Features

• gulp build script that compiles both Less and Sass, checks for JavaScript errors, optimizes images, and concatenates and minifies files
• BrowserSync for keeping multiple browsers and devices synchronized while testing, along with injecting updated CSS and JS into your browser while you're developing
• Bower for front-end package management
• asset-builder for the JSON file based asset pipeline
• normalize.css for a good CSS reset

Install gulp and Bower

Building the project requires node.js. We recommend you update to the latest version of npm: npm install -g npm@latest.

From the command line:

1. Install gulp and Bower globally with npm install -g gulp bower
2. Navigate to the theme directory, then run npm install
3. Run bower install

You now have all the necessary dependencies to run the build process.

Available gulp commands

• gulp — Compile and optimize the files in your assets directory
• gulp watch — Compile assets when file changes are made
• gulp --production — Compile assets for production (no source maps). Keep in mind that if you run this, you'll need to update the filenames in index.html or wherever you have it yourself.

Using BrowserSync

It happens automatically as soon as you run gulp watch. Yay!

CSS Preprocessors

By default this repo uses Sass - but there is a Less branch availble for those who prefer Less. For those using Sass, please keep in mind the gulfile uses glup-sass - which uses libsass.