Всякий раз, когда вы приступаете к работе над проектом, приходится повторять определенные задачи и выполнять настройку структурных компонентов: создавать новые папки, выбирать фреймворк, ставить задачи касающиеся разработки.
Было бы намного проще один раз выполнить все необходимые настройки параметров, а затем просто повторно их использовать. Самый простой способ добиться подобного результата, это воспользоваться помощью своего рода генератора — например, Yeoman Generator — или специализированных инструментов, таких как INIT. Подобные инструменты могут использоваться совместно с генераторами и даже функционировать на их основе.

Вполне возможно, что вам уже приходилось пользоваться веб приложением Yeoman генератора. Оно запускает проект, связанный в HTML5 Boilerplate и добавляет такие вещи, как Compass, Sass Bootstrap, сервер предварительного просмотра с LiveReload, CoffeeScript, JSLint, Bower и многое другое. Хотя это это приложение и является хорошей отправной точкой для выполнения автоматизации базовой конфигурации проекта, вам, скорее всего, потребуется обширная адаптация в соответствии с вашими задачами.

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

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

Знакомство с INIT.

Во-первых, позвольте мне объяснить, что представляет из себя INIT. Основанный на популярном HTML5 Boilerplate проекте, INIT позволяет добавить современные инструментальные средства, такие как Sass, Grunt, RequireJS и Karma (для автоматизированного тестирования). Его довольно просто настраивать и создавать требуемые вам расширения. Вам больше не придется беспокоиться о тех процессах, которые зачастую приходится выполнять вручную — или, о которых вы и вовсе забываете.

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

Вам больше не придется копировать установленные по умолчанию файлы проекта или скачивать специализированные библиотеки, такие как jQuery, Modernizr и Normalize, которые вы наверняка используете в большинстве проектов. INIT работает на таких операционных системах, как Mac OS X, Windows и Linux и поддерживает все основные браузеры, включая Internet Explorer 8 и почти все мобильные браузеры.

INIT также позволяет организовать различные этапы рабочего процесса. При разработке страницы вам наверняка будет удобно использовать расширенный CSS код. Однако после проведения ряда корректировок вам потребуется уменьшенный CSS файл, который будет иметь свою версию. INIT предоставляет вам все эти возможности. Он также выступает в качестве статического генератора файла, поскольку поддерживает HTML конкатенацию (операция склеивания объектов линейной структуры, обычно строк) за пределами блока.

Для того, чтобы подробнее узнать о философии организации рабочего процесса с использованием INIT и о существующем наборе функций, читайте статью под названием “Уменьшение объема шаблонного кода в проектах, связанных с клиентской частью веб-сайта” на сайте The Nitty Gritty.

INIT имеет несколько иной набор вспомогательных инструментов, нежели веб-приложение Yeoman генератора, в том числе структуру рабочего процесса, которую легко расширить и настроить.

В то время как Yeoman веб-приложения позволяют проводить простое тестирование с помощью Mocha и PhantomJS, INIT использует более функциональный набор тестов Jasmine и Karma для запуска тестирования. Разработчики INIT не предполагали, что вам потребуются такие языки, как CoffeeScript, Compass или LiveReload, поэтому по умолчанию они не устанавливаются. Однако, если у вас действительно существует потребность в их использовании, то вы легко можете добавить их через специализированные плагины.

INIT требует наличия нескольких библиотек, которые обязательно следует установить на ваш компьютер:

• Node.js. Техническая основа Grunt.
• Bower. Для управления библиотеками, связанными с клиентской частью сайта.
• Grunt.js и Grunt CLI. Используются для запуска INIT задач.

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

git init
npm install -g grunt-cli
npm install
git add .
git commit -m 'Initial commit'

Эта команда позволит автоматически установить все необходимое для запуска Grunt задач. В результате её выполнения также будет создана папка components, в которой будут находиться все зависимости, управляемые Bower.

Установка INIT с помощью командной строки.

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

Папки, файлы и стратегическое планирование.

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

Настройка редактора и параметры кода.

У INIT есть достаточно неплохие указания, которые помогут обеспечить последовательность вашего кода. Основные настройки для редактора кода настраиваются в .editorconfig файле:

[*]
end_of_line = lf
indent_style = tab
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[.htaccess]
indent_style = space
indent_size = 4

[*.json]
indent_style = space
indent_size = 2

Вы можете выбрать использование табуляции или пробелов для отступа, набор символов и стиль строки для различных типов файлов. Общие настройки INIT установлены по умолчанию, но могут быть легко изменены в соответствии с вашими требованиями. Если ваш редактор распознает EditorConfig файлы, то эти настройки будут применены к проекту автоматически. Файл EditorConfig поддерживается через плагин в таких приложениях, как Sublime Text, WebStorm, Vim, Emacs, TextMate и многих других. Полный список и ссылки можно найти на официальном веб-сайте.

INIT также позволяет выполнить конфигурацию некоторых других объектов. Например, .gitignore файл содержит все каталоги и файлы, которые должны быть исключены из конкретной версии, присвоенной Git, а .jshintrc файл содержит все правила, которые должны применяться в том случае, когда JSHint выполняет проверку кода.

Наконец, .htaccess файл включает настройки Apache сервера. Если вы используете какой-то другой сервер, то обязательно нужно проверить официальный репозиторий на предмет поддержки H5BP. Файл конфигурации сервера может снизить пропускную способность, разослав сжатые GZIP файлы клиенту и, установив заголовки кэша таким образом, чтобы файлы кэшировались в браузере. Он также настраивает параме� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров