trigger changes in js, scss and html separately

[zigotica]

Hi,

Is there a way to trigger changes in js, scss and html separately? It would be useful to make a change in a Javascript file and make grunt lint and reload, whereas if I change a SCSS file I just want to convert to CSS and reload. That way reloads would perform faster.

Something like (following code will not work):

watchcss:{
  files:['sources/compass/*.scss'],
  tasks:'sass reload'
},
watchjs:{
  files:['sources/js/ours/*.js'],
  tasks:'lint concat min reload'
},
watchpage:{
  files:['index.html'],
  tasks:'reload'
}

// more stuff here

grunt.registerTask('default', 'server reload watchcss watchjs watchpage');

Thank you

[disusered]

Yes, it can be done. This is extracted from a current gruntfile I am using:

watch: {
  less: {
    files: ['www-root/styles/**/*.less'],
    tasks: 'less'
  },
  coffee: {
    files: ['www-root/coffee/main.coffee'],
    tasks: 'coffee'
  },
  haml: {
    files: ['templates/**/*.hamlc'],
    tasks: 'shell:haml_local'
  },
  img: {
    files: ['<config:image.files>'],
    tasks: 'shell:copy_images'
  },
  reload: {
    files: ['<config:reload.files>','<config:image.files>'],
    tasks: 'reload'
  }
}

[philfreo]

Correct me if I'm wrong, but it seems there's no way to get it to ONLY refresh the CSS (when *.less) files change. Even with @disusered gruntfile it still reloads the entire page, right? You'd want it to just re-apply the latest CSS, not re-load the HTML/JS/location.reload()

Something like http://aboutcode.net/vogue/ but built as a grunt plugin

EDIT: looks like this can be done in https://github.com/ericclemmons/grunt-livereload

[disusered]

Correct, this doesn't change the refresh settings, just reduces repeat/unneeded compiles and concats.