Question

我有一个带有前缀图像的文件夹，我想根据它们的类型（标题，预览，文章）调整大小。最初所有图像都具有相同的大小。

images/
    header_a.jpg
    header_b.jpg
    preview_a.jpg
    preview_b.jpg
    article_a.jpg
    article_b.jpg

现在我想调整图片大小：

标题图片为1280px宽度
文章图片宽度为640px
预览图像为200px宽度

现在我使用grunt-responsive-images来调整图片大小，但这只会将所有图片调整为相同的格式。

我该怎么办？这就是我的Gruntfile现在的样子：

grunt.initConfig({

    responsive_images: {

        resize: {
            options: {
                sizes: [{
                    width: 640,
                }]
            },

            files: [{
                expand: true,
                src: ['**.{jpg,gif,png}'],
                cwd: 'app/in/',
                custom_dest: 'app/out/'
            }]
        }
    }
});

Answer 1

我根据不同的文件夹运行不同的任务：

responsive_images: {
    image_type_1: {
        options: {
            sizes: [{
                    width: 1680
            }, {
                    width: 450
            }]
        },
        files: [{
            expand: true,
            src: ['**.{jpg,gif,png}'],
            cwd: 'source/img/temp/responsive_images/image_type_1/',
            dest: 'source/img/temp/responsive_images_output/'
        }]
    },
    image_type_2: {
        options: {
            sizes: [{
                    width: 600,
                    height: 340,
                    aspectRatio: false
            }, {
                    width: 210,
                    height: 280,
                    aspectRatio: false
            }]
        },
        files: [{
            expand: true,
            src: ['**.{jpg,gif,png}'],
            cwd: 'source/img/temp/responsive_images/image_type_2/',
            dest: 'source/img/temp/responsive_images_output/'
        }]
    }
}

您可以匹配src-path中的文件名（不知道如何执行此操作），而不是使用不同的文件夹。但由于每个任务只能定义一个size-array，所以你必须为每个图像类型编写一个任务。

Answer 2

responsive_images: {

    resize_header: {
        options: {
            sizes: [{ width: 1280 }]
        },
        files: [{
            expand: true,
            src: ['**/header*.{jpg,gif,png}'],
            cwd: 'app/in/',
            custom_dest: 'app/out/'
        }]
    },
    resize_article: {
        options: {
            sizes: [{ width: 640 }]
        },
        files: [{
            expand: true,
            src: ['**/article*.{jpg,gif,png}'],
            cwd: 'app/in/',
            custom_dest: 'app/out/'
        }]
    },
    resize_preview: {
        options: {
            sizes: [{ width: 200 }]
        },
        files: [{
            expand: true,
            src: ['**/preview*.{jpg,gif,png}'],
            cwd: 'app/in/',
            custom_dest: 'app/out/'
        }]
    },
}

根据文件名运行不同的grunt任务

2 个答案: