title: Possible to have grunt compile less and live reload without a full page reload?
body: <p>I have an Angular JS project with LESS and am using grunt to compile and display my page, via grunt serve.  However, after every save/compile of a LESS file, the page reloads with the changes.  If I had change the state of objects on my page, and made a LESS edit, the page reload re-sets the page state and I need to make all my changes again to see if my CSS fix was sufficient.</p>
  
  <p>Is there a way to configure this where the LESS file compiles, the CSS is reloaded without loading the entire HTML page?</p>
  
  <p>here is the connect section of my Grunt.js:</p>
  
  <pre><code>connect: {
    options: {
      port: 9000,
      // Change this to '0.0.0.0' to access the server from outside.
      //hostname: 'localhost',
      hostname: '0.0.0.0',
      livereload: 35729
    },
    livereload: {
      options: {
        open: true,
        base: [
          '.tmp',
          '&lt;%= yeoman.app %&gt;'
        ]
      }
    },
    test: {
      options: {
        port: 9001,
        base: [
          '.tmp',
          'test',
          '&lt;%= yeoman.app %&gt;'
        ]
      }
    },
    dist: {
      options: {
        base: '&lt;%= yeoman.dist %&gt;'
      }
    }
  },
  </code></pre>
  
  <p>and the LESS part:</p>
  
  <pre><code>    //LESS
  less: {
    theme: {
      options: {
        sourceMap: true,
        sourceMapFilename: '.tmp/dist/css/theme.css.map',
        sourceMapURL: 'theme.css.map',
        outputSourceFiles: true
      },
      files: [{
        ".tmp/dist/css/theme.css": "&lt;%= yeoman.less %&gt;/theme.less"
      }]
    },
    preview: {
      options: {
        sourceMap: true,
        sourceMapFilename: '.tmp/live_preview/styles/main.css.map',
        sourceMapURL: 'main.css.map',
        outputSourceFiles: true
      },
      files: [{
        ".tmp/live_preview/styles/main.css": "&lt;%= yeoman.preview %&gt;/less/main.less"
      }]
    },
    distTheme: {
      options: {
        compress: true,
        yuicompress: true,
        optimization: 2,
        sourceMap: true,
        sourceMapFilename: '&lt;%= yeoman.dist %&gt;/dist/css/theme.css.map',
        sourceMapURL: 'theme.css.map',
        outputSourceFiles: true
      },
      files: [{
        "&lt;%= yeoman.dist %&gt;/dist/css/theme.css": "&lt;%= yeoman.less %&gt;/theme.less"
      }]
    }
  },
  </code></pre>