yeoman - 防止 yeoman.io 缩小图像

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

如果您删除图像 revving 它会破坏您的缓存，您应该尝试保持 revving 并更新您的 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属性。这会将 JS 文件中所有出现的图像替换为新的 revved 版本，这样客户端的浏览器就不会使用缓存的图像而不是新的图像。