grunt-contrib-watch + grunt-rsync

Question

I'm trying to use grunt-contrib-watch and grunt-rsync to upload any file changes to my dev server. Here's my setup:

var path = require('path');

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        ...

        watch: {
            upload: {
                files: ['*'],
            },
            ...
        },

        rsync: {
            options: {
                args: ['--verbose'],
                exclude: ['.*','node_modules','sql','artifacts','session','logs','cache'],
                recursive: true,
                syncDestIgnoreExcl: true
            },
            dev: {
                options: {
                    src: './',
                    dest: '/usr/local/project',
                    host: 'dev3',
                }
            }
        },
    });

    grunt.event.on('watch', function(action, filepath, target) {
        if(target!=='upload') return;
        grunt.config('rsync.dev.options.src', filepath);
        grunt.task.run('rsync:dev');
    });

    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-rsync');
    ...
};

The rsync task works great on its own; it uploads my entire project relatively quickly but not quite fast enough to run on every file edit.

I'm trying to use grunt.event.on to modify the src just before running the task again so that it uploads just the one file. grunt.task.run('rsync:dev') doesn't seem to do anything at all, however. Doesn't error, nothing. Here's the output when I run it and then create a new file:

$ grunt watch:upload --debug --stack
Running "watch:upload" (watch) task
Waiting...OK
>> File "ppp" added.

If I give it an invalid task name, it does error out, so it obviously is looking for the task, I'm just not sure what it's doing with it. The file never makes it up to my server.

How can I get it to rsync just the files I've saved?

N.B. newer doesn't seem to work either, so I'm trying to do this manually via grunt.event.on('watch'

Answer 1

Even with Kyle's solution, grunt-contrib-watch is simply too slow (at least on linux). I found another library, grunt-este-watch which runs much quicker and lets you update the rsync config before every change without any hackery. My setup looks like this now:

esteWatch: {
    options: {
        dirs: [
            '**/',
            '!node_modules/**/',
            '!sql/**/',
            '!artifacts/**/',
            '!session/**/',
            '!logs/**/',
            '!cache/**/',
            '!plugins/ezc/**/',
        ],
        livereload: {
            enabled: true,
            port: 35729,
            extensions: ['css'],
        }
    },
    '*': function(filepath) {
        if(grunt.file.isMatch(['**/*___jb*'],filepath)) return []; // ignore temporary JetBrains files
        var tasks = ['rsync'];
        if(grunt.file.isMatch(grunt.config('uglify.dist.src'),filepath)) tasks.push('uglify');
        if(grunt.file.isMatch(grunt.config('less.dist.src'),filepath)) tasks.push('less');
        grunt.config('rsync.dev.options.src', filepath);
        grunt.config('rsync.dev.options.dest', path.join('/path/to/project',filepath));
        return tasks;
    }
},

Answer 2

It is not advised to run tasks from within the watch event. Take a look at the warning here: https://github.com/gruntjs/grunt-contrib-watch#using-the-watch-event

Currently the best way to do the above is to configure your rsync task with the watch event but use the watch's tasks to run the task, like this:

grunt.initConfig({
  watch: {
    upload: {
      // Dont spawn to retain the process context here
      options: { spawn: false },
      files: ['*'],
      tasks: ['rsync:dev']
    },
  },
});
grunt.event.on('watch', function(action, filepath, target) {
  if (target === 'upload') grunt.config('rsync.dev.options.src', filepath);
});

FWIW, we're looking for better ways to handle the above use case. Here is the leading idea: https://github.com/gruntjs/grunt-contrib-watch/issues/156