Question

所以我一直在使用yeoman.io来完成我的项目，并为我的图像设置了一个文件夹结构。但是当我构建它时，它会更改我的文件的文件名。

我甚至使用：

$ yeoman build:text

因为我只想缩小我的css，js和html模板，但它仍然会缩小图像。不确定我是否做错了。

编辑：

我在gruntfile中注释掉了img的所有实例，这似乎有用，但我认为这不是正确的方法。

Answer 1

您的意思是图片优化或修订？根据您自己的需要配置GruntFile.js没有问题。它使Yeoman / Grunt非常强大，因为它具有很强的适应性。

如果您不想要图像优化，请删除img任务中的配置。

// Optimizes JPGs and PNGs (with jpegtran & optipng)
   img: {
   },

如果您不想重命名图像文件，请从img任务中删除rev行：

// renames JS/CSS to prepend a hash of their contents for easier
// versioning
rev: {
  js: 'scripts/**/*.js',
  css: 'styles/**/*.css'
},

Answer 2

如果你删除图像加速它会破坏你的缓存，你应该尝试保持加速并更新你的JS文件。

尝试将usemin块更新为以下内容：

usemin: {
    html: ['<%= yeoman.dist %>/{,*/}*.html'],
    css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
    js: '<%= yeoman.dist %>/scripts/{,*/}*.js',
    options: {
        assetsDirs: [
            '<%= yeoman.dist %>',
            '<%= yeoman.dist %>/images',
            '<%= yeoman.dist %>/styles'
        ],
        patterns: {
            js: [
                [/(images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images']
            ]
        }
    }
}

您应该已经拥有usemin方法，只需在js路径正则表达式中添加js属性并添加pattern属性即可。这将使用新的revved版本替换JS文件中出现的所有图像，以便客户端＆＃39;浏览器不使用缓存图像而不是新图像。

防止yeoman.io缩小图像

2 个答案: