Grunt 不调整图像大小

Question

我正在尝试 re-size 并压缩网站上的 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 可以为您处理这些任务。
responsive_images 任务的 options 对象现在包括 upscale 属性，其值设置为 true。这将确保任何宽度小于 1600 像素的图像也都是 resized/upscaled 到 1600 像素宽。如果您只想调整宽度大于 1600 像素的图像，只需删除它或将其值设置为 false。
当您现在运行 grunt 通过 CLI 使用上面的要点时，类似于以下内容的内容将记录到您的控制台：

Running "responsive_images:dev" (responsive_images) task

Resized 8 files for 1600

Grunt 不调整图像大小

Grunt Not Resizeing Images

image

gruntjs

responsive

responsive-images