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

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

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

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

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

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

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

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

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

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

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

Инкапсуляция с помощью замыканий в JavaScript

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

Если переменная или объект в JavaScript не помещены внутрь какой-либо функции, то они становятся глобальными. Все глобальные элементы в JavaScript являются свойствами глобального объекта. Для браузера это объект window. При этом конструкции for, if и другие не влияют на видимость переменных.

Создание глобальных переменных, как правило, нежелательно, так как оно может привести к трудно обнаружимым ошибкам, и усложняет перенос кода в другие приложения.

Поворот изображения на html5 canvas

Возможно, вы уже знаете что есть удобный метод canvas context drawImage:

context.drawImage(image, x, y);
где image - это DOM изображение (или другой canvas), x, y - левый верхний край изображения. Также там есть несколько опциональных параметров, но мы не будем их сегодня использовать.