Опубликовано автор в категориях Верстальщику.

Init logo

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

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

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

Как это принято в open-source мире, вы можете расширить Yeoman как захотите, изменяя доступные генераторы согласно вашим потребностям. Но что именно вы добавили бы в обычный генератор? Вы думали о хорошем рабочем процессе, и какими инструментами обеспечить большее удобство?

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

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

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

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

Для большей информации о рабочем  процессе с INIT, смотрите Nitty Gritty’s “Reducing Boilerplate Code in Front-End Projects.”

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

Если в Yeoman  исползуется простое тестирование, с помощью Mocha и PhantomJS, INIT использует более функциональный набор тестов Jasmine и Karma.

INIT подразумевает, что вам не понадобятся CoffeeScript, Compass  или Livereload, поэтому не устанавливает их по умолчанию. Однако возможно с легкостью добавить их с помощью плагинов, если это будет необходимо.

INIT требует установления некоторых важных элементов на вашей машине:

  • Node.js
    Техническая база Grunt
  • Bower
    Для управления фронтенд зависимостями
  • Grunt.js and Grunt CLI
    Запускать задачи INIT

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

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

Это позволит установить все необходимое  для автоматического запуска задач Grunt. Это также создаст папку компонентов, которая содержит все зависимости необходимые 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 Server Configs. Если вы используете другой сервер, пожалуйста, проверьте, что официальный репозиторий H5BP. Файл конфигурации сервера может снизить потребление трафика, отправляя сжатые GZIP файлы клиенту и, установив заголовки кэша, для кеширования файлов  в браузере. Он также настраивает параметры безопасности для защиты вашего сайта от распространенных видов атак.

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

Настройте задачи автоматических помощников.

Говоря про автоматические задачи ранее, я упоминал Grunt. Он автоматизирует задачи, которые обычно запускают вручную на этапе разработки проекта. Вот некоторые задачи встроенные в INIT:

  • JSHint и RequireJS
  • Парсинг Sass
  • Кастомные сборки Modernizr
  • Оптимизация изображений с помощью ImageMin
  • Объединение, минимизация и управление файлами
  •  Karma юрит-тесты

Много чего может быть добавлено в проект; INIT только обеспечивает наиболее полезные и часто используемые задачи, чтобы сохранить ваше время. Официальная документация содержит демонстрацию, как добавить LiveReload и SVG-Min в виде задач. Несколько других официальных плагинов позволит вам сэкономить еще больше времени.

Процесс сборки.

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

  • grunt dev
    Это проверяет ваш JavaScript код с помощью JSHint, компилирует файлы Sass и создает ваши  статические страницы.
  • grunt build
    Это оптимизирует картинки, создает пользовательский Modernizr build и запускает Karma тесты. Эту задачу вы используете для генерации  продакшн файлов.
  • grunt travis
    Это запускает юнит-тесты с помощью Karma в непрерывном инструменте интеграции (в нашем случае, Travis CI).
  • grunt watch
    Это запускает задачу dev при каждом сохранении исходного файла, так что вам не придется постоянно переключаться между браузером, редактором и командной строкой.

Терминал скажет вам, если что-то пошло не так, например в JavaScript есть синтаксическая ошибка или Sass не может найти mixin.

Автоматические тесты: Будь уверен, что делаешь все правильно.

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

JSHint, например, «жалуется» когда вы делаете синтаксическую ошибку.  Jasmine позволяет писать тесты для проверки кода. Karma запускает эти тесты в браузере.

Эти автоматизированные юнит-тесты гарантируют, что код будет работать отлично. Хотя и не заменяют ручное тестирование вами, они внушают уверенность и экономят время, указывая на проблемы, когда они появляются. Нет практически никаких ограничений на написание юнит-тестов. Чтобы узнать о написании более продвинутых юнит-тестов, читайте статью Guido Kessels’  “Advanced Unit Testing Techniques in JavaScript”.

По умолчанию, INIT использует Jasmine как тестовый движок, Karma для запуска тестов, с ними управляться гораздо проще, чем с Mocha. Но если вам не нравится Jasmine или Karma, можно выбрать любой инструмент, имеющий задачу Grunt.

Статический генератор веб-сайта.

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

В pages.json, вы можете настроить HTML файлы для генерации.  Части используемые для построения этих файлов обычно хранятся в каталоге шаблонов.  Чтобы сказать INIT как их собрать, нужно определить цель, назвать исходные составляющие и указать файл, чтобы сохранить результат:

{
 
"index": {
 
"src": [
 
"templates/header.html",
 
"templates/index.html",
 
"templates/footer.html"
 
],
 
"dest": "temp/index.html"
 
}
 
}

Для того, чтобы не начинать с нуля, INIT поставляется с предварительно настроенным файлом index.html,в котором можно задать собственные параметры.

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

Задайте собственные параметры!

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

И хотя он является надежной отправной точкой для проектов, я советую вам адаптировать его согласно вашим привычками и рабочему процессу кодирования. Если там отсутствуют любимые вами инструменты – добавьте их; если наоборот присутствуют лишние – удалите их. Сделайте INIT вашей идеальной основой.

Я использую INIT для больших проектов и сейчас для большинства проектов, настраивая его согласно моим требованиям (и требованиям команды разработчиков), которые меняются от проекта  к проекту. Статический генератор файлов позволяет мне работать независимо от команды бек-ендов, и в то же время показывать свой прогресс прямо в браузере.

Вывод

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

INIT не призван заменить Yeoman. На самом деле можно использовать INIT с помощью Yeoman. Генератор Yeoman доступен — generator-init — так что вы легко можете создать свою собственную сборку INIT , используя npm install -g yo и npm install -g generator-init.

Мне бы хотелось послушать ваши мнения по функциональности, а также идеи и взгляды по использованию INIT. Все вопросы которые вы хотите задать автору размещайте пожалуйста на странице оригинальной статьи  Kickstart Your Project With INIT And Grunt

С английского перевела Виктория Павлова.

Оставить комментарий

  • (не будет показан)