Оптимизируйте свой процесс с Volo

При создании сайтов с повторяющимися решениями передовые разработчики сталкиваются с различными проблемами. Все сайты используют одинаковый DOM-скелет, а также множество общих функций и атрибутов. Volo стремится убрать часть усилий из процесса, позволяя разработчикам сосредоточиться на новых аспектах проекта, в отличие от того же самого.

Если вы добавите файл JavaScript, который не совместим с AMD, Volo попытается преобразовать его для вас.

Volo — это приложение, которое помогает внешним разработчикам автоматизировать их процессы. Позволяет создавать проекты на основе шаблона; Вы можете расширить эти шаблоны и настроить пользовательские команды для автоматизации повторяющихся задач.

Volo был создан с особым отношением к GitHub; он понимает GIT-репозитории, а также ветки и теги. Специального пакета или хранилища Volo не существует; если что-то есть на GitHub, вы можете использовать это в своем проекте. Это то, что отличает Volo от аналогичных приложений.

Volo был создан Джеймсом Бёрком , тем же Джеймсом Бёрком, который создал очень популярную библиотеку require.js .

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

Это плохая вещь? Не совсем — ты все равно должен это делать. Кроме того, вы можете переопределить команды, если вам нужно это сделать.

Итак, давайте начнем с некоторых команд Воло.

Создание проектов

Вы, вероятно, сначала будете использовать команду create . Я упоминал, что Volo глубоко укоренен в GitHub, но, что интересно, Volo на самом деле не использует GIT. Обычно вы просто хотите сделать снимок репо, а не всю историю его фиксации; поэтому Volo загружает только файлы репо без фактических данных GIT.

Самый простой способ ссылки на шаблон — просто указать имя репо. Например, если вы хотите скопировать репозиторий «starterTemplate», вы можете просто ввести следующую команду:

volo create myApp starterTemplate

Предполагая, что репозиторий является первым результатом, возвращенным GitHub, Volo загрузит и «установит» шаблон в новый каталог с именем myApp .

Это немного рискованно, особенно если вы предпочитаете называть свои репозитории очень общими названиями. К счастью, вы можете указать больше деталей, чтобы сузить набор результатов. Система фильтрации довольно продвинута, когда дело доходит до расшифровки вашего ввода. В основном вы можете использовать:

volo create appName userName/repoName/[branch|tag]

Вы также можете опустить определенные фрагменты информации. Например, вы можете опустить имя пользователя GitHub, в результате чего Volo будет искать первый проект с указанным именем и ответвлением.

Кроме того, вы можете указать имя пользователя, но не указывать версию / ветку, и Volo загрузит последнюю версию с тегами.

Если теги не найдены, Volo возвращается к основной ветке.

Кроме того, вам не нужно указывать точную версию. Ввод такого выражения, как » >1.0 «, заставляет Volo загрузить версию больше 1.0.

И последнее, но не менее важное: вам не нужно использовать репозиторий от Github; Вы просто передаете URL в zip-архив, который хотите использовать в качестве шаблона. Чтобы скопировать локальную папку, вы можете использовать следующий формат:

local:/path/to/directory

Таким образом, существует множество опций, которые вы можете использовать для выбора желаемого репо, и вы можете даже опустить имя репо, чтобы использовать собственный шаблон Volo по умолчанию .

Поиск и получение информации о репо

Не знаете, кто является владельцем популярного репо? Используйте команду search .

volo search repoName

Он использует тот же поиск GitHub, что и create ; так что вы можете быть уверены, что первым репо в ваших результатах поиска будет репозиторий Volo.

Команда search предназначена только для поиска репо или получения его информации. В результате ему не хватает некоторых функций, найденных в команде create . Например, Джеймс создал несколько официальных шаблонов, которые вы можете использовать, но вы можете не знать их имен.

Выполнение volo search volojs/template отображает несколько хороших вариантов для использования.

Вы не должны быть слишком точными с вашими критериями поиска; Воло делает достойную работу, находя то, что вы хотите. Это удивительно быстро.

Если вам нужна дополнительная информация о репо, такая как номера версий или ссылки, вы можете использовать команду info с соответствующим названием. Одним из результатов volo search volojs/template является volo search volojs/template с именем ‘volojs / create-responseive-template’. Вы можете получить дополнительную информацию об этом репо, набрав:

volo info volojs/create-responsive-template

Используя команды create , search и info , мы можем предположить, что создали наше приложение. Ну и что дальше?

Добавление файлов

Далее нам нужно добавить зависимости. Это довольно просто и использует те же параметры, что и команда create с некоторыми дополнениями. Помимо возможности указать пользователя, ветку / тег или URL-адрес GitHub для почтового индекса, команда add позволяет добавить « #<filename> », чтобы ввести определенный файл из репозитория. Многие репозитории обычно имеют нужную библиотеку JaveScript, но она упакована вместе с демонстрационными материалами и документацией. Чаще всего вам нужна только библиотека, и команда add позволяет вам это сделать.

Давайте представим, что вы хотите загрузить библиотеку с именем ‘foo.js’. Вы можете просто напечатать:

volo add user/fooRepo/v1.5#foo.js

Это загрузит весь zip-файл с GitHub, foo.js только файл foo.js и добавит его в ваш проект. Эта функция хэштега не относится к именам файлов; Вы можете передать имя папки, чтобы добавить только указанную папку в ваш проект.

Ранее я упоминал, что Воло ожидает от вас правильной практики AMD. Поэтому, если вы добавите файл JavaScript, который не совместим с AMD, Volo попытается преобразовать его для вас. Процесс довольно прост.

Он начинается с вопроса о том, какие зависимости использует ваш файл JavaScript.

Вы можете либо передать имена зависимостей в списке через запятую, либо опционально дать им имя переменной. Вот пример того, что вы можете напечатать для плагина jQuery:

jquery1.9=jQuery,jqueryui

Это сообщает Volo, что для указанной библиотеки требуется файл с именем jquery1.9 и для передачи его под именем переменной jQuery . Затем мы добавляем запятую для объявления следующей зависимости: jqueryui .

После того, как вы закончите декларировать свои зависимости, вы можете объявить, что вы хотите экспортировать из вашего скрипта. Обычно вы ничего не экспортируете в плагин jQuery; это обрабатывается самой jQuery. Но если у вас есть библиотека JavaScript, которая должна что-то экспортировать, вы просто наберете имя нужной переменной в вашем скрипте. Вы можете использовать эту функцию преобразования на лету с amdify команды amdify :

volo amdify <filename>

Просто передайте желаемое имя файла.

Вы также можете автоматически переименовать загруженный файл. Например, вы можете добавить файл с именем jquery.pluginName.1.3.min.js , но это не удобный файл для ссылки в ваших сценариях. Вы можете передать новое имя в качестве последнего параметра команде add , и Volo переименует файл.

Подводя итог, мы можем установить этот псевдо-плагин jQuery из репо, набрав следующее:

volo add userName/RepoName/v1.3#jquery.pluginName.1.3.min.js newName.js

Volo загрузит указанный репозиторий, извлечет только указанный файл для плагина, попросит вас преобразовать его в AMD-совместимый и поместит в ваш проект под новым именем. Это много контроля и автоматизации в очень простой в использовании команды.

Теперь давайте перейдем к Volofiles.

Volofiles

Volofiles позволяют автоматизировать задачи, создавая макроподобные команды. Например, пользователи CoffeeScript и SCSS могут вручную выполнить следующие команды для компиляции своих файлов:

coffee -c coffee-lib/ -o lib/
coffee -c app.coffee
sass css/main.scss css/main.css

Это много команд для многократного выполнения. Естественно, можно добавить эти команды в файл bash, но для автоматизации нескольких операций более чем вероятно использование полуосложного файла bash или нескольких файлов bash. С Volo вы создаете файл с именем volofile . Внутри этого файла вы создаете объект JavaScript, который содержит команды, которые вы хотите выполнить. Затем вы можете просто вызвать их, как если бы они были родными командами.

Вот пример volofile с использованием общих параметров:

module.exports = {
    ‘hi’: {
        ‘summary’ : ‘A command to say Hello’,
 
        ‘doc’ : ‘Enter Doc Text Here or Load a file’,
 
        ‘validate’ : function(namedArgs, arg1){
            if(namedArgs.cancel == «true»){
                return new Error(‘The «cancel» parameter has been set’);
            }
        },
 
        ‘run’ : [
            ‘echo «Hello World»‘,
            ‘echo «How are you Today?»‘
        ]
    },
    ‘nextCommand’ : {
        …
    }
}

Затем вы можете набрать volo -h для просмотра этих команд и их сводки. Ввод volo hi -h показывает, что находится в поле doc . Ключ validate является необязательным, и вы можете использовать его для тестирования, чтобы при желании выйти, если возникнет проблема. И последнее, но не менее важное: у нас есть свойство run , которое содержит список команд для выполнения. Вы можете ввести простую строку или массив строк, и Volo будет обрабатывать и запускать каждую из них соответственно.

С помощью приведенной выше команды я смогу набрать:

volo hi

Чтобы получить вывод, или:

volo hi cancel=true

Для запуска оператора if и выхода с предоставленным сообщением об ошибке. Это, вероятно, самый простой из примеров, и у вас есть гораздо больше вариантов, доступных при создании ваших собственных команд.

Я упоминал, что Volo обрабатывает каждую строку в свойстве run . В приведенном выше примере используется параметр «последнее средство». Сначала Volo ищет определенные характеристики в ваших командах и выполняет строку в стандартном терминале, только если не может определить, что вы хотите. У вас есть два варианта до этого, и они называются « v » и « n ».

Ключевые слова ‘ `v` ‘ и ‘ `n` ‘

Эти два ключевых слова позволяют вам вводить пользовательские функции в строки выполнения. Если вам нужно читать файлы, выполнять процессы или выполнять другие задачи, связанные с ОС, вы должны использовать ключевое слово « v ». Простое написание команды (например, rm file.js ) работает только в операционных системах, которые поддерживают данную команду. Используя команды v , вы гарантируете межплатформенную поддержку вашего volofile . Например, вы можете добавить следующую строку выполнения, если хотите скопировать файл из одного места в другое:

run : ‘v.copyFile file_one file_two’

Эта команда кроссплатформенная. Чтобы увидеть полный список параметров ‘ v ‘, взгляните на исходный файл . Вы можете добавить параметры с пробелом (как в терминале) вместо использования скобок.

Далее у нас есть ключевое слово n , которое отображается на исполняемые модули node.js. Если вы укажете команду под ключевым словом n , Volo проверяет, может ли она найти исполняемый файл node.js в личной папке node_modules текущего проекта, и возвращается к глобальной папке модулей node.js, если она не найдена.

Node.js, или, точнее, NPM, имеет очень большую коллекцию качественных инструментов разработки, созданных многими умными и творческими людьми.

Volo использует этот огромный ресурс, позволяя вам вставлять их исполняемые файлы прямо в ваши Volofiles. Джеймс Берк даже создал шаблон для создания собственных модулей node.js специально для Volo, но мы вернемся к этому через минуту.

Примером использования ключевого слова n является модуль CoffeeScript. Если вы хотите скомпилировать каталог, содержащий файлы CoffeeScript, мы можем написать следующую команду:

‘run’ : ‘n.coffee -c coffee-lib/ -o lib/’

Даже если CoffeeScript не установлен глобально, вы можете убедиться, что он будет работать на всех ОС из локальной папки node_modules .

Теперь вы можете использовать шаблон команды, который я упомянул ( скачать здесь , кстати), чтобы создать повторно используемую команду Volo для использования во всех ваших проектах. Например, если у вас есть модуль для резервного копирования вашего приложения, вы можете включить его во все свои проекты.

Создайте стандартный модуль NPM, который экспортирует вышеупомянутые свойства ( summary , run т. Д.) И требует наличия модуля в вашем Volofile.

Итак, добавив ваш пакет в NPM, вы можете просто набрать:

npm install commandName

И в вашем volofile, просто введите:

module.exports = {
    ‘commandName’: require(‘node_modules/commandName/index’)
};

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

Теперь, когда теория не подходит, давайте рассмотрим пример из реальной жизни. Мы создадим приложение, используя Volo.

Начиная

Volo — это пакет NPM, поэтому установить его так же просто, как:

(sudo) npm install -g volo

Для этой статьи я подумал, что создам небольшую веб-страницу для создания карты вашего региона, показывающей, кто является мэром FourSquare ваших любимых сайтов. Это не невероятная глубокая идея, но она заставит Воло пройти через все это.

Итак, для начала нам нужен репо. Вы можете найти несколько начальных шаблонов, созданных специально для Volo, просто выполнив поиск по GitHub. Шаблон по умолчанию поставляется с необходимыми потребностями: простой HTML-скелет и папка JavaScript с настройкой AMD barebone.

Вы также получаете volofile с командой build для компиляции файлов JavaScript и CSS проекта.

Я не собираюсь использовать стандартный шаблон, поскольку я хотел бы иметь еще несколько ресурсов. После быстрого поиска в GitHub я нашел официальный шаблон, который содержит настройки по умолчанию, среду начальной загрузки и другие ресурсы.

Итак, чтобы создать наш новый проект (который я назвал «turf»), вы можете просто напечатать следующее в окне терминала:

volo create turf volojs/create-responsive-template
cd turf

Это создаст папку проекта и загрузит снимок указанного репо. Далее для загрузки других ресурсов. Очевидно, мы будем использовать jQuery, поэтому давайте добавим его:

volo add jquery

Нам также нужен способ отображения карты на странице. Карты Google приходят на ум, поэтому мы будем использовать библиотеку с именем gmaps . Файл JavaScript содержит всю библиотеку; следовательно, нам не нужна остальная часть репо. Кроме того, вы можете видеть, что библиотека хранится в переменной с именем GMaps , и для нее требуется API карт Google в качестве зависимости.

В этом есть одна небольшая проблема: API Карт Google не совместим с AMD и представляет собой асинхронную библиотеку.

Когда вы загружаете один URL, он продолжает загружать другие ресурсы самостоятельно. Это делает использование стандартной require.js проблемой, но есть плагин, который обрабатывает именно эту ситуацию. Это часть репо, называемая «requirejs-plugins», но опять же, нам не нужен весь репо. Итак, введите следующее в окне терминала:

volo add requirejs-plugins#src/async.js

С помощью плагина async мы можем загрузить наши специальные асинхронные зависимости.

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

Преобразуйте библиотеку в AMD-совместимую.
Используйте функцию shim require.js для добавления файлов не AMD.

Я покажу вам, как использовать оба варианта. Чтобы конвертировать файл, просто добавьте его. Volo автоматически обнаружит, что файл необходимо конвертировать:

volo add HPNeo/gmaps#gmaps.js

Volo был создан с особым отношением к GitHub; он понимает GIT-репозитории, а также ветки и теги.

Согласно странице проекта Github, он основан на API карт Google. Существует небольшая проблема с вводом URL-адреса, поскольку он содержит неподдерживаемые символы (знак равенства). Итак, давайте использовать заполнитель; просто введите googlemaps и нажмите ввод. Далее нам нужно указать, что мы хотим экспортировать. Введите GMaps (с двумя заглавными буквами; это имя переменной) и нажмите Enter. Volo закончит преобразование и добавит его в папку js/lib .

Почему папка js/lib ? Если вы посмотрите на файл package.json в корне вашего проекта, вы увидите запись baseUrl в свойстве amd . Это сообщает Volo, куда поместить все загруженные файлы JavaScript. На самом деле Воло ищет несколько мест, чтобы решить, куда положить вещи:

свойство baseDir в записи с именем volo
свойство baseUrl снова под volo
baseUrl под amd как у нас здесь
папка js в вашем текущем каталоге
папка scripts в вашем текущем каталоге

Если ни одно из этих мест не существует, Volo помещает файл в текущий каталог.

После установки модуля нам все еще нужно заменить заполнитель, созданный для API Карт Google. Откройте файл www/js/lib/gmaps.js и замените заполнитель в первой (или второй) строке следующим www/js/lib/gmaps.js :

async!http://maps.google.com/maps/api/js?sensor=false&amp;libraries=places

Это говорит Volo включить плагин async и передать ему URL для API Карт Google.

Модуль GMaps теперь полностью установлен, но он требует от вас ввода определенных координат долготы и широты — что большинство пользователей не знают. Поэтому у нас должен быть какой-то плагин автозаполнения, который преобразует названия локаций в координаты.

После еще одного быстрого поиска в Github я обнаружил плагин jQuery под названием geocomplete от ubilabs. Он также не совместим с AMD, но мы будем использовать функцию shim require.js. В терминале введите следующую команду:

volo add -amdoff ubilabs/geocomplete#jquery.geocomplete.js geocomplete

Опция amdoff запрещает Volo конвертировать файл, а конечный параметр переименовывает файл из jquery.geocomplete.js в jquery.geocomplete.js . Это не обязательно, но делает ссылки более удобными.

Теперь откройте файл www/js/app.js и замените объявление конфигурации require.js вверху:

requirejs.config({
    baseUrl: ‘js/lib’,
    paths: {
        app: ‘../app’
    },
    shim: {
        ‘geocomplete’ : {
            deps: [‘jquery’, ‘async!http://maps.google.com/maps/api/js?sensor=false&amp;libraries=places’]
        }
    }
});

Просто для запуска настроек, которые уже были, baseUrl сообщает require.js, где искать относительные файлы, а опция paths.app сообщает require.js, что если имя модуля имеет ссылку на местоположение с именем «app», то заменить на то, что указано (‘../app’).

Раздел shim — это то, что я добавил в файл. Он сообщает require.js для первой загрузки jQuery и API Карт Google, когда кто-то загружает файл с именем geocomplete . При желании вы можете установить другое свойство с именем export, имя переменной для экспорта. Нам не нужно ничего экспортировать, потому что это плагин, который присоединяется к объекту jQuery.

На данный момент у нас есть файлы, необходимые для отображения карты и получения необходимых координат. Мы не написали никакого кода, но у нас есть все зависимости.

Схема

Чтобы начать создание прототипа нашего приложения, нам нужно написать немного HTML. Откройте файл index.html и удалите все внутри тегов body, кроме элемента <script /> внизу. Вы должны остаться с файлом, подобным следующему:

<!DOCTYPE html>
<html>
<head>
    <meta charset=»utf-8″>
    <meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
    <link href=»css/app.css» rel=»stylesheet»>
</head>
<body>
    <script async data-main=»js/app» src=»js/lib/require.js» charset=»utf-8″></script>
</body>
</html>

Затем добавьте поле ввода текста для поля поиска и заполнитель для фактической карты. Ваша новая область тела должна выглядеть примерно так:

<body>
    <div class=»container»>
        <div class=»row»>
            <div class=»span8 offset2″>
                <div class=»row text-center»>
                    <input class=»input-xxlarge» id=»search»>
                </div>
                <div class=»row text-center»>
                    <div id=»map»></div>
                </div>
            </div>
        </div>
    </div>
    <script async data-main=»js/app» src=»js/lib/require.js» charset=»utf-8″></script>
</body>

Это немного больше, чем основы, так что он соответствует правилам начальной загрузки CSS. Я дал текстовому вводу идентификатор search и <div /> идентификатор map . Теперь давайте откроем файл JavaScript.

Volo — это приложение, которое помогает внешним разработчикам автоматизировать их процессы.

Я сломаю это для тех из вас, кто новичок в require.js. Основная причина использования чего-то вроде require.js состоит в том, чтобы убедиться, что зависимости ваших скриптов загружаются тогда и только тогда, когда ваш скрипт действительно нуждается в них. Это увеличивает общую скорость вашего сайта и упрощает ваши HTML-файлы (вам не нужно ссылаться на множество скриптов).

Вы можете увидеть скрипт внизу HTML-файла, указывающий на библиотеку require.js, и он также имеет атрибут data-main который автоматически запускается, когда require.js готов.

Если вы откроете js/app.js , наш измененный раздел конфигурации и оператор require будут внизу. Обратите внимание, что вам не нужно расширение файла. В индексном файле мы js/app (без .js ) и здесь загружаем app/main .

Обычно ссылка на app/main будет отображаться в файл с именем main.js внутри папки с именем app (все относительно папки js/lib ). Но помните, в конфиге мы говорили, что любая ссылка на местоположение, называемое app , должна быть заменена на ../app . Вместо поиска js/lib/app/main.js , require.js будет получать js/app/main.js

Затем откройте js/app/main.js , удалите все и введите следующее:

define([‘jquery’, ‘gmaps’, ‘geocomplete’], function ($, gmaps) {
    $(document).ready(function () {
         $(«#search»).geocomplete();
    });
});

Первый параметр — это массив наших зависимостей. Вторая — это функция с именами параметров для jQuery ( $ ) и GMaps ( gmaps ). Помните, что geocomplete — это плагин jQuery, поэтому нет причин указывать ему соответствующий параметр.

Функция, передаваемая как второй параметр, выполняется после завершения загрузки зависимостей.

Внутри этой функции мы выполняем метод geocomplete() когда документ готов.

Теперь вы можете открыть страницу в своем браузере, и, если все прошло хорошо, в текстовом поле должно появиться сообщение «Введите местоположение». Начните печатать, и вы увидите некоторые результаты.

Далее нам нужно обработать событие, когда найдено совпадение, то есть когда пользователь нажимает клавишу Enter на названии места. Это следующие события: geocode:result и geocode:error . Добавьте код для обработки этих событий:

$(document).ready(function () {
    $(«#search»).geocomplete()
    .bind(«geocode:result», function(event, result){
        //On Result
    })
    .bind(«geocode:error», function(event, result){
         alert(«Location not Found»);
    });
});

Следующим шагом является получение широты и долготы и создание новой карты. Лат / лонг хранятся в свойствах с именем geometry.location.hb и geometry.location.ib соответственно. Добавьте следующий код в обработчик geocode:result :

var lat = result.geometry.location.hb;
var lng = result.geometry.location.ib;
 
var map = new gmaps({
    div : «#map»,
    lat : lat,
    lng : lng,
    height : ‘380px’
});

Мы храним координаты и загружаем новую карту. Создать карту очень просто: мы передаем идентификатор контейнера вместе с координатами и высотой.

Теперь вы сможете искать и отображать карту. Далее нам нужно связаться с Foursquare и отобразить «мэров» вашего города.

Взаимодействие с Foursquare

Сначала нам нужен интерфейс для API-интерфейса foursquare. Чтобы сэкономить время и остаться в теме, я создал репо, который мы можем клонировать. Итак, в окне терминала введите:

git clone https://github.com/gmanricks/MayorAPI www/foursquare

Это загружает репозиторий и помещает его в папку с именем foursquare в каталоге www .

Затем откройте foursquare.php и вставьте свой client-id и client-secret в константы класса. Если у вас еще нет этой информации, вы можете получить ее в Foursquare , зарегистрировав приложение.

Другой файл в data.php ( data.php ) получает координаты карты через параметры GET и возвращает объект JSON. Итак, чтобы добавить мэров на карту, нам нужно переписать обработчик события geocomplete:result :

.bind(«geocode:result», function(event, result){
    var lat = result.geometry.location.hb;
    var lng = result.geometry.location.ib;
    $.get(«foursquare/data.php?lat=» + lat + «&lng=» + lng, function(d){
        var map = new gmaps({
            div : «#map»,
            lat : lat,
            lng : lng,
            height : ‘380px’
        });
        var places = JSON.parse(d);
        if(places.error){
            alert(«The rate limit has been hit»);
        }
        else{
            for (var index in places) {
                var place = places[index];
                if(place.mayor.photo){
                    var html = ‘<div class=»mayor»>’
                             + ‘<div class=»person»>’
                             + ‘<img class=»img-circle img-polaroid» src=»‘
                             + place.mayor.photo.prefix + «60×60» + place.mayor.photo.suffix
                             + ‘» />’
                             + ‘</div>’
                             + ‘<div class=»label label-inverse»>’ + place.mayor.name + ‘</div>’
                             + ‘</div>’;
                    map.drawOverlay({
                        lat : place.lat,
                        lng : place.lng,
                        content : html
                    });
                }
            }
        }
    });
})

Сначала мы определяем переменные lat и lng , но вместо немедленного создания карты мы ждем завершения нашего Ajax-запроса. Мы делаем около одиннадцати вызовов API за кулисами, так что это может занять десять или пятнадцать секунд.

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

Теперь вы можете открыть страницу и проверить ее; все должно работать! С небольшим стилем и немного дизайна, это может выглядеть примерно так:

Оптимизация с помощью Volo

Наше приложение готово, и последний шаг — его оптимизация. Давайте сначала удалим файлы, которые мы не используем. В папке js/app/ вы можете удалить все, кроме файла main.js В папке js/lib/ удалите файлы с именами appCache.js и network.js . Вам также не нужен файл manifest.webapp , но вы можете сохранить его, если пожелаете.

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

module.exports = {
    ‘build’ : {
        ‘summary’ : ‘Command to compile the source files’,
        ‘run’ : [
            ‘v.rm www-built’,
            ‘v.copyDir www www-built’,
            ‘v.rm www-built/js’,
            ‘node tools/r.js -o baseUrl=www/js/lib paths.app=../app paths.requireLib=require name=app include=requireLib out=www-built/js/lib/require.js’,
            ‘v.rm www-built/css’,
            ‘node tools/r.js -o cssIn=www/css/app.css out=www-built/css/app.css’
        ]
    }
};

Volo — это универсальный инструмент: вы получаете то, что вкладываете в него.

Это намного проще. Здесь мы создаем команду с именем build которая удаляет предыдущую встроенную папку, если она существует. Затем он копирует всю папку www в качестве основы для нашей скомпилированной версии. Далее мы удаляем каталог js (заменим его оптимизированной версией).

Затем мы запускаем оптимизатор require.js, чтобы скомпилировать файлы JavaScript в один файл. Вы можете заметить, что конечный продукт переименовывается в require.js ; это своего рода «хак», потому что на самом деле это не библиотека require.js. Но поскольку наш HTML-файл уже содержит ссылку на require.js , проще переименовать файл Javascript, чем анализировать все HTML-файлы и изменять ссылки на сценарии.

После завершения этой команды мы удаляем папку CSS (снова, чтобы заменить ее оптимизированной версией). И наконец, что не менее важно, мы снова запускаем оптимизатор require.js, на этот раз для CSS.

Теперь вы можете выполнить volo build из окна терминала, и Volo выполнит эту серию команд.

В вашем браузере вы можете перейти к папке, созданной www вместо папки www чтобы убедиться, что она все еще работает. На моем компьютере при создании проекта размер файла сократился вдвое, с чуть менее одного мегабайта до ~ 400 КБ. Вы можете получить его еще меньше, если уменьшите CSS.

Резюме

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

Подводя итог, Воло — универсальный инструмент: вы получаете то, что вкладываете в него. У вас есть несколько, но мощных команд, но истинная сила Воло заключается в его невероятной расширяемости и, в конечном счете, в его сообществе.

Так что ты думаешь о Воло? Будете ли вы создавать собственные команды Volo? Оставьте комментарий со своими вопросами и мнениями.

Спасибо за чтение.

Оптимизируйте свой процесс с Volo

Создание проектов

Поиск и получение информации о репо

Добавление файлов

Volofiles

Ключевые слова ‘ `v` ‘ и ‘ `n` ‘

Начиная

Схема

Взаимодействие с Foursquare

Оптимизация с помощью Volo

Резюме

Категории

Последние статьи

Рефакторинг Hudson God Class

Альтернативы синтаксиса Java лямбда

Morphia и MongoDB: развивающиеся структуры документов

OpenShift Express: развертывание приложения Java EE (с поддержкой AS7)

Интеграция jqGrid, REST, AJAX и Spring MVC

Оптимизируйте свой процесс с Volo

Создание проектов

Поиск и получение информации о репо

Добавление файлов

Volofiles

Ключевые слова ‘ v ‘ и ‘ n ‘

Начиная

Схема

Взаимодействие с Foursquare

Оптимизация с помощью Volo

Резюме

Категории

Последние статьи

Рефакторинг Hudson God Class

Альтернативы синтаксиса Java лямбда

Morphia и MongoDB: развивающиеся структуры документов

OpenShift Express: развертывание приложения Java EE (с поддержкой AS7)

Интеграция jqGrid, REST, AJAX и Spring MVC

Ключевые слова ‘ `v` ‘ и ‘ `n` ‘