Grunt - how to watch and synchronize files' deletion

Question

I am a new user of Grunt. Currently I have a folder static_src/img that contains image source files (.psd) and image files (.png, .jpg, etc.). This folder is not public. Instead, I want to sync the change of only image files to another public folder static/img.

The problem is - it works well when I add/change a image file in static_src/img, but I don't know how to sync the change when I delete a file. Grunt-contrib-watch can detect the deletion in static_src/img, but I don't know how to delete the file in static/img. I tried grunt-contrib-clean, but it seems not work for me, maybe I used it not properly.

My Gruntfile.js is:

module.exports = function(grunt){
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    copy: {
      dev: {
        files: [
          {expand: true, cwd: 'static_src/img/', src:['**/*.{png,jpg,gif}'], dest: 'static/img/'}
        ]
      }
    },
    clean: {
      dev: {
        src: ['static_src/img/**/*.png']
      }
    },
    watch: {
      copy: {
        files: ['static_src/img/**/*.{png,jpg,gif}'],
        tasks: ['copy'],
        options: {
          event: ['added', 'changed'],
        }
      },
      remove: {
        files: ['static_src/img/**/*.{png,jpg,gif}'],
        tasks: ['clean'],
        options: {
          event: ['deleted']
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-watch');
};

So how to delete a specific file in a grunt-contrib-watch task? Thank you for help!

Answer 1

For deleted event, you can delete all files in static/img and copy remaining files in static_src/img to static/img.

module.exports = function(grunt){
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    copy: {
      dev: {
        files: [
          {expand: true, cwd: 'static_src/img/', src:['**/*.{png,jpg,gif}'], dest: 'static/img/'}
        ]
      }
    },
    clean: {
      dev: {
        src: ['static/img/**/*.{png,jpg,gif}']    // Changed this from static_src to static
      }
    },
    watch: {
      copy: {
        files: ['static_src/img/**/*.{png,jpg,gif}'],
        tasks: ['copy'],
        options: {
          event: ['added', 'changed'],
        }
      },
      remove: {
        files: ['static_src/img/**/*.{png,jpg,gif}'],
        tasks: ['clean', 'copy'],    // Added copy task after clean
        options: {
          event: ['deleted']
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-watch');
};

I guess this might be different from what you expected to delete a specific file, but works as expected.