Using Grunt for live reloading

So far you have configured Grunt to both compile and watch your LESS files. Now it is time to make it refresh your browser window when the watch plugin notices a change. To do so, perform the following steps:

  1. Open up Gruntfile and add the livereload option to the watch plugin configuration with the help of the following code:
    watch: {
  styles: {
    files: ["less/**/*.less"],
    tasks: ["less:app"],
    options: {
      livereload: true,
      spawn: false
    }
  }
}
  2. This option will tell the watch plugin to start a live-reload server on the default port (35729).

    Tip

    You can also start the live-reload server on a different port by giving the livereload option a numeric value instead, for example, livereload: 1337. This is useful if you want to run multiple live-reload servers on the same machine.

  3. Next, you need open up your index.html file and add the following script tag right before the closing body tag:
    <script src="http://localhost:35729/livereload.js"></script>
  4. This will connect your browser to your live-reload server and allow you to reload the page when you change a file that is watched.

    Tip

    There are also other options for setting up live reloading, such as using browser extensions and the Connect plugin. For more information, refer to the Live Reloading section in the Watch plugin documentation at https://github.com/gruntjs/grunt-contrib-watch.

Now restart Grunt, navigate to your project root with your browser, change any of your LESS files, and save it. When you do so, your browser should be automatically refreshed.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.142.173.238