kellishouts/LiveReload Notes.md

## LiveReload Notes.md

      
    Raw
  

              LiveReload Notes.md
            
          
    Starting up a project with /app/public for final output files AND using Foundation


In your project root

Copy over relevant assets into a ./Layouts directory.
Make this file to ignore installable components.

.gitignore
app/node_modules
app/public/bower_components


Install npm and express server

cd into /app:

$  npm install
press enter for everything
$  npm i -D connect-livereload gulp gulp-sass tiny-lr
$  npm i -S express


Copy a Gulpfile.js from previous project.

Make sure your paths are correct and pointing to public/:
.pipe(gulp.dest('./public/css'));

gulp.watch('./public/*.html', notifyLiveReload);

gulp.watch('./public/css/*.css', notifyLiveReload);

app.use(express.static(__dirname + '/public'));


Install bower

Create a .bowerrc file in your ./app directory. This tells bower to install bower_components in ./app/public instead of ./app.

Write the contents of .bowerrc:
{
   "directory": "public/bower_components"
}

Now you can initialize your bower conf

$ bower init
press enter for everything

This creates ./app/bower.json
Now install foundation

$ bower install foundation


Check project file structure

Make sure all the relevant directories and files are in /app/public
index.html

make a proper html5 index.html file

be sure to LINK to /css/styles.css (which doesn't exist yet)
/sass/styles.scss

make the sass directory and put a styles.scss file in it

write the content for /sass/styles.scss:
body{ background-color:red }

a blank file will break sass compiler
/css

make an empty css directory. The gulp task will compile your styles.scss into a styles.css file here.
/images

copy your image assets into here
/js

copy necessary js assets into here

Run your gulp server

Then in terminal, run:
$ gulp
An express webserver is running at http://localhost:4000
Open the url in your browser
in osx
$ open http://localhost:4000


Test LiveReload and Sass

Make sure the LiveReload icon is turned ON for the page.

this is off 

this is on 
Test your styles.scss.

Make sure your index.html is linking to
<link rel="stylesheet" href="/css/styles.css">

Open your styles.scss file and save it. You should see the gulp task running in terminal.
Chrome should update with the red background. You can also check if your css file compiled correctly by checking that the styles.css file contains the red background color.
Test complete.

Fix Links to Foundation

Fix your index file:

Add to <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="/bower_components/modernizr/modernizr.js"></script>

Add before </body>:
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/foundation/js/foundation.min.js"></script>
<script>
	$(document).foundation();
</script>

Copy the Foundation Settings File

Create directory /partials inside /sass

Create _settings.scss inside /partials

Copy /bower_components/foundation/scss/foundation/_settings.scss and paste into your /partials/_settings.scss
Fix the functions @import in the _settings.scss to be:
@import "../public/bower_components/foundation/scss/foundation/functions";

Import Foundation & Foundation Settings into styles.scss

At the top of your styles.scss, include:
@import "partials/settings";
@import "../public/bower_components/foundation/scss/foundation";

Test Foundation

Add some Foundation markup to your index.html. Save.

Re-save your styles.scss (it will recompile with the foundation styles)