Live reload browser page. Grunt and Vagrant

Question

sorry for the mistakes I've made, I'm not Englishman.

So.. First, I have Vagrant machine which is my web server with installed Yii, Ngnix, PHP etc. The vm is configured as follows:

private_network, 192.168.10.10
forwarded_port, guest: 80, host: 8080
synced_folder "www", "/srv/www", :nfs => true # !important

Second, I have Grunt which is installed on my local machine and do some tasks(watches *.scss files and converts them to css) within web root which is synced with Vagrant through nfs daemon.

I successfully do my tasks and connect to my web root through browser (localhost:8080) and everything works ok. However, I don't understand how can I implement simple reload browser page when Grunt watches my scss files and finishes to convert them into a single css file.

Could anybody give me some thoughts by simple English?

Take a look at this don't know if it's the same thing but http://stackoverflow.com/questions/19382708/how-to-get-grunt-watch-to-live-reload-html-changes-under-different-build-tasks?rq=1 — Jompper, Jan 16 '14 at 14:55

score 1 · Accepted Answer · answered Jan 16 '14 at 18:41

1

You'll want to add a browser plugin to your browser and then have watch notify it. More info here at the bottom: http://24ways.org/2013/grunt-is-not-weird-and-hard/

answered Jan 16 '14 at 18:41

acorncom

5,975
1
19
31

I've tried this (livereload option with grunt-contrib-watch), but unfortunately it doesn't work( Nonetheless big thank you! good article! – Timur Fayzrakhmanov Jan 16 '14 at 20:41
@TimurFayzrakhmanov a guess on why it might not be working. Might your firewalls (in on your main machine or out on your vagrant machine) be blocking the communication of the watch notification? – acorncom Jan 17 '14 at 01:01
1

@TimurFayzrakhmanov Yep, that might be the issue. http://feedback.livereload.com/knowledgebase/articles/86280-if-you-edit-files-directly-on-your-server http://stackoverflow.com/questions/19268136/grunt-watch-livereload-fatal-error-port-35279-is-already-in-use-by-another-proc – acorncom Jan 17 '14 at 01:04

score 0 · Answer 2 · answered Jan 17 '14 at 11:06

I solve the problem by just restarting browser! This is little instruction:

Gruntfile:

watch: {
    scss: {
        files: '<%= path.webapp %>/**/*.scss',
        tasks: ['sass'],
        options: {
            livereload: true, //! important
        },
    },
}

Add livereload plugin to the chrome. After CLOSE THE BROWSER!
Start the task in command line: grunt watch
Start the browser. And click to the livereload circle button at the top of the window.
Voila! It works.

IMPORTANT: there is no reason to worry about the port and address of your 'remote' server, livereload magically detect where need to restart the page. Is works for me as localhost:8080/webapp.com and 192.168.10.10/webapp.com identically

Live reload browser page. Grunt and Vagrant

2 Answers2