Question

我有一个包含20多个图像的文件夹。我想使用grunt调整所有图像的大小，每个图像都有不同的尺寸用于调整大小。搜索后，我遇到了grunt图像调整大小，可以解决我的问题。

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

但我如何指定每张图片的尺寸？

Answer 1

关于Grunt插件的一个很好的功能是大多数都是Multi Tasks。什么是多任务？它们允许您使用不同的配置执行插件。最重要的是，如果您没有指定要使用的配置，插件将遍历所有配置。这意味着您可以为a.jpg指定配置，为b.jpg指定配置，依此类推。

现在，有两种方法可以做到这一点。您可以对单个配置进行硬编码，也可以动态生成配置。

硬编码配置

第一个选项是创建不同的个人配置：

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"
         }
      }
  }
})

等等。此时，您可以使用grunt image_resize:a.jpg运行单个调整大小（如果您愿意），或者您可以使用grunt image_resize运行所有调整大小。这种方法适用于20张图像，但硬编码不是可扩展的解决方案;如果您计划随着时间的推移添加大量图像，您可能需要查看动态配置。

动态配置

对于那些硬编码每个单独配置过于潮湿的情况，您可以通过创建自定义任务来动态创建配置，以首先创建配置，然后运行实际的图像调整大小任务。

在这种情况下，您的配置对于插件看起来像这样：

grunt.initConfig({
   image_resize: {}
})

注意没有配置？那是因为在我们告诉grunt运行插件之前，自定义任务将用我们的动态配置替换该空对象。

要动态创建我们的配置，我们的自定义任务将需要：

一个映射，告诉函数使用哪个宽度/高度档案
A globbing pattern让Grunt知道要查看哪些文件

一旦我们有了这两个，我们就可以创建我们的自定义任务：

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);

然后我们将使用grunt batch运行我们的批处理。该任务将运行，为image_reize创建批处理配置，然后在结束时启动该任务。值得注意的是：对于动态配置，如果我们试图直接运行grunt image_resize，它将失败，因为配置不存在。

如何使用grunt将不同的图像调整为不同的大小？

1 个答案: