LiveReload Chrome Extention unable to connect to Guard server on Ubuntu 13.04 64bit

Question

I have installed the necessary gems as follows :

        ~/Desktop/html5$ gem list

        bundle (0.0.1)
        bundler (1.3.5)
        coderay (1.0.9)
        em-websocket (0.5.0)
        eventmachine (1.0.3)
        ffi (1.8.1)
        formatador (0.2.4)
        guard (1.8.0)
        guard-livereload (1.4.0)
        guard-sass (1.2.0)

This is what my Guardfile looks like :

        ~/Desktop/html5$ more Guardfile 
        A sample Guardfile
        More info at https://github.com/guard/guard#readme

        guard 'livereload' do
            watch(%r{.+\.(css|js|html)$})
        end

This is what I get when I run : bundle exec guard

        ~/Desktop/html5$ bundle exec guard
        12:05:56 - INFO - Guard uses NotifySend to send notifications.
        12:05:56 - INFO - Guard uses TerminalTitle to send notifications.
        12:05:56 - INFO - LiveReload is waiting for a browser to connect.
        12:05:56 - INFO - Guard is now watching at '/home/praveen/Desktop/html5'
        [1] guard(main)> 

To make sure the Guard server is running , this is what i get when telneting

        :~/Desktop/html5$ telnet 127.0.0.1 35729
        Trying 127.0.0.1...
        Connected to 127.0.0.1.
        Escape character is '^]'.

When I make changes to the index.html in the monitored directory , this is what i get at the guard prompt

      13:36:20 - INFO - Browser connected.
      13:36:25 - INFO - Reloading browser: index.html
      13:36:34 - INFO - Reloading browser: index.html

[1] guard(main)>

I have installed the chrome live reload plugin and given it file reading permission but when I click it , it doesn't change and thus does not reload the code change to any html or css in the /home/praveen/Desktop/html5 , pls let me know what can be done.

Praveen

Answer 1

After Struggling for 2 days , this is the method that I figured to work without hassle on Ubuntu 13.04, it has thus made my workflow seamless :

Install LiveReload from Through Python and CD to the directory that needs to be watched for changes

        curl -O https://raw.github.com/pypa/pip/master/contrib/get-pip.py | python           
        pip install livereload
        sudo apt-get install python-pip
        pip install livereload
        cd FolderToBeMonitored/

Create a file called Guardfile with the following contents to monitor for all changes to html and css files

        Desktop/html5$ more Guardfile 
        #!/usr/bin/env python
        from livereload.task import Task

        Task.add('*.css')
        Task.add('*.html')
        Task.add('css/*.css')
        praveen@praveen-XPS-L412Z:~/Desktop/html5$ 

Once the above is done , start the LiveReload with the below command :

            livereload -b

Please note that liveReload uses 35729 as the default port but if it needs to be changed TO 1717 use

        livereload -p 1717 -b

The default html file will launch automatically in the default browser , no need to install any buggy chrome extensions . to launch a particular file , use appropriate URL of the below format

       http://127.0.0.1:35729/test.html

I prefer this way the Ruby gem installation followed by the chrome extension that needs to connect to the port method, I spent 2 days on this issue and it never worked until figuring out the above methodology that works without any chrome plugins.

Answer 2

I managed to make it working using this as guard file I have Ubuntu 13.04 raringtail

# This will concatenate the javascript files specified in :files to public/js/all.js
guard :concat, type: "js", files: %w(), input_dir: "public/js", output: "public/js/all"

guard :concat, type: "css", files: %w(), input_dir: "public/css", output: "public/css/all"

guard 'livereload' do
  watch(%r{/.+\.(css|html|js)$})

end

guard 'sass', :input => 'sass', :output => 'css'

The output is this in the terminal:

*dany@dany:/var/www/tucan$ guard 21:07:04 - INFO - Guard is using NotifySend to send notifications. 21:07:04 - INFO - Guard is using TerminalTitle to send notifications. 21:07:04 - INFO - LiveReload is waiting for a browser to connect. 21:07:04 - INFO - Guard is now watching at '/var/www/tucan' [1] guard(main)> 21:07:23 - INFO - Browser connected. 21:07:23 - INFO - Browser connected. *

Hope this helps someone