Gulp + Sass + LiveReload

Goals

To have a gulp workflow that with a single process,

watches for any sass changes, then compiles sass source into css
watches for any changes in the public directory, triggers live-reload
serves your static content in public/

Steps to achieve goals

make sure you have all required dependencies

If you have not have npm, gulp, or bower, you need to install them.

to install npm
brew install npm

to install gulp
npm install -g gulp

setup gulp + sass + livereload

initialize your project with a package.json file
```
npm init
```
setup your .gitignore file to ignore node_modules
```
echo "node_modules" >> .gitignore
```
add and commit your 2 new files to be tracked in git
install and save required dependencies using npm install -D [node_module name]
1. gulp
2. gulp-sass
3. gulp-connect
setup sass source directory mkdir sass/
setup sass source file touch sass/styles.scss
setup sass compiled output directory mkdir -p public/css
setup root html5 template file touch public/index.html
generate a base html5 template in public/index.html
include a link to css/styles.css
include an h1 element in the body with the content of Hello Gulp, Sass, and Livereload
setup a Gulpfile touch gulpfile.js
setup the Gulpfile tasks: Contents of gulpfile.js
test gulp task
1. write a 'hello world' of sass, subl sass/styles.scss
```
$dark-color : #333333;

body {
  background: $dark-color;
}
```
1. run gulp in your terminal
2. check output, ls public/css (should say styles.css)
3. inspect output, cat public/css/styles.css ( should be proper css )
test livereload
1. open a browser open localhost:8080
2. you should see a dark grey background and your single black h1 text
3. while you terminal, browser, and sublime text are all visible, add the following to your styles.scss
```
h1 {
	color: #F1F1F1;
}
```
1. note livereload will only track files that it sees when you first start the gulp task. including the initial generated css files, after the first time you compile, you'll have to restart gulp!
2. once you save this file, your browser should automatically refresh, and your h1 element should be white.
once gulp sass and livereload are wired up correctly, commit your new files
make sure to keep your "gulp" terminal running and visible, if your sass source is invalid, it will crash the watching gulp process, and you will want to see the error message that will output in that terminal. Then you can restart your gulp watcher after fixing your errors.
After adding new files to your public/ directory (like images or javascript), you may need to kill then restart your gulp task

viewport

In order for the webpage to render and scale properly on mobile devices, add this meta tag to your public/index.html file in the the <head> element

 <meta name="viewport" content="width=device-width, initial-scale=1.0" />