Я хочу кэшировать фоновые изображения бюста в моем CSS. Итак, если мой оригинальный стиль:

.one {
  background: url(image.png);
}

Можно добавить строку:

.one {
  background: url(image.png?1234);
}

Или имя файла можно было изменить:

.one {
  background: url(image-1234.png);
}

Вместо использования случайного генератора или идентификатора временной метки лучше использовать хэш файла изображения, чтобы кеш был заблокирован только при необходимости (когда файл действительно изменился).

Я использую SASS и Gulp, поэтому я могу использовать Gulp Cache Buster и Gulp Hasher:

https://github.com/disintegrator/gulp-hasher

https://github.com/disintegrator/gulp-cache-buster

Проблема, с которой я столкнулся, заключается в том, что похоже, что вам нужно изменить свой SASS. Итак, если вы начнете с этого:

.logo {
  background: url(assets/images/logo.svg);
}

Вам нужно изменить это на это:

.logo {
  background: url(ASSET{assets/images/logo.svg});
}

Я хочу, чтобы мой SASS был чистым и красивым, а не модифицировал его таким образом. Это возможно?

9
Evanss 18 Фев 2016 в 15:56

2 ответа

Лучший ответ

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

  1. Напишите задачу gulp, которая автоматически добавляла бы ASSET{ ... } вокруг всех URL-адресов в вашем файле CSS. Это могло произойти после конкатенации и до хеширования / удаления. Поскольку у вас есть награда за этот вопрос, дайте мне знать, если вы хотите, чтобы я написал это задание. Я предлагаю вам попробовать, хотя, кстати, вы можете узнать несколько интересных вещей.

  2. Идеальное решение. В плагине очистки кеша есть возможность определять регулярное выражение, которое будет использоваться для поиска ресурсов. По умолчанию для регулярного выражения установлено значение /ASSET{(.*?)}/g, но вы можете легко обновить что-нибудь, чтобы оно соответствовало старым добрым CSS url(...). Опять же, поскольку у вас есть награда, дайте мне знать, если вам нужна помощь с регулярным выражением, но я предлагаю вам попробовать, потому что вы можете узнать что-нибудь интересное (pssst, вы хотите игнорировать URL-адреса data:).

    Попробуйте это регулярное выражение в конфигурации перебора кеша:
    /url\((?!['"]?data:)['"]?([^'"\)]*)['"]?\)/g

    Если вы хотите игнорировать URL-адреса, начинающиеся с «http» (то есть они размещены в другом домене), используйте следующее регулярное выражение. Предполагается, что все пути к вашим активам относительны, что и должно быть:
    /url\((?!['"]?(?:data|http):)['"]?([^'"\)]*)['"]?\)/g
    http://www.regexpal.com/?fam=94251

    Если вы хотите иметь возможность определять атрибуты CSS, которые будут иметь хешированные / заблокированные URL-адреса, вы можете использовать следующее, которое будет применяться только к URL-адресам, определенным в background, background-image и {{X2} } Атрибуты CSS. Вы можете добавить больше, добавив вертикальную черту | и имя атрибута после |list-style:
    /(?:background(?:-image)?|list-style)[\s]*:[^\r\n;]*url\((?!['"]?(?:data|http):)['"]?([^'"\)]*)/g
    http://www.regexpal.com/?fam=94252

3
Peter O. 29 Фев 2016 в 10:18

Вы можете использовать gulp-rev-all. Он сможет добавлять хэш к файлам и перезаписывать их без необходимости добавлять дополнительную разметку в ваш файл SASS.

Очень простой файл gulp для того же будет выглядеть так:

var gulp = require('gulp');
var sass = require('gulp-sass');
var RevAll = require('gulp-rev-all');

gulp.task('default', function () {

var revAll = new RevAll({dontRenameFile: ['index.html']});

gulp.src(['app.sass'])
.pipe(sass().on('error', sass.logError))
.pipe(revAll.revision())
.pipe(gulp.dest('build'));

gulp.src(['**.jpg','**.png','**.gif'])
.pipe(revAll.revision());

return gulp.src('index.html')
.pipe(revAll.revision())
.pipe(gulp.dest('build'));

});

Примечание . Используется параметр dontRenameFile, чтобы исключить файл html. от пересмотра

Я создал рабочий пример на https://github.com/pra85/gulp-sass-filerev

2
Prayag Verma 24 Фев 2016 в 13:10