Starter Site Template

This is a base site template set up with specific modules one might want when starting a new project. Feel free to use this as an example and add / remove whatever you want.

What You Need

For this to work you will need to have the following tools installed.

• Node - recommend updating to the newest version
• Grunt (npm install -g grunt-cli)
• Bower (npm install -g bower)

Getting Started

Here's the quick explanation. Clone this project to your directory and run the following commands. Follow the links for further info.

1. npm install
2. bower install
3. grunt
4. grunt dev

Node Modules

npm install

Here's a list of the modules being installed, links to their repositories / sites for details and a quick note on how they're being used.

• assemble - For templating using Handelbars.js, Markdown, etc

• grunt-autoprefixer - No more worrying about CSS browser prefixes

• grunt-contrib-clean - Clean up package before compiling

• grunt-contrib-concat - Concat JS files to reduce http requests

• grunt-contrib-connect - Start local server for developement

• grunt-contrib-copy - Move necessary bower package files to src and move static assets to dist

• grunt-contrib-csslint - Lint CSS

• grunt-contrib-cssmin - Minify CSS

• grunt-contrib-imagemin - Optimize JPGs, GIFs and SVGs

• grunt-contrib-jshint - Lint JS

• grunt-contrib-sass - Using SASS preprocessing for CSS

• grunt-contrib-uglify - Minify JS

• grunt-contrib-watch - Watch files for changes while developing

• grunt-htmlhint - Lint HTML

• grunt-newer - Only recompile newer assets to save time when developing

• grunt-pngmin - Using to optimize PNGs instead of imagemin because pngquant has much better compression and still outputs a good quality image

• grunt-scss-lint - Lint SASS

Bower Components

bower install

Bower will install the below packages. Then you can use it to manage your other packages!

• jQuery 2.1 (no < IE 8 for us)
• Modernizr.js
• Normalize.css

Grunt

grunt

This will:

1. Clean the dist and any bower files already copied over to the project
2. Lint and compile your SASS, then prefix, lint and minify the CSS
3. JSHint your JS, concat dat, uglify it
4. Assemble your HTML, lint it
5. Minify your images
6. Copy over any docs and root files

Grunt Dev

grunt dev

This will:

1. Start a local server using Connect (set for port 8080)
2. Watch for any changes to your files
3. Recompile any files that change and run only the necessary tasks (CSS, JS, HTML, Images)
4. Live Reload the browser using the live reload browser extension

Author

Will Hutchinson (set this up while working at Infinity Interactive)