usemin并使用Grunt重写供应商CSS文件中的图像URL

Question

grunt-usemin帮我改造

<link href="/dependencies/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="/dependencies/nanoscroller/bin/css/nanoscroller.css" rel="stylesheet" />
<link href="/dependencies/dropzone/downloads/css/dropzone.css" rel="stylesheet" />

一个完美的组合和缩小的js:

<link href="scripts/8e1991c7.libraries.js" rel="stylesheet" />

在concat,cssmin和uglify之后,我有一个几乎完美的文件夹结构,除了图像和它们的位置.

这是我的问题:

所有这些供应商的css文件都包含图像位置.不好的是,他们所有人都在分享不同类型的地点.他们中的一些人在css文件夹中使用图像,而其他人在img文件夹中使用.

如何配置grunt usemin来重写所有图片网址？

Answer 1

1)Rev图像.将图像路径添加到rev任务中.

rev: {
    dist: {
        files: {
            src: [
                '<%= yeoman.dist %>/static/scripts/{,*/}*.js',
                '<%= yeoman.dist %>/static/styles/{,*/}*.css',
                '<%= yeoman.dist %>/static/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
            ]
        }
    }
}

2)将包含图像位置的文件路径添加到usemin任务中.

usemin: {
    html: ['<%= yeoman.dist %>/{,*/}*.html'],
    css: ['<%= yeoman.dist %>/static/styles/{,*/}*.css'],
    options: {
        assetsDirs: ['<%= yeoman.dist %>','<%= yeoman.dist%>/static/images'],
    }
}

3)跑grunt.

Answer 2

我用以下方法解决了这个问题.

useminPrepare: {
    html: 'src/index.html',
    options: {
        dest: 'build',
        flow: {
            html: {
                steps: {
                    js: ['concat', 'uglifyjs'],
                    css: ['cssmin']
                },
                post: {}
            }
        }
    }
},
cssmin: {
    options: {
        root: 'src'
    }
}

首先,我们覆盖useminPrepare的flow,从CSS流取出CONCAT任务.这是必需的,因为concat会破坏相对路径信息.由于cssmin本身会将多个文件连接在一起,因此sepearte concat任务只会有害.(https://github.com/yeoman/grunt-usemin/issues/225)

最后,我们告诉cssmin您项目的"根"来自Gruntfile.这有助于cssmin重写它找到的相对于此"根"目录的相对URL.

Answer 3

什么固定的CSS background-image转速对我来说是添加一个CSS样式options,它发现在CSS中的所有资产引用,并在加速运转资产替换它们.

// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
  ...
  ...
  options: {
    ...
    ...
    // This is so we update image references in our ng-templates
    patterns: {
      js: [
        [/(assets\/images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images']
      ],
      css: [
        [/(assets\/images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the CSS to reference our revved images']
      ]
    }
  }
},

Answer 4

我做了一些挖掘，发现了两个看起来可以完成工作的任务：https://github.com/yeoman/grunt-filerev和https://github.com/richardbolt/grunt-cssurlrev。唯一的问题是你必须手动配置 Gruntfile 中的路径，如下所示：

grunt.initConfig({
    filerev: {
      images: {
        src: ['img1.png', 'img2.png'],
        dest: 'tmp'
      }
    },
    cssurlrev: {
      dist: {
        src: ['public/css/*.css']
      },
    }
});

据我所知，没有一个插件可以自动执行此任务。