CODEWITHSUNDEEP
imagegruntjsresize
Mew
Mew

Reputation: 1152

How to resize different images into different sizes using grunt?

I have a folder which contains more than 20 images in it. I want to resize all the images using grunt, each image has different dimensions for resizing. After searching I came across grunt image-resize which can solve my problem. 

grunt.initConfig({
   image_resize: {
      resize: {
         options: {
            width: 100
         },
         files: {
            // list of files
         }
      }
  }
})

But how can I specify dimensions for each image?

Upvotes: 1

Views: 1667

Answers (1)

theaccordance
theaccordance

Reputation: 889

One nice feature about Grunt plugins is that most are Multi Tasks. What are multi tasks? They allow you to execute the plugin using different configurations. Best part of all, if you don't specify which configuration to use, the plugin will iterate through all of the configurations. This means you can specify a configuration for a.jpg, and a configuration for b.jpg, and so on.

Now, there's two ways you can do this. You can hardcode the indivdual configurations, or you can dynamically generate the configurations on the fly.

Hardcoded configuration

The first option is to create the different indivdiual configurations:

grunt.initConfig({
   image_resize: {
      "a.jpg": {
         options: {
            width: 100,
            height: 100
         },
         files: {
            "foo/a.jpg": "foo/b.jpg"
         }
      },
      "b.jpg": {
         options: {
            width: 1600,
            height: 900
         },
         files: {
            "foo/b.jpg": "foo/b.jpg"
         }
      }
  }
})

And so on. At this point, you can run a single resize (if you wanted to) using grunt image_resize:a.jpg, or you could run all of them with grunt image_resize. This approach is doable for 20 images, but hardcoding isn't a scalable solution; if you're planning on adding a significant amount of images over time you may want to look at a dynamic configuration.

Dynamic Configuration

For those instances where hardcoding each individual configuration would be too tideious, you can instead dynamically create the configurations by creating a custom task to first create the configurations, and then run the actual image resize task.

In this scenario, your config would look like this for the plugin:

grunt.initConfig({
   image_resize: {}
})

Notice how there's no configuration? That's because the custom task is going to replace that empty object with our dynamic configuration before we tell grunt to run the plugin.

To dynamically create our configuration, our custom task will need:

  • A mapping that tells the function what width/height to use for which file
  • A globbing pattern so Grunt knows which files to look at

Once we have those two, we can create our custom task:

function BatchImageResize() {
    var config = {},
        pattern = "path/to/**/*.jpg",
        mapping = {
            "a.jpg": {
                width: 100,
                height: 200
            },
            "b.jpg": {
                width: 1600,
                height: 900
            }
        };

    //our grunt task iterates through the files
    //if a mapping exists for the file, it creates a config 
    grunt.file.expand(pattern).forEach(function (filePath) {
        var fileName = filePath.split('/').pop().split('.')[0];
        if (mapping[fileName]) {
            config[fileName] = {
                options: {
                    width: mapping[fileName].width,
                    height: mapping[fileName].height
                },
                files: {
                    ['path/foo/', fileName].join('') : ['path/bar', fileName].join('')
                }
            }
        }
    });

    // sets the configs we just dynamically created.
    // these configs only exist during runtime! 
    grunt.config('image_resize', config);

    //Now let's run the image resize task
    grunt.task.run(['image_resize']);
}

//Let's make our task accessible from the command line
grunt.registerTask('batch', BatchImageResize);

We would then run our batch using grunt batch. The task would run, creating the batch configurations for image_reize and then kicking off that task at the end. Worth noting: with dynamic configurations, if we attempted to run grunt image_resize directly, it would fail since the configurations wouldn't exist.

Upvotes: 1

Related Questions