Автоматизированный шаблон для front-end проектов

Человек изобрел компьютеры, чтобы они выполняли за нас большую часть повторяющихся задач. Это позволяет нам экономить много времени и использовать его с максимальной пользой. И, так как эта статья о front-end разработке, в этой области таких задач много: компиляция css- и js-препроцессоров, сборка спрайтов, оптимизация изображений, минификация файлов и др.


Сейчас автоматизировать эти задачи нам помогают prepros, codekit, grunt, gulp и подобные инструменты.
У меня был опыт работы с каждым из 4 перечисленных, но остановился я на gulp по следующим причинам:

• Gulp менее требователен к ресурсам системы, чем GUI-программы;
• он очень быстрый. В сравнении с gulp-ом, grunt работает медленно. Настолько медленно, что я успевал переключиться с редактора на браузер и обновить страницу, а новые стили все еще не были скомпилированы. Gulp с этим справляется куда лучше;
• способ описания тасков в gulp мне показался проще.

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

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

Этот шаблон не является панацеей. У каждого свои потребности и, вероятно, для максимальной пользы вам придется настроить его под себя.

Что под капотом?

Автоматизированные задачи

• Компиляция Stylus;
• Компиляция CoffeeScript;
• Компиляция Jade-шаблонов;
• Сборка спрайтов и генерация стиля для них (ранее я публиковал статью об этом);
• Добавление вендорных префиксов к свойствам;
• Минификация css и js;
• Оптимизация картинок.

Файловая структура

Первый уровень проекта — папки builder, src и built.

builder — папка в которой лежит gulpfile с тасками для gulp, где будут лежать node-модули и откуда буду запускаться все команды в консоли.

В папке src лежат все исходные файлы проекта, а папка built создается и изменяется автоматически при выполнении команд gulp-а.

Содержимое папки src

• assets
  
  
  • styles — стили проекта
  • images
    
    • design — изображения, предназначенные для оформления сайта
    • content — изображения, используемые в контенте страницы
    
    
  • scripts
    
    • local — скрипты, написанные в рамках этого проекта
    • vendor — сторонние библиотеки
    
    
  
  
• templates
  
  
  • pages — шаблоны страниц
  • blocks — блоки, из которых будут собираться страницы
  
  

Как все работает?

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

Все gulp-плагины загружаются автоматически из package.json с помощью плагина gulp-load-plugins. Это позволяет уменьшить объем gulpfile.coffee.

Все пути к файлам и папкам вынесены в переменные и описаны в файле config.yml.

Задачи

• sprite — генерация спрайта на основе картинок, которые лежат в папке config.paths.src.sprites.images.all;
  
• coffee — компиляция .сoffee из папки local;
  
• vendor — перенос скриптов из папки vendor в built;
  
• stylus — компиляция .styl;
  
• images — перенос картинок в built папку;
• jade — компиляция .jade-шаблонов;
• autoprefixer — добавление вендорных префиксов (настройки по умолчанию);
• scripts:min — минификация скриптов;
• styles:min — минификация стилей;
• images:min — оптимизация картинок;
• watch — отслеживание изменений в файлах и запуск необходимого таска.

Группы задач

• default — компилирует шаблоны, скрипты, стили, собирает спрайты;
• dev — включает в себя default и задачу watch;
• minify — сжимает файлы и оптимизирует картинки, которые были созданы после работы default;
• prod — таск который запускается на сервере или перед заливкой на сервер. Он выполняет группу default и после этого запускает minify.

Системные требования

• node.js;
• gulp;
• coffee-script — для запуска gulpfile.coffee. При желании можно перевести .coffee в .js.
  

Установка

1. Если у вас не установлен node.js, скачайте и установите. Вместе с node.js у вас установится пакетный менеджер npm;
2. Затем установите coffee-script и gulp, введя в консоли команду (понадобятся права администратора)

   npm i -g coffee-script gulp
   

   
   

После этих шагов, можно приступать к инициализации самого проекта.

1. Скачайте и распакуйте архив с шаблоном;
2. в консоли откройте папку builder и введите npm i. Пойдет процесс скачивания и установки всех перечисленных в package.json модулей.
   

После завершения установки, можно смело напечатать gulp в консоли и отработает группа задач default

Проблемы

Если при запуске gulp система выдает ошибку о том, что не найден модуль coffee-script/register, нужно установить переменную NODE_PATH, которая дает понять системе, где лежат глобальные модули.

Ссылки на решения:

• http://stackoverflow.com/questions/9587665/nodejs-cannot-find-installed-module-on-windows
• http://stackoverflow.com/questions/12594541/npm-global-install-cannot-find-module

Заключение

Шаблон будет постоянно дорабатываться. В ближайшее время я собираюсь добавить следующий функционал:

• набор миксинов для Stylus;
• JSHint;
• конкатенация js;
• bower.

Также в планах подготовить grunt-версию с аналогичным фунционалом.

Быстрые ссылки

• Репозиторий шаблона — https://github.com/Krekotun/fabium
  
• node.js
• Gulp
• Stylus
• CoffeeScript
• Jade