CODEWITHSUNDEEP
angularjsgruntjsgrunt-contrib-watch
Steve
Steve

Reputation: 14912

Possible to have grunt compile less and live reload without a full page reload?

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.

Is there a way to configure this where the LESS file compiles, the CSS is reloaded without loading the entire HTML page?

here is the connect section of my Grunt.js:

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',
        '<%= yeoman.app %>'
      ]
    }
  },
  test: {
    options: {
      port: 9001,
      base: [
        '.tmp',
        'test',
        '<%= yeoman.app %>'
      ]
    }
  },
  dist: {
    options: {
      base: '<%= yeoman.dist %>'
    }
  }
},

and the LESS part:

    //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": "<%= yeoman.less %>/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": "<%= yeoman.preview %>/less/main.less"
    }]
  },
  distTheme: {
    options: {
      compress: true,
      yuicompress: true,
      optimization: 2,
      sourceMap: true,
      sourceMapFilename: '<%= yeoman.dist %>/dist/css/theme.css.map',
      sourceMapURL: 'theme.css.map',
      outputSourceFiles: true
    },
    files: [{
      "<%= yeoman.dist %>/dist/css/theme.css": "<%= yeoman.less %>/theme.less"
    }]
  }
},

Upvotes: 3

Views: 1675

Answers (2)

Alexandre Bult&#233;
Alexandre Bult&#233;

Reputation: 1442

The trick is to trigger livereload only on the generated CSS, not on the less files or you'll get a page reload.

This watch configuration does the trick for me:

watch: {
  options: {
    livereload: true,
  },
  html: {
    files: ['app/index.html', 'app/views/*.html', 'app/views/*/*.html'],
  },
  js: {
    files: ['app/scripts/*.js', 'app/scripts/*/*.js']
  },
  less: {
    files: ['app/styles/less/*.less'],
    tasks: ['less'],
    options: {
      livereload: false
    }
  },
  css: {
    files: ['app/styles/*.css'],
  }
}

Upvotes: 4

Lajos Veres
Lajos Veres

Reputation: 13725

As far as I understand if watcher notifies a change it triggers to reload the related resources in the browser, but if there is not related resource, it trigger a full reload.

So if there are changes which aren't loaded in the browser, it triggers a full reload.

And the .less file isn't loaded in the browser only the generated css.

I think it should be enough to add something similar to your watcher config to disable watching for the .less file:

  base: [
    '.tmp',
    '<%= yeoman.app %>',
    '!...yourlessfile.less'
  ]

Upvotes: 0

Related Questions