Grunt Livereload with built-in Static Server

One of the coolest Grunt features is that it enables you as a developer to have configurable LiveReload functionality, which is to be frank is quite addictive and eases your development process.

The question I am trying to answer in this post is: What is the most minimal configuration needed to get the Grunt LiveReload to work.


You will need two of the Grunt plugins which are not part of the Grunt core (in Grunt terminology they are prefixed with contrib:

  1. grunt-contrib-watch: This plugin will perform a process of watching over your changes in your code. You can configure this to trigger other Grunt tasks.

  2. grunt-contrib-connect which starts a static server in a browser and serves your application.

Here's how your settings should look like:

watch: {
    options: {
        livereload: true,
    scripts: {
        files: 'scripts/**/*.js',
        tasks: ['jshint'],


What is important to note for watch task is that you need to include the livereload: true at top level of your watch config. Here, the watch:scripts runs the task tracing changes on Javascript files inside the scripts folder. The tasks array is optional and it ensures that jshint is applied for each change before the reload via grunt-contrib-jshint.

connect: {
    server: {
        options: {
            port: 9001,
            base: '.',
            open: true,
            livereload: true

For the connect task, you only need to setup options. Make sure the port you set is not binded to any process already on your machine (On Unix, run sudo lsof -i :[port-number] to check if it the port is binded or not). Also, make sure livereload: true exists. Setting your base directory to the current directory (.) makes sense if your Gruntfile.js and your HTML view page (like index.html) are in the application base directory. Also, Having the open: true is optional and is efficient because it opens your default browser automatically once you run your grunt code.


  • Make sure to load all grunt tasks:
/* ONLY IF you added jshint */
  • Register your task:
grunt.registerTask('dev', ['connect:server', 'watch:scripts']);

and ... you are done! 😀 😀 😀

The Rstats tag of this blog is added to R Bloggers