The simplest way to have grunt run a server, watch all the files for changes, and livereload on change. Set up to compile SASS and livereload the css on changes.Using the package.json, all you need to do is npm install and then it should work.

Gruntfile.js

module.exports = function(grunt) {

    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-sass');

    // don't watch node_modules
    // used in watch files below
    var excludes = [
        '!**/node_modules/**'
    ];

    grunt.initConfig({
        
        // add excludes to the grunt object for access later
        excludes : excludes,

        connect: {
            server: {
                options: {
                    port: 9001,
                    // open a browser
                    open : true,
                    // inject livereload.js into the pages
                    livereload : true
                }
            }
        },
        sass: {
            compile: {
                options: {
                    // expanded for dev
                    style: 'expanded',
                    // compressed for prod
                    // style: 'compressed',
                    // if you're using compass
                    compass : true,
                    // line numbers of scss in the css for debugging
                    // lineNumbers : true,
                    // set up sourcemaps, requires SASS 3.3 and Compass 1.0alpha?
                    sourcemap : true
                },
                files: {
                    // list your css and corresponding scss pages here
                    // I usually just import all partials into style.scss
                    'style.css': 'style.scss'
                }
            }
        },
        watch : {
            options: {
                livereload: true
            },
            // make a subtask for each filetype to selectively run tasks and livereload
            html: {
                files: [
                    '**/*.html',
                    '<%= excludes %>'
                ],
            },
            js: {
                files: [
                    '**/*.js',
                    '<%= excludes %>'
                ],
                tasks: [],
            },
            // don't livereload sass because we livereload the css
            sass: {
                options: {
                    livereload: false
                },
                files: [
                    '**/*.scss',
                    '<%= excludes %>'
                ],
                // compile on save
                tasks: ['sass'],
            },
            css: {
                files: [
                    '**/*.css',
                    '<%= excludes %>'
                ],
                tasks: []
            }
        }

    });

    // Default task(s).
    grunt.registerTask('default', [
        'sass',
        'connect',
        'watch'
    ]);

};

package.json

{
    "name": "grunt-server",
    "version": "0.0.1",
    "devDependencies": {
        "grunt": "~0.4.2",
        "grunt-contrib-watch": "~0.5.3",
        "grunt-contrib-connect": "~0.5.0",
        "grunt-contrib-sass": "~0.5.1"
    }
}

Hello,

I'm glad this was helpful to you. It looks like it's been 6 years since I wrote this 😅 so, no I don't really have any ideas. Personally, I've been using webpack's dev server for the last few years. I have seen some file watching modules not work all the time in the last few years. Sometimes deleting node_modules and package-lock.json, then reinstalling can fix some dependency issues.

That's all I got 😄

Okay thank you, i have the same issue in a other project. For now i'll just remove the listen on css, and put it on the scss files, that does seems to work. And i'll have a look at webpack's dev server! Cheers!