Версионность ассетов при использовании gulp

assetsПри изменении клиентского кода нужно как-то заставить браузер клиента перезагрузить измененные файлы. Эта проблема достаточно распространенная. Скорее всего, вы столкнетесь с ней вне зависимости от того, какими технологиями пользуетесь при веб-разработке. Этот пример о решении проблемы при создании фронтенд проекта с использованием javascript и gulp.

Решить можно несколькими способами.

Пусть, например, 7e50961489 - это новая версия ассетов. На самом деле, она может быть любой, главное, чтобы отличалась от тех, что были раньше. Можно просто нумеровать - 1, 2, 3 и т.д. Но так не слишком удобно. Дальше станет понятно, почему.

Sequence Master Game

Sequence Master Game - игра для проверки скорости реакции. Кликайте по наибольшем среди доступных чисел (можно выбирать несколько чисел на каждом шаге) и делитесь рекордом с друзьями.

Ключевые особенности/геймплей:

1) Доступно 7 уровней

2) За отведенное время вы должны успеть прокликать числа от наибольшего до наименьшего.

3) За каждый выбор начисляются очки. Их количество зависит от скорости выбора игрока и величины выбранного числа. В случае ошибки игра не прекращается, но начисляется штраф.

4) Игра прекращается, если не успеть выбрать правильное число за отведенное время. После окончания игры есть возможность расшарить результат.

5) Респонсивность (должно работать на смартфонах), анимация и прочие свистелки =).

Поиграть можно перейдя по ссылке: https://rg.folkprog.net

Gulp-файл для frontend проекта

Решение не претендует на идеальность. Но вполне подойдет для разработки небольшого frontend проекта, написанного с использованием coffeescript и less. Важное замечание: использование бекенда не предусмотрено. Nodejs использован только для билда ассетов (такое решение удобно, к примеру, если вы планируете создать гибридное оффлайн приложение для смартфона).

Ключевые особенности нашего проекта, и, как следствие, gulp-файла:

1)  Поддерживает разные среды (prod, dev, etc)

2) Компиляция и минификация less, CoffeScript файлов, объединение нескольких в один (конкатенация)

3) Поддержка тестов (jasmine)

4) В dev-среде работает watch (динамически перебилдивает ассеты при изменении исходников)