grunt-contrib-watch : { tinylr: "Welcome", version: "0.0.4" }

I'm trying to get grunt working, with grunt-contrib-watch and grunt-contrib-compass.

So far, my Gruntfile looks like this:

module.exports = function (grunt){

    grunt.initConfig({

    compass : {

        dist : {
        options : {
            debugInfo : 'true'          
        }

        }

    },

    watch : {       
        files : ['*.html', 'js/*', 'sass/*'],
        task : ['compass'],
        options : {
        livereload: true,
        port : 35729
        }       
    }

    });


    grunt.loadNpmTasks('grunt-contrib-watch') ;
    grunt.loadNpmTasks('grunt-contrib-compass') ;

    grunt.registerTask('default', ['watch'])

} ;

I'm using chromes live-reload extension.

If I then run 'grunt -v', I can see that grunt watches my html and my sass files as expected. My browser tab reloads automatically, as expected.

In a browser tab I go to this address:

http://localhost:35729

However, in my browser I only see this upon loading and reloading:

{
tinylr: "Welcome",
version: "0.0.4"
}

I don't see my index.html. Just the object.

What do I need to do in order to see my site?

http://localhost:35729 is the address of the live reload server, not your website. Your website still needs to be served from it's own address/port, such as http://localhost:8000. Either through the grunt-contrib-connect task, some other node.js server or some server that serves files apache/nginx.

http://localhost:35729 is only used to load the live reload script into your page: <script src="http://localhost:35729/livereload.js"></script> and then upon changes will use a web socket to trigger and update your page on your website.