Installation Guide
Ollie edited this page Apr 27, 2016
·
9 revisions
- nodejs & npm (
sudo apt-get install nodejs npm) - bower (
sudo npm install -g bower)
Ensure that bootstrap, font-awesome and other project-specific front-end dependencies are installed:
bower install
Install the recommended gulp tasks:
npm install
Note: If you are in a virtualised environment that doesn't support symlinks add:
--no-bin-link
To the end of the above command.
-
gulp watch- Bootlint files, Compiles LESS or JS lint (And minify!) on file changes -
gulp less- Compiles LESS files -
gulp bootlint- Run Bootlint on HTML/PHP files -
gulp jshint- Run jshint on JS files -
gulp js-build- Build JavaScript -
gulp images- Optimise images -
gulp js-build-dev- Build JavaScript but keep the code minified (For debugging purposes during development)
Setup default file structure:
layout/
layout_inc/head-script.php
layout_inc/header.php
layout_inc/nav.php
layout_inc/footer.php
layout_inc/footer-script.php
less/
public/css/
public/js/
js/
blank.php
index.php
README.md
styletile.php
styleguide.php
Setup blank.php page template:
<!DOCTYPE html>
<html lang="en">
<head>
<?php require($_SERVER['DOCUMENT_ROOT'].'/layout_inc/head-script.php'); ?>
<title></title>
</head>
<body>
<?php require($_SERVER['DOCUMENT_ROOT'].'/layout_inc/header.php'); ?>
<?php require($_SERVER['DOCUMENT_ROOT'].'/layout_inc/footer.php'); ?>
</body>
</html>
Ensure there is a master, testing & dev branch setup in the repository.
git checkout -b <BRANCH NAME>
For Font Awesome integration ensure the following line is added to /less/variables.less for font dependency. Path needs to be relative to compiled stylesheet.
//** fonts path for font awesome
@fa-font-path: "../../bower_components/font-awesome/fonts";
Once initial project work as been setup then ensure the README.md is setup with the following code blocks filled out:
# <Project Name>
# Installation
## Gulp Tasks
`npm install `
## Bower Packages
`bower install`