install npm modules from package.json by running the command:
npm install
Grunt is used to compile sass file.
In Gruntfile.js the options of compass task will also generate a source map file for the compiled sass.
Start grunt watch task to compile sass file every time it changes:
grunt watch
Bower is to illustrate the installation of Bootstrap 3 in a specific folder set in .bowerrc file.
Run bower whith the command:
bower install
LiveReload server watchs public folder for changes so the browser can refresh the page.
Install node-livereload globally by running the command:
npm install -g livereload
Run livereload server:
node server.js
In case the port 35729 is not available to use you'll see the error:
events.js:72
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSEThe page in public/index.html file listen to the server via the tag:
<script src="http://localhost:35729/livereload.js"></script>The browsers I tested are Firefox 35, Chrome 40 and Opera 29.
By inspecting the page you will see to css rule source file is style.scss,
by clicking on the file name you'll be able to edit it.
After saving the file grunt will execute watch task to regenerate the css files and livereload server will notify the browser about this changes and reload the css or refresh the entire page.
