Grunt.js only watches on change of root js file, not working on change of css or jade files

I am using grunt.js - to watch the changes on my project and reload the browser. In which it's only considering the js file change on root folder. In case if i change on stylesheet/styles.css - not refreshing the browser, same thing happening with jade filest too..

How can i make grunt to refresh the page on change of jade file or any other noted files?

here is my grunt.js:

 module.exports = function(grunt) {
     // Project configuration.
     grunt.initConfig({
         watch: {
             all: {
                 options: {
                     livereload: true
                 },
                 files : ['*.js','puplic/stylesheet/*.css', '*.html', '/views/*.jade']
//only on js changes refresh the page!
             }
         }

     });
     // Each plugin must be loaded following this pattern
     grunt.loadNpmTasks('grunt-contrib-watch');
     grunt.registerTask('default', ['watch']);

 }

here is my jade file:

doctype html
html
    head
        link(rel='stylesheet', href='/stylesheet/bootstrap.css')
        link(rel='stylesheet', href='/stylesheet/styles.css')
        script(src="http://localhost:35729/livereload.js")
    body
        div.container
            h1 Welcome to Social!

Any one help me go sort this issue please?