ptim/readme.md

## readme.md

      
    Raw
  

              readme.md
            
          
    This handy 'alias' is actually a bash function allowing you to run bs from the directory you want to serve, giving you a dev server, with live reload, directory indexes, and the goodness of sync'd scrolling across multiple devices!
It prints out the command that's run and a link to the docs so that I don't completely forget what I'm actually doing!
bs() {
    echo
    echo "browser-sync start --server --directory --files \"**\""
    echo "http://www.browsersync.io/docs/command-line/"
    echo
    browser-sync start --server --directory --files "**"
}

The flags


start (yup!)
server Run a Local server (uses your cwd as the web root)
--directory Show a directory listing for the server
--files "**" watch all files, regardless of depth, and refresh on change

http://www.browsersync.io/docs/command-line/
Installing

You'll need browsersync installed globally:
npm install -g browser-sync

Paste the function into ~/.bash_profile (OSX) or the appropriate profile file, then open a new terminal tab to source (refresh) the profile.
Gotchas


Browser Sync injects its snippet into the <body> tag, so reload won't work if your page doesn't have a body.


Browser Sync will only serve files from directories below the one where it's run, so in the following scenario, if I run bs from mySketch, index.html and css/* will be served, but browser-sync won't be able to find bower_components/
  bower_components/
      d3/
  mySketch/
      css/
      index.html


You may want to adjust the --files "**" pattern to be more stringent if you've got myriad files and you're noticing performance issues.


## thumbnail.png

      
    Raw
  

              thumbnail.png