Очень часто при разработке и особенно при поддержки веб проектов выпущенных в продакшен (у которых появились постоянные пользователи) возникает проблема с обновлением кеша на стороне клиентов. Например возникает необходимость в изменение интерфейса но после внесение изменений пользователи их не видят так как их браузер кешируют веб страницы и им нужно либо в ручную очищать кеш (что в большинстве случаев не приемлемо) либо ждать когда браузер решить что данных в кеше устарели и их нужно обновлять. Существует несколько способов решения этой проблемы. В этой статье я опишу наиболее часто используемых способы в случае использования gulp для сборки проекта:

1. При загрузке файлов скриптов и стилей добавлять «некий номер» который будет меняться каждый раз при сборке скриптов.
например:

Такой способ наиболее прост при реализации и более удобен при разработки.

2. Каждый при сборке пакета менять имена файлов:

Наиболее часто используемый, более подробнее о нем ниже.

3. Менять путь к файлу:

Доступ к файл нужно будет разруливать через конфигурацию веб сервера.

Такой способ очень редко кто использует так как требует обязательной дополнительной настройки веб сервера и осложняет сам процесс разработки.

Далее рассмотрим два первых способа более подробно.

Реализация первого способа

все что вам нужно это использовать плагин gulp-rev-append

для его использования нужно немного изменить строку загрузки скриптов а точнее добавить @@hash:

а в самом сборщике gulpfile.js написать следующую задачу:

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

То есть строка @@hash будет заменена на хеш файла и каждый раз при изменения файла будет генерироваться новый хеш. По сути плагин будет искать в index.html наличие ?rev= (через регулярное выражение) в случае найденной строки искать файл на диске и генерит новый хеш если хеш отличается от указанного в index.html заменять его на новый.

Этот способ очень прост и удобен но к сожалению он не дает 100% гарантии обновления кеша на клиенте так как меняться не имя файла а только переменная запроса. (Например этот способ не сработает если пользователи находятся за кеширующими серверами и эти сервера не настроены на распознавание переменных запросов). О чем и говориться на странице плагина. Более подробно можно прочитать об этом в статье

http://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/

Так же при использование этого способа нужно учитывать что путь к загружаемому скрипту указанный в index.html будет использоваться для поиска этого скрипта на диске (а нашем примере «путь к проекту»/js/app.js) и если он не будет найден то замены ?rev= не произойдет.

 

Второй способ немного более сложный

Будем генерировать новое имя файла при каждой сборке проекта

Первый плагин который нам потребуется gulp-rev

Он то и будет генерировать новое имя загружаемого файла. Используем его.

файл манифеста — это файл соотвествия старых названий файлов (исходных) новым измененым именам. Далее данные из этого файла используются для изменения имен загружаемых скриптов в файле index.html. Для этого использует следующий плагин gulp-rev-collector

Его использование:

В процессе постоянного редактирования файлов проекта у вас будут накапливаться много версии изменяемы файлов и ествественно их нужно постоянно удалять оставляю только последнии актуальные версии. Для этого используем плагин gulp-rev-outdated

Для его использования потребуется установить несколько дополнительных плагин:

Используем его как рекомендовано в его документации:

И последний штрих, соберем все наши задачи в одну и укажем зависимости задач:

 

It's only fair to share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on VK