Grunt - how to watch and synchronize file deletion

Question

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

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

My Gruntfile.js:

 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 the grunt-contrib-watch task? Thank you for your help!

Answer 1

For a remote event, you can delete all files in static / img and copy the 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 think this may be different from what you expected to delete a specific file, but it works as expected.

Answer 2

Grunt has an API file that can be used with events, so you can write a delete function that runs when a given observable file is deleted

 grunt.event.on('watch', function(action, filepath, target) { if (action === 'deleted') { grunt.file.delete(fileToDelete); } }); 

The file path is passed, so you can do something like a regular expression to get the file name and add it with the appropriate path (if necessary).

Answer 3

I highly recommend using wrapper nodejs watch , which seems more stable (in December 2013) and more universal than native fs.watch / fs.watchFile .

https://github.com/paulmillr/chokidar

A tasty thing is also its API:

  .on('add' .on('addDir' .on('change' .on('unlink' .on('unlinkDir' .on('error' 

My rough tests do not show performance problems when using this module.

Of course, this is not the final answer to your question, but a hint. Hope this helps.

Answer 4

I did the task for this:

https://github.com/taylorcode/grunt-delete-sync

Hope this helps. Beware of the destructive nature.

Answer 5

Try duplicate , which may suit your needs.

It will delete the dest file if the source is deleted, and it will also delete empty folders after deleting its contents.

Answer 6

Using grunt-rsync instead of the copy task, you can synchronize file deletion by using the delete option .

Answer 7

This is an old question, but for those who land here in 2016 or later, there is now a grunt-sync task that handles full synchronization, including deleting files: https://github.com/tomusdrw/grunt-sync