Short link to this gist: http://tinyurl.com/browsersync-via-foreman
The "Browser Sync Simple" section is probably what you want.
If you need something more advanced than that, then the "Browser Sync with Foreman" would help.
you only have to do this once
npm install -g browser-sync
change directory to the folder with your files (probably not literally named
folder-with-html-stuff-in-it, put your own name in)
In OS X, you can type
cd and then drag a folder in from finder, and it'll paste the full location path in for you
To make sure you're in the right folder, you can do
present working directory command in terminal:
Once you're in the right folder in terminal, start browser-sync.
browser-sync start . -s --files "*.html, *.css"
this command will:
cssfile is changed, it will reload the page.
These were the important commands we ran:
npm install -g browser-sync cd ~/folder-with-html-stuff-in-it browser-sync start . -s --files "*.html, *.css"
nf) - helps you run multiple commands at once. Its name in node is
nf= node-foreman. (it was originally a Ruby gem).
browser-sync. They work together nicely.
~/Procfile with these contents:
http: python -m SimpleHTTPServer 8000 browser-sync: browser-sync start --proxy="localhost:8000" --files="*.html, *.css"
Install Node if you haven't already
Run these in Terminal:
npm install -g browser-sync npm install -g foreman
command nf not found: After doing
npm installyou must close the current terminal window and open a new one (or reload the terminal). This is so the command
nfcan be used. If you skip this, it will say
command nf not found.
Run these in Terminal:
cd ~/folder-with-some-html nf start -j ~/Procfile
You can also alias this command to something memorable like
bs (for browser sync lol) or
http (as in - put this on a local http server for me real quick). This is done in your dotfile (whichever one you have).
Put this line in your dotfile
alias bs="nf start -j ~/Procfile"
command bs not found: After editing your dotfile, you must close the current terminal window and open a new one (or reload the terminal). This is so the command
bscan be used. If you skip this, it will say
command bs not found.
If you want to use scss you could try:
npm install -g node-sass
And add a line to your
node-sass: node-sass -w scss/ -o css/