[Grunt] Can't get watch working…

[mikes02]

module.exports = function(grunt) {

    // Configuration
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        imagemin: {
            dynamic: {
                files: [{
                    expand: true,
                    cwd: 'images/',
                    src: ['**/*.{png,jpg,gif}'],
                    dest: 'images/build/'
                }]
            }
        },

        watch: {
            images: {
                files: ['images/'],
                tasks: ['imagemin'],
                options: {
                    spawn: false
                }
            }
        }   

    });

    // Plugins
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // When Grunt is run
    grunt.registerTask('default','watch');
};

New to Grunt but I can’t seem to get the watch feature working on the image optimization, if I add a new image into the main images folder nothing is happening, I thought watch would automate it and add it to the images/build folder but it’s not. Am I going wrong somewhere?

Thank you.

[Chromawoods]

I think you need to define a file pattern within the watch task. So if you just want to watch any file within the images folder, you would do files: ['images/*'] or if you have sub folders you can do it recursively with files: ['images/**/*'].

[mikes02]

OK, I got it working, but for some reason Grunt is duplicating the destination folder each time it runs. So if I run grunt in the command line it optimizes the images and puts them into a folder called build, but then if I run grunt again from the command line it creates a build directory within the original build directory, so it’s duplicating. Is that normal?

[shaneisme]

You’ll want to clean the destination folder each build.

It’s one of the steps in this tut:

http://www.sitepoint.com/writing-awesome-build-script-grunt/

[Author]

Posts