Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Live Reload with Grunt

DZone's Guide to

Live Reload with Grunt

· Performance Zone
Free Resource

Discover 50 of the latest mobile performance statistics with the Ultimate Guide to Digital Experience Monitoring, brought to you in partnership with Catchpoint.

Sometime back I had published an entry on Node Packing with grunt but live reload has been so fascinating to most of the webdevs, it would be worth to make your own tiny server that reloads files as and when it gets edited.

Check out the video DEMO and then read the steps below:

  • Install grunt and grunt-reload : npm install -g grunt grunt-reload

The grunt.js:

module.exports = function (grunt) {
    'use strict';
 
    //initialize grunt with config
    grunt.initConfig({
        //configure grunt-reload
        reload: {
            port: 1337, // LR Port
            liveReload: {},
            proxy: {
                host: 'localhost'
            }
        },
        trigger: {
            watchFile: 'index.html'
        },
        server: {
            port: 8000,
            base: '/labs'
        },
        watch: {
            files: ['/labs/*.html'],
            tasks: 'reload'
        }
    });
 
    //Load the extra tasks from our npm modules
    grunt.loadNpmTasks('grunt-reload');
    grunt.registerTask("run", "server reload watch");
 
};

To start the task just say : $grunt run and have fun!

P.S : grunt-contrib-reload is anyway better, but this is just the raw way of doing it.

Is your APM strategy broken? This ebook explores the latest in Gartner research to help you learn how to close the end-user experience gap in APM, brought to you in partnership with Catchpoint.

Topics:

Published at DZone with permission of Hemanth HM, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}