如何在Grunt中生成响应式图片且不修改原文件名

嘿，这事儿好办！你现在遇到的是grunt-responsive-images插件默认会把图片宽度作为后缀追加到文件名里的情况，只要在配置里加个小参数就能让它保留原文件名啦。

关键就是在你的sizes配置项里添加name: 'original'，这样插件就不会自动生成带宽度的后缀了。修改后的完整配置代码如下：

module.exports = function (grunt) {
 grunt.initConfig({
 responsive_images: {
 dev: {
 options: {
 sizes: [{ 
   suffix: "", 
   width: 800, 
   quality: 50,
   name: 'original' // 新增这一行，告诉插件用原始文件名
 }]
 },
 files: [{ expand: true, src: ['*.{gif,jpg,png}'], cwd: 'img/', dest: 'img/large/' }]
 }
 }
 });
 grunt.loadNpmTasks('grunt-responsive-images');
 grunt.registerTask('default', ['responsive_images']);
};

简单解释下：name: 'original'这个配置会让插件直接使用源文件的文件名，不再额外添加宽度相关的后缀。现在再运行grunt命令，生成的图片就会是img/large/1.jpg，完全符合你的预期啦！

内容的提问来源于stack exchange，提问作者Vladimir Kabar