Grunt Livereload on a localhost started with WAMP/XAMPP/UniServerZ

Question

I am trying to take my front-end workflow a step higher with Grunt tasks.

I have set up a couple of tasks in my Gruntfile.js. For now there are only grunt-contrib-sass and grunt-contrib-watch so that .css files are automatically recompiled whenever I make a change to my .sass files.

What I want to achieve is the following:

I want to add a task that would listen to my local server that was started with UniServerZ/XAMPP/WAMP or any other provider. I want to trigger a reload each time I edit any file in the server base directory.

I know that it is quite easy to set up such a task with, e.g. 'grunt-express' which starts a local server for you, but I really want to listen to a server started with UniServerZ/XAMPP/WAMP.

I will be grateful to see example configuration for such scenario if it is possible to achieve it.

Answer 1

Here is how I did it with Wamp 2.2 on Windows 7.

First, you need grunt-contrib-watch properly setup with livereload. I also use grunt-sass and not grunt-contrib-sass, because grunt-sass use Libsass. LibSass is a C/C++ port of the Sass engine, and it is faster.

To install them, use these commands :

npm install grunt-contrib-watch --save-dev
npm install grunt-sass --save-dev

Here is an example of Gruntfile :

module.exports = function(grunt) {

    grunt.initConfig({
        watch: {
            sass: {
                files: 'folder/to/your/sass/**/*.sass',
                tasks: ['sass:dist'],
                options: {
                    livereload: true,
                },
            },
            //Watch your theme files
            livereload: {
                files: ['pathToTheme/*.php', 'pathToTheme/img/**/*.{png,jpg,jpeg,gif,webp,svg}'],
                options: {
                    livereload: true
                },
            }
        },
        sass: {
            options: {
                includePaths: ['where/to/find/additional/@import/scss/files'],
                outputStyle: 'nested',
                imagePath: 'how/to/rewrite/image/path',
                sourceMap: true
            },
            dist: {
                files: {
                    'output/file.css': 'input/file.scss'
                }
            }
        },
    });

    // Default task
    grunt.registerTask('default', ['watch']);

    // Load NpmTask
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-sass');

};

You could save yourself some time with load-grunt-tasks, and remove the manual loading of task :

require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks

Then I use the livereload plugin for firefox (or chrome or safari).

Start the grunt watch task, open your site on localhost, and click on the icon in your browser. Now if you edit a watched file, the page should update accordingly.

A solution exist to add the livereload js in your Wordpress automatically (in function.php):

if (in_array($_SERVER['REMOTE_ADDR'], array('127.0.0.1', '::1'))) {
    wp_register_script('livereload', 'http://localhost:35729/livereload.js?snipver=1', null, false, true);
    wp_enqueue_script('livereload');
}