Question

我正在尝试在网站上重新调整大小并压缩8张图像，因此我调整了大小并压缩图像。但是，当我实现Grunt响应式图像任务时，它表示成功，但不是我输入的参数。具体来说，它表明：

Running "responsive_images:dev" (responsive_images) task

Resized 8 files for 120x110

然而，对于响应式图像输入，我有：

grunt.initConfig({
  responsive_images: {
    dev: {
      options: {
        engine: 'im',
        sizes: [{         
          width: 1600,
          suffix: '_large_2x',
          quality: 30
        }]
      },

      /*
      You don't need to change this part if you don't change
      the directory structure.
      */
      files: [{
        expand: true,
        src: ['*.{gif,jpg,png}'],
        cwd: 'images_src/',
        dest: 'images/'
      }]
    }
  },

如何让Grunt根据显示的宽度，后缀和质量精确调整图像大小？

Grunt文件的其余部分说明，

    // ...

    clean: {
      dev: {
        src: ['images'],
      },
    },

    /* Generate the images directory if it is missing */
    mkdir: {
      dev: {
        options: {
          create: ['images']
        },
      },
    },

    /* Copy the "fixed" images that don't go through processing into the images/directory */
    copy: {
      dev: {
        files: [{
          expand: true,
          src: 'images_src/fixed/*.{gif,jpg,png}',
          dest: 'images/'
        }]
      },
    },
  });

  grunt.loadNpmTasks('grunt-responsive-images');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-mkdir');
  grunt.registerTask('default', ['clean', 'mkdir', 'copy', 'responsive_images']);

};

我已经包含了图像文件结构的屏幕截图。我只是希望它们出现在其中一个目录中，但它们不会出现在任何地方。我原本以为它们会出现在images /目录中，因为它是在dest中为响应式图像指定的。

Answer 1

尝试按如下方式配置Gruntfile.js：

<强> Gruntfile.js

module.exports = function(grunt) {

  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-responsive-images');

  grunt.initConfig({
    responsive_images: {
      dev: {
        options: {
          engine: 'im',
          upscale: true, // <-- 1. Set `upscale` to `true` if you want images
                         //        with a width of less than 1600px wide to
                         //        also be resized to 1600px wide.
          sizes: [{         
            width: 1600,
            suffix: '_large_2x',
            quality: 30
          }]
        },
        files: [{
          expand: true,
          src: ['**/*.{gif,jpg,png}'],
          cwd: 'images_src/',
          dest: 'images/'
        }]
      }
    },
    clean: {
      dev: {
        src: ['images']
      },
    }
  });

  grunt.registerTask('default', ['clean:dev', 'responsive_images:dev']);
};

备注

mkdir和copy任务已被省略。没有必要创建目标目录并复制图像文件，因为grunt-responsive-images可以为您处理这些任务。

options任务的responsive_images对象现在包含upscale属性，其值设置为true。这将确保宽度小于1600px宽的任何图像也可以调整大小/放大到1600px宽。如果您只想要调整宽度大于1600像素的图像，只需将其删除或将其值设置为false。

当您现在使用上面的要点通过CLI运行grunt时，您的控制台将记录类似以下内容：

Running "responsive_images:dev" (responsive_images) task

Resized 8 files for 1600

Grunt没有调整图像大小

1 个答案: