有没有办法在 grunt.js 中为响应图像设置多个不同的目的地？

Question

这是我的代码。我想为每个不同大小的文件设置不同的目的地，只是为了让我的文件树更有条理。显然，我所拥有的不起作用，我是否需要先将它们全部放在同一个文件夹中，然后以某种方式将它们移动到适当的文件中？如果是这样的话，你能告诉我如何去做吗？

module.exports = function(grunt) {
    grunt.loadNpmTasks('grunt-responsive-images');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.initConfig({
        uglify: {
            js: {
                src: 'assets/js/*.js',
                dest: 'assets/min-files/main.min.js'
            },
        },
        cssmin: {
            dev: {
                options: {
                    report: 'min'
                },
                src: 'assets/css/*.css',
                dest: 'assets/min-files/main.min.css'
            }
        },
        responsive_images: {
            dev: {
                options: {},
                sizes: [{
                    name: 'small',
                    width:320,
                    height: 240,
                    suffix:'jpg',
                    dest: 'assets/images/main-page-bg/small'
                },{
                    name: 'medium',
                    width: 640,
                    quality: 80,
                    suffix:'jpg',
                    dest: 'assets/images/main-page-bg/medium'
                },{
                    name: 'large',
                    width: 1024,
                    quality: 80,
                    suffix:'jpg',
                    dest: 'assets/images/main-page-bg/large'
                },{
                    name: 'retina',
                    width:1024,
                    quality: 100,
                    suffix:'jpg',
                    dest: 'assets/images/main-page-bg/retina'
                }],
                files: [{
                    expand: true,
                    src: '*.jpg',
                    //dest: 'assets/images/new/'
                }]
            }
        },
    });
};

Answer 1

... do I need to first put them all in the same folder, then somehow move them into their proper files

您可以通过多种方式配置 responsive_images 任务，将生成的文件定向到不同的目的地...

选项 1

使用 custom-dest 属性您可以按如下方式配置 responsive_images 任务：

Gruntfile.js

module.exports = function(grunt) {

    grunt.initConfig({

        responsive_images: {
            allImages: {
                options: {
                    sizes: [{
                        name: 'small',
                        width: 320,
                        quality: 80
                    }, {
                        name: 'medium',
                        width: 640,
                        quality: 80
                    }, {
                        name: 'large',
                        width: 1024,
                        quality: 80
                    }, {
                        name: 'retina',
                        width: 2048,
                        quality: 80
                    }]
                },
                files: [{
                    expand: true,
                    cwd: './images',
                    src: '**/*.{jpg,png}',
                    custom_dest: 'assets/images/main-page-bg/{%= name %}/'
                }]
            }
        }

    });

    grunt.loadNpmTasks('grunt-responsive-images')

    grunt.registerTask('respImages', [
        'responsive_images:allImages'
    ]);

};

选项 2

grunt-responsive-images 也可以配置为利用 多目标 .

有关 多目标 的更多文档，请参阅 grunt 文档中的 multi-tasks and Task Configuration and Targets。

注意：此选项显然比选项一更冗长，但是，它可以更好地控制您的配置选项等。

Gruntfile.js

对于您的场景，您可以配置一个单独的目标，为您需要的每个输出目标文件夹包含一个 dest 路径。例如：

module.exports = function(grunt) {

    grunt.initConfig({

        responsive_images: {
            small: { //<-- This is the Target for 'small' images
                options: {
                    sizes: [{
                        name: 'small',
                        width: 320,
                        quality: 80
                    }]
                },
                files: [{
                    expand: true,
                    cwd: './images',
                    src: '**/*.{jpg,png}',
                    dest: 'assets/images/main-page-bg/small'
                }]
            },
            medium: { //<-- This is the Target for 'medium' images
                options: {
                    sizes: [{
                        name: 'medium',
                        width: 640,
                        quality: 80
                    }]
                },
                files: [{
                    expand: true,
                    cwd: './images',
                    src: '**/*.{jpg,png}',
                    dest: 'assets/images/main-page-bg/medium'
                }]
            },
            large: { //<-- This is the Target for 'large' images
                options: {
                    sizes: [{
                        name: 'large',
                        width: 1024,
                        quality: 80
                    }]
                },
                files: [{
                    expand: true,
                    cwd: './images',
                    src: '**/*.{jpg,png}',
                    dest: 'assets/images/main-page-bg/large'
                }]
            },
            retina: { //<-- This is the Target for 'retina' images
                options: {
                    sizes: [{
                        name: 'retina',
                        width: 2048,
                        quality: 80
                    }]
                },
                files: [{
                    expand: true,
                    cwd: './images',
                    src: '**/*.{jpg,png}',
                    dest: 'assets/images/main-page-bg/retina'
                }]
            }
        }

    });

    grunt.loadNpmTasks('grunt-responsive-images')

    grunt.registerTask('respImages', [
        'responsive_images:small', // <-- Targets in a task are called using a colon separator. 
        'responsive_images:medium',
        'responsive_images:large',
        'responsive_images:retina'
    ]);

};

运行 `responsive_images`

选项 1 和 2 的要点都可以通过 CLI 通过键入以下命令运行:

$ grunt respImages

这将根据每个目标中定义的 options 输出多个图像文件（到不同的目标文件夹）。

目前，上面显示的两个选项都假定所有源图像都存储在项目目录顶层名为 images 的文件夹中。这个可能需要在files对象中重新配置，（对于每个Target） , 根据您的目录设置。
我建议尝试上面演示的任一选项，进行相应修改，然后选择最适合您要求的选项。

有没有办法在 grunt.js 中为响应图像设置多个不同的目的地？

Is there a way to set multiple different destinations for responsive-images in grunt.js?

image

responsive-design

gruntjs

选项 1

Gruntfile.js

选项 2

Gruntfile.js

运行 `responsive_images`

评论

有没有办法在 grunt.js 中为响应图像设置多个不同的目的地？

Is there a way to set multiple different destinations for responsive-images in grunt.js?

image

responsive-design

gruntjs

选项 1

Gruntfile.js

选项 2

Gruntfile.js

运行 responsive_images

评论

运行 `responsive_images`