usemin и переписывание URL-адресов изображений в файлах CSS поставщика с помощью Grunt

1) Обратные изображения. Добавьте пути к изображениям в задачу 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) Запустить хрюканье.

Я решил проблему, используя следующее.

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

Во-первых, мы переопределяем useminPrepare flow, удаляя задачу concat из потоков css. Это необходимо, потому что concat уничтожит информацию об относительном пути. Поскольку cssmin сам объединит несколько файлов вместе, отдельная задача concat только вредна. (https://github.com/yeoman/grunt-usemin/issues/225)

Наконец, мы сообщаем cssmin, где находится «корень» вашего проекта из Gruntfile. Это помогает cssmin переписать относительные URL-адреса, которые он находит относительно этого «корневого» каталога.

Что исправило обновление 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']
      ]
    }
  }
},

Я немного покопался и нашел пару задач, которые, похоже, выполнят свою работу: 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']
      },
    }
});

Насколько мне известно, нет плагина, который выполняет эту задачу автоматически.

Пришлось реализовать новую задачу. Это моя предварительная реализация.

grunt.registerMultiTask('rewriteCssUrl', 'rewrite url in css', function () {
  var options = this.options({
     assets: grunt.filerev ? grunt.filerev.summary : {},
     postFilter: function identity(input){ return input}
  });

  var self = this;
  var assets = options.assets;

  self.filesSrc.forEach(function (file) {
     var css = grunt.file.read(file);
     var original = css;

     css = css.replace(/(?:src=|url\(\s*)['"]?([^'"\)]+)['"]?\s*\)?/gm, function (match, src) {
        var key = path.join(path.dirname(file), src);
        var asset = assets[path.normalize(key)];
        var val =  options.postFilter(asset);
        return match.replace(src, val || match);
     });

     if(original !== css) {
        grunt.log.writeln('✔ '.green + file + (' was changed.').grey);
        grunt.file.write(file, css);
     }
  });
});

Мой подход к этой проблеме заключался в том, чтобы в основном создать отдельный styles/select2/select2.css для каждого стиля поставщика, а затем все соответствующие изображения могут быть скопированы Grunt в styles/select2 (не беспокоясь об относительных путях или перезаписи и т. д.) как часть скрипта. То есть:

приложение/index.html

<!-- build:css(.tmp) styles/select2/select2.css -->
<link rel="stylesheet" href="bower_components/select2/select2.css">
<!-- endbuild -->

Gruntfile.js

Добавьте новую задачу copy, которая будет копировать стили поставщиков в каталог .tmp, прежде чем они будут свернуты с помощью cssmin:

    copy: {
        // this copies bower_components/*.css into .tmp so they can be compiled
        styles: {
            expand: true,
            cwd: '<%= yeoman.app %>',
            dest: '.tmp/',
            src: [
                'styles/{,*/}*.css',
                'bower_components/**/*.css'
            ]
        },
        dist: ...

А затем, как только они будут свернуты, скопируйте соответствующие активы (в данном случае я предполагаю, что это просто изображения PNG и GIF):

        // and once we have compiled all of our stylesheets, we need to also copy over any necessary image files
        distAssets: {
            expand: true,
            cwd: '<%= yeoman.app %>/bower_components',
            dest: '<%= yeoman.dist %>/styles',
            src: [
                '**/*.png',
                '**/*.gif'
            ]
        }
    },

Наконец, добавьте новые задачи в задачу build:

grunt.registerTask('build', [
    'clean:dist',
    'replace:dist',
    'copy:styles',  // -- added
    'useminPrepare',
    // ... etc ...
    'copy',
    'rev',
    'usemin',
    'copy:distAssets'  // -- added
]);