HTML5 Phaser ECMAScript 6

Часть 7: Сборка игры на Phaser: grunt, browserify, babel

Я знаю об отрицательном воздействии (на производительность) большого количества JavaScript файлов. Поэтому, я использую утилиту Browserify, которая все мои файлы будет собирать в один.

Шестая версия JavaScript-а пока не поддерживается всеми браузерами, по этому на помощь нам приходит утилита Babel, которая переводит код из 6 в 5 версию.

А что бы все это автоматизировать, мы будем использовать третью утилиту Watch. Она будет следить за JavaScript файлами в src папке и увидев изменения, будет автоматом запускать весь процесс объединения и конвертации.

Node.JS идеально подходит для разработки как серверных так и локальных приложений

Для сборки мы будем использовать Node.js и его утилиту npm. Вот мои шаги перед началом нового проекта:

1. Устанавливаю Node.js с официально сайта (если нужно обновляю)
2. Создаю папку с названием игры на рабочем столе
3. Запускаю командную строку (клавиши WIN+R, а дальше cmd)
4. Перехожу в папку игры (что бы не набирать путь к папке, можно после «cd » перетащить папку с рабочего стола в консоль и путь автоматом вставиться)
5. Используя npm утилиту ставлю все необходимое:

npm init
npm install babelify --save-dev
npm install babel-preset-latest --save-dev
npm install grunt --save-dev
npm install grunt-babel --save-dev
npm install grunt-browserify --save-dev
npm install grunt-contrib-clean --save-dev
npm install grunt-contrib-copy --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-connect --save-dev --no-optional
npm install grunt-contrib-uglify --save-dev --no-optional
npm install phaser --save-dev

Весь процесс не должен занять больше нескольких минут (зависит от скорости интернет соединения). В папке мы имеем все, что необходимо для начала разработки игры. Осталось создать gruntfile.js файл с инструкциями для grunt, что бы при старте она запускала локальный сервер и все остальные утилиты (но можете скачать мой вариант). Моя конфигурация дополнительно поддерживает обфускацию и минимизацию кода перед релизом игры. А для этого достаточно к команде grunt добавить ключевое слово build.

содержимое папки после установки утилит

Я также вручную создал простой index.html файл в игровой папке, который использует app.js и phaser.js файлы из scripts директории (их туда копирует утилита copy запущенная grunt-ом). В src директории находится главный app.js который подключает another_script.js файл. Все файлы можно скачать одним архивом отсюда. Если после запуска команды grunt все прошло успешно, в браузере открываем http://localhost:9001/ ссылку и видим страничку с сообщением, что локальный сервер работает и alert() сообщение из нашего второго файла (что в свою очередь подтверждает, что JavaScript 6 сконвертировался в 5 версию).

командная строка grunt и JavaScript сообщения в браузере

Из дополнительных программ я рекомендую поставить Rescue Time. Программа в фоне собирает статистику об открытых сайтах и запущенных программах на вашем ПК. Доступ к отчету можно получить открыв контекстное меню и выбрав «Go to Dashboard». Программа старается сама определить категорию (полезная или развлекательная) сайта или программы, но можно задать его самостоятельно. Лично мне эта статистика открыла глаза на мою работу, и повысила продуктивность в целом.

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

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

3 thoughts on “Часть 7: Сборка игры на Phaser: grunt, browserify, babel

  1. Красиво люди работают, эх! )
    А я сборку файлов в один делаю простым батником под виндой с таким примерно содержанием

    del build.js

    type .\Strings.js >> .\build.js
    type .\Utils.js >> .\build.js
    type .\Events.js >> .\build.js
    type .\Caravan.js >> .\build.js
    type .\UI.js >> .\build.js
    type .\Game.js >> .\build.js

    build.js уже отдельно минифицирую перед релизом

  2. Нет ленивее людей чем программисты =) На то мы и пишем программы…

    Ты молодец, что все же сумел хоть частично автоматизировать работу! Ручная минимизация это нормально, ведь релиз не так часто происходит. Попробуй посмотреть grunt его можно использовать фактически для всего… там есть утилита копирования файла, есть утилиты конвертации графики через image magic, архиваторы и много еще чего. Инструкции очень просты… ты описываешь как работает команда (любое ключевое слово) а потом вызываешь их в определенной последовательности. У меня в конце файла для этого есть строка

    grunt.registerTask('default', ['copy', 'browserify', 'connect', 'watch']);

    Я вот в свое время тоже bat файлом хотел сделать компиляцию extension-а для Chrome. Но если в bash есть куча утилит, то под виндой я потратил много времени, пока нашел рабочий способ считать содержимое файла. Но сделать string replace в тексте который находится в переменной, это не реально (для меня).

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *