Мы захотели быть современными и новую версию сайта разделили на фронтенд и бекенд. Фронтенд на angularJS, бекенд на Symfony2.

Мы и не могли подумать, что нас будут ожидать неприятности с кэшем браузеров. Проблема обычно выглядит так: деплоим новые изменения на сервер и пользователи не видят новых изменений на сайте, а все потому что наши браузеры кэшируют картинки, js, css файлы и т.д. Чтобы увидеть изменения приходится вручную сбрасывать кэш, что естественно никто из наших пользователей не будет делать.

Приставка ?v20170408 к js, css файлам

Действительно, если подключать файлы вот так

<script src="/assets/js/main.min.js?v04042017"></script>

то браузер сбрасывает кеш, но не все браузеры умеют так делать.

В итоге было решено искать способ автоматического переименовывания js, css файлов.

Так как, мы уже используем Gulp, то будем использовать плагины для него.

gulp-rev

Начнем с того, что установим gulp-rev

npm install --save-dev gulp-rev

После этого в нашем файле gulpfile.js создадим новый таск. Будем считать, что ваше ангуляр приложение лежит в папке front:

gulp.task('revision', function() {
    var assets = ['front/assets/css/*.js', 'front/assets/js/*.css'];

    return gulp.src(assets, {base: 'front'})
        .pipe(rev())
        .pipe(gulp.dest('front/'))  // запишем файлы с хешами в имени в нашу папку front
        .pipe(rev.manifest())
        .pipe(gulp.dest('front/')) // запишем manifest файл в папку front
    ;
});

После этого у вас сгенерируется файл rev-manifest.json, который будет иметь примерно такой json:

{
  "assets/css/main.min.css": "assets/css/main-a528606713.min.css",
  "assets/css/xbbcode.min.css": "assets/css/xbbcode-cf86d9e515.min.css",
  "assets/js/main.min.js": "assets/js/main-a987b08309.min.js"
}

Этот json файл содержит информацию о том какому файлу соответствует такой же файл только с хешем в имени.

gulp-rev-collector

Сгенерировать rev файлы и манифест файл — хорошо. Но мы же не будем подставлять каждый раз файлы с новым хешем вручную?

Установим gulp-rev-collector

npm install --save-dev gulp-rev-collector

Для этого хорошие люди написали плагин gulp-rev-collector, который это будет делать каждый раз за нас:

gulp.task('rev-collect', function() {
    return gulp.src(['front/rev-manifest.json', 'front/index.html'])
        .pipe(collect())
        .pipe(gulp.dest('front/'))
    ;
});

Этот таск берет файл rev-manifest.json и заменяет все вхождения в файле index.html на новые файлы с хешами и после этого ваш код:

<script src="assets/js/main.min.js"></script>

превращается в

<script src="assets/js/main-a987b08309.min.js"></script>

Теперь браузер будет автоматически сбрасывать свой кэш.

Весь gulpfile.js с тасками выглядит так:

var gulp = require('gulp');
var rev = require('gulp-rev');
var collect = require('gulp-rev-collector');

gulp.task('revision', function() {
    var assets = ['front/assets/css/*.js', 'front/assets/js/*.css'];

    return gulp.src(assets, {base: 'front'})
        .pipe(rev())
        .pipe(gulp.dest('front/'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('front/'))
    ;
});

gulp.task('rev-collect', function() {
    return gulp.src(['front/rev-manifest.json', 'front/index.html'])
        .pipe(collect())
        .pipe(gulp.dest('front/'))
    ;
});

А как вы боретесь с кэшом браузера для JS приложений?)