Pull to refresh

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

Website developmentCSSJavaScriptCoffeeScript


Человек изобрел компьютеры, чтобы они выполняли за нас большую часть повторяющихся задач. Это позволяет нам экономить много времени и использовать его с максимальной пользой. И, так как эта статья о 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, которая дает понять системе, где лежат глобальные модули.

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



Заключение



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

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


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

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



Tags:gulpstylusjadehtmlcsscoffeescriptjavascriptnode.jsfront-endweb-разработка
Hubs: Website development CSS JavaScript CoffeeScript
Total votes 27: ↑22 and ↓5+17
Views29K

Popular right now