Configuring Livereload for a grunt project

Question

JavaScript

There was a question on the Watch task. I want that when the dev grant task is launched, the watcher tracks changes in the sources, automatically compiles them into the build folder and reloads the page in the browser. However, it turns out that scss is compiled into some kind of temporary file, and css in the build folder is not tracked, what am I doing wrong?
Here is the Gruntfile code:

module.exports = function( grunt ) {
  grunt.initConfig({
    concat: {
      options: {
        process: function(src, filepath) {
          return '\n//#### ' + filepath + '\n\n' + src;
        }
      },
      dist: {
        src: [	"source/js/jquery-1.8.2.min.js",
        
            // Put dependent files here
        
            "source/js/script.js"],
        dest: 'build/js/script.js'
      }
    },
    sass: {
      dist: {
        options: {
          style: 'compressed'
        },
        files: {
          'build/css/styles.css':'**/*.scss'
        }
      }
    },
    jade: {
      compile: {
        options: {
          pretty: true
        },
        files: [{
          cwd: "source",
          src: ["*.jade"],
          dest: "build",
          expand: true,
          ext: ".html",
        }]
      }
    },
    uglify: {
      dist: {
        files: {
          "build/js/script.min.js" : "build/js/script.js"
        }
      }
    },
    imagemin: {
      options: {
        cache: false
      },
      dist: {
        files: [{
          expand: true,
          cwd: 'source/img',
          src: ['**/*.{png,jpg,gif}'],
          dest: 'build/img/'
        }]
      }
    },
    watch: {
            livereload: {
                options: {
                    livereload: true
                },
                files: ['build/**/*']
            },
            src : {
                files: ['source/**/*'],
                task: ['default']
            }
    },
    connect: {
      server: {
        options: {
          port: 3000,
                    livereload: 35729,
                    hostname: 'localhost',
                    base: ['build']
        },
                livereload: {
                    options: {
                        open:true,
                        base: ['build']
                    }
                }
      }
    }
  });
  
  require('load-grunt-tasks')(grunt);
  
  grunt.registerTask('default', ['concat','sass','jade','uglify','imagemin']);
  grunt.registerTask('dev',['connect','concat','sass','jade','uglify','imagemin','watch']);
}

Answer 1

You all do this, but the watch task does a lot of extra work. In your case, it looks at the source directory and, when any file is changed, it launches all the tasks, and not just the one you need.
To begin with, you should split watch into targets for independent compilation of different file types. I also have doubts about the need to specify the files target for the livereload itself - remove it. Here is an example of my livereload task:

watch: {
  options: {
    livereload: true
  },
  gruntfile: {
    files: ['Gruntfile.js'],
    tasks: ['build:dev']
  },
  js: {
    files: '<%= path.assets %>/javascripts/{,**/}*.js',
    tasks: 'concat'
  },
  compass: {
    files: '<%= path.assets %>/stylesheets/{,**/}*.{scss,sass}',
    tasks: ['compass:dev', 'autoprefixer']
  },
  jade: {
    files: '<%= path.assets %>/views/{,**/}*.jade',
    tasks: ['jade:dev']
  }
}

Also don't forget to paste the script for livereload in your html:

<script src="//localhost:35729/livereload.js"></script>