/full-frontal

A front-end boilerplate and build process.

Primary LanguageJavaScriptMIT LicenseMIT

Full Frontal

A boilerplate for the front-end, built based on projects I've built and large sections pinched from elsewhere - including, but not limited to:

Requirements

Prerequisite How to check How to install
Node.js 0.12.x node -v nodejs.org
gulp >= 3.8.10 gulp -v npm install -g gulp
Bower >= 1.3.12 bower -v npm install -g bower

Features

  • gulp build script that compiles both Sass and Less, 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
  • wiredep Automatically inject Sass and Less dependencies from Bower into the main stylesheet.
  • jshint-stylish Stylish reporter for JSHint. (Get told off when yo' JavaScript is sloppy!)
  • EditorConfig Maintain consistent coding styles between different editors and IDEs. (Enforce indent style, spaces or tabs etc.)

Installation

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).

Local Web Server

Need a local http server to try it out?

  1. Install once with npm install http-server -g
  2. Start with http-server

Using BrowserSync

To use BrowserSync during gulp watch you need to update devUrl at the bottom of assets/manifest.json to reflect your local development hostname.

For example, if your local development URL is http://project-name.dev you would update the file to read:

...
  "config": {
    "devUrl": "http://project-name.dev"
  }
...

The default is http://127.0.0.1:8080 which should work with the default http-server address.

Installing Dependencies with Bower

  1. bower install --save package-name or add it to bower.json.
  2. gulp

You're done! (Assuming the packages bower.json file is correctly set up). More info - Bower docs.

Contributing

Contributions are welcome from everyone. We have contributing guidelines to help you get started.