Программы для frontend разработчика. Необходимый минимум для фронтенд-разработчика. Вот некоторые способы начать

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

Проект 1 – Одностраничная адаптивная верстка

Цель: воссоздать pixel perfect дизайн и решить проблемы адаптивной верстки

Для более быстрого старта в веб разработке оцените проект: Быстрый старт в веб-разработке

Проект 3 - Маленькая игра-викторина, написанная на языке JavaScript

Цель: Создать простую игру на JavaScript и jQuery.

Особенность изучения JavaScript для начинающих фронтенд разработчиков в том что бывает сложно выбрать проект по своим силам. Отличным вариантом для начинающего веб программиста может стать разработка викторины . Это поможет вам разобраться в Document Object Model . Уровень сложности викторины будет зависеть только от вас. Начните с создания простой игры, в которой будет несколько вопросов с возможностью выбора варианта ответа. Вы узнаете много нового о работе с данными. В этот раз не стоит тратить много времени на дизайн того, что вы создаете. Я бы порекомендовал вам использовать CSS-фреймворк, например: Bootstrap, дабы быстро стилизовать вашу игру.

Проект 4 - Сделайте аналог Giphy, используя открытый API

Цель: Создать веб-приложение, которое использует Giphy’s API

Как только вы получите опыт в работе с DOM и JavaScript, я рекомендую изучить шаблонизацию данных и их отображение в DOM. Отличная цель для начинающих фронтенд разработчиков - создать аналог веб-сайта giphy , используя Giphy API . Я рекомендую их API, потому что у них нет проблем с получением ключа, и форматы запросов-ответов там достаточно простые. Используя их API, создайте небольшое веб-приложение, которое будет делать следующее:

• Отображать популярные gif-файлы при загрузке приложения
• Позволять искать определенные gif-файлы
• Создать кнопку «Загрузить больше»

В процессе разработке этого проекта вы узнаете много нового. Одна из ключевых вещей – работа с асинхронными запросами . Для этого вы можете использовать JavaScript или jQuery. Ваша цель состоит в том, чтобы начать работу с асинхронным кодом. Поскольку ваше приложение будет расти и усложняться, вам нужно подумать о том, как организовать ваш код. Для этого я рекомендую использовать паттерн name spacing .

Проект 5 - Веб-приложение Punk Beer

Цель: Использовать Punk Beer API для создания проекта, использующего шаблонизацию для отображения данных на странице. Попробуйте использовать какой-нибудь фронтенд фреймворк, например, React.

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

Верстка данного проекта во многом будет схожа с версткой предыдущего. Из нового: функции «корзина покупок» или «любимый товар». Добавьте быть возможность посмотреть отобранный список товаров. Я бы рекомендовал для начинающих фронтенд разработчиков углубиться в изучение фреймворков - это поможет расширить ваши возможности и получить общее представление о современной веб-разработки. Так как я активно работаю с React от Facebook, я бы советовал начать с него. Сперва это может показаться трудной задачей, поэтому сосредоточьтесь на создании веб-приложения поэтапно:

• Разместите данные на странице из запроса к API
• Добавьте строку поиска (через отдельный запрос к API)
• Добавьте функцию «любимый товар»
• Подключите react router и добавьте функциональность просмотра «любимых товаров»

Решение этих проблем позволит серьезно продвинуться в веб-разработке. Здесь я тоже рекомендую прибегнуть к использованию CSS-фреймворка. Я решил использовал Bulma для данного примера.

Совершенствуйтесь и создавайте

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

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

————————————————————————————————————————

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

Когда-то основная часть рабочего процесса фронтенд-разработчика состояла в редактировании файлов, их локальном тестировании (в меру возможностей) и пересылке на сервер через FTP. Мы измеряли свою крутость умением подчинить своей воле IE6 или добиться пиксельного соответствия в различных браузерах. Многим членам нашего сообщества - и мне тоже - не хватало опыта традиционного программирования. HTML, CSS и JavaScript - обычно в виде jQuery - осваивались самостоятельно.

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

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

Вот некоторые вещи, с которыми хотелось бы, чтобы все были знакомы и некоторые источники, которые можно использовать, чтобы подтянуть свои навыки. (Спасибо Полу Айришу (Paul Irish), Майку Тейлору (Mike Taylor), Ангусу Кролу (Angus Croll) и Владу Филипову (Vlad Filippov) за их вклад.)

JavaScript

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

Это значит, что вы прочитали «JavaScript: Сильные стороны », желательно больше одного раза. Что вы понимаете принцип работы структур данных вроде объектов и массивов; функции, в том числе как и почему их нужно вызывать и применять ; умеете работать с наследованием через прототипы; и можете справиться с асинхронностью.

Если ваши навыки работы с простым JavaScript оставляют желать лучшего, вот некоторые ресурсы, которые вас выручат:

• «Красноречивый JavaScript» : Замечательная книга (также доступна печатная версия), посвящённая основам JavaScript
• Тестовая оценка владения JS : подборка тестов с ошибками на различные темы по JavaScript; сможете ли вы переписать код тестов так, чтобы он заработал?
• - старенькая, но мощная вещь от Пола Айриша, демонстрирующая чему можно научиться, читая чужой код.

Система управления версиями файлов Git (и профиль на GitHub)

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

Хотите повысить свои навыки работы с Git?

Модульный принцип организации, управление зависимостями и тестовые сборки

Те дни, когда управление зависимостями сводилось к добавлению дополнительного скрипта или тега стилей на страницу, давно прошли. Даже если у вас не было возможности внедрить замечательные инструменты вроде RequireJS в процесс разработки на работе, вам стоит найти время изучить их в своем личном проекте или проекте вроде Backbone Boilerplate , так как преимущества, которые они в себе несут, трудно переоценить. RequireJS, в частности, делает возможной разработку с использованием небольших модульных файлов JS и CSS, а затем конкатенирует и минифицирует их с помощью своего инструмента оптимизации для дальнейшего использования.

Скептически настроены относительно разработки на основе модулей? Это не причина ничего не делать. По крайней мере, вам должны быть знакомы инструменты вроде UglifyJS или Closure Compiler , которые грамотно сжимают ваш код, а затем конкатенируют эти сжатые файлы перед выдачей результата.

Если вы пишете на чистом CSS - то есть не используете препроцессор вроде Sass или Stylus – RequireJS также поможет организовать ваши CSS файлы по модульному принципу. Используйте операторы @import в основном файле, чтобы загрузить зависимости для разработки и затем запустите средство оптимизации RequireJS для основного файла чтобы создать готовый для использования файл.

Инструменты разработчика, встроенные в браузер

За последние несколько лет инструменты для разработчиков, встроенные в браузеры, ощутимо усовершенствовались и теперь они могут существенно улучшить ваш опыт разработки, если вы научитесь ими правильно пользоваться. (Подсказка: если вы все еще отлаживаете код, используя alert , вы зря убиваете время.)

Вам наверняка стоит выбрать один браузер, чьи инструменты разработчика вы будете использовать на постоянной основе - на данный момент я склоняюсь к инструментам разработчика в Google Chrome - но не отказывайтесь полностью от инструментов в других браузерах, так как в них время от времени на основе откликов разработчиков добавляются новые полезные возможности. В Dragonfly от Opera, в частности, были добавлены некоторые возможности, выделяющие её инструменты разработчика на фоне других, например: (экспериментальный) CSS- профилировщик, настраиваемые горячие клавиши, удалённая отладка без необходимости USB-подключения, а также возможность сохранять и использовать пользовательские цветовые палитры.

Если вы не очень хорошо разбираетесь в браузерных инструментах разработчика, презентация «Чиним код jQuery» послужит отличным (и не слишком сфокусированным на jQuery) обзором отладки, который включает в себя описание процесса пошаговой отладки - того, что изменит вашу жизнь, если вы с этой презентацией ещё не знакомы.

Командная строка

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

• ssh для подключения к другой машине или серверу
• scp для копирования файлов на другую машину или сервер
• ack или grep для поиска файлов в проекте по строке или шаблону
• find для обнаружения файлов, чьи названия совпадают с данным шаблоном
• git для выполнения хотя бы базовых действий вроде add , commit , status и pull
• brew для использования Homebrew для установки пакетов
• npm для установки пакетов Node
• gem для установки пакетов Ruby

Если какими-то командами вы пользуетесь особенно часто, отредактируйте свой.bashrc , .profile или.zshrc (или что у вас там) и создайте для них альтернативные имена чтобы не набирать команды руками каждый раз. Также можно добавить альтернативные имена в файл ~/.gitconfig . Файлы с точками от Джанни Чиаппетта (Gianni Chiappetta) могут послужить отличным источником вдохновения.

Примечание: Если вы пользуетесь Windows, я не знаю, как вам помочь, разве что могу посоветовать Cygwin . Возможно, я не права, но принимать участие в жизни сообщества фронтенд-разработчиков с открытым кодом на машине с Windows существенно сложнее. Если посмотреть на вещи оптимистически, ноутбуки MacBook Air не очень дорогие, мощные и на удивление портативные, кроме того существуют Ubuntu или Unix.

Шаблонизация на стороне клиента

Не так давно для серверов было обычным делом отвечать на запрос XHR фрагментом HTML-кода, однако за последние 12-18 месяцев сообщество фронтенд разработчиков прозрело и начало требовать данных от сервера в чистом виде. Преобразование таких данных в HTML, который затем можно добавить в дерево документа, может оказаться трудоёмким и неудобным процессом, если иметь дело непосредственно с кодом. Вот когда в дело вступают библиотеки шаблонизации на стороне клиента : они позволяют использовать шаблоны, которые после добавления данных превращаются в строку HTML. Вам нужна помощь в подборе инструмента для шаблонизации? Схема для выбора шаблона от Герен Минс (Garann Means) поможет вам найти подходящий.

CSS-препроцессоры

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

Этот прекрасный генератор форм поможет вам в создании красивейших CSS логин-боксов и прочих input вещей, при минимальных временных затратах. Помимо форм на сайте этого проекта можно создавать и другие не менее красивые CSS элементы, в том числе кнопки и ленты.

Для любителей Twitter Bootstrap был создан этот генератор, благодаря которому вы сможете легко изменять начальные настройки стилей и приступить к прототипированию.

Переключатели и тумблеры на чистом CSS. Очень качественно и просто.

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

Компрессия для ваших CSS и JavaScript файлов без забот и проблем.

Полезная утилита, синхронизирующая вносимые через FireBug изменения с CSS файлами. Можете представить, какое количество времени вы себе сэкономите.

Этот сайт поможет вам отсортировать CSS по заданным критериям, приоритетам, селекторам и так далее. Очень удобная вещь.

Генератор индикаторов загрузки для AJAX и jQuery. Легок в использовании и кастомизации.

Этот тул поможет вам сгенерировать симпатичную ленточку. Ну вы понимаете, что я имею ввиду - они нынче повсюду.

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

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

Удобнейший апп для создания спрайтов. Просто перетаскиваете необходимые изображения, кликаете Generate и получаете sprite sheet. Пока работает только в Chrome Firefox.

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

Хотите легко и непринужденно создавать анимации с CSS? Тогда вам по ссылке. Задаете направление, координаты, смотрите анимацию и скачиваете исходный код.

Еще один инструмент для работы с CSS спрайтами. Тоже drag"n"drop интерфейс, но мне он кажется по-симпатичнее.

Если вы любитель препроцессора LESS, то возможно вам будет интересен этот инструмент, конвертирующий из CSS в LESS одним кликом.

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

SnipSave

Этот сайт предлагает вам хранить все свои CSS сниппеты в одном месте. У себя в библиотеке, то есть. Приятный интерфейс, работается с удовольствием.

Prefixr

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

HTML5 PLease

Можно назвать этот проект онлайн-помощником по HTML5. Сомневаетесь в использовании конкретного нового тега? Сайт подскажет, стоит ли его использовать. И если стоит, то как именно.

В данном материале, я хочу представить список инструментов которые помогают мне при разработке клиентской части приложения, сайта. Речь идет о Front-End разработки.

Кто такой Front-End разработчик?

После того, как сгенерировали необходимый шаблон время наступает верстать и работать с таблицей стилей.

Работа с CSS.

Есть очень много иструментов, генераторов для работы с CSS. Некоторые из них собраны вот в этой статье "Подборка генераторов CSS".

Сайт: http://habrahabr.ru/post/118056

В своей работе я сипользую только один генератор, это расширение CSSsir для браузера Mozilla Firefox. Простой и удобный в использовании инструмент, позволяющий в несколько кликов генерировать кросс-браузерный код основных CSS-свойств. Данный CSS3 генератор будет полезен не только web-мастерам и дизайнерам, но и обычным пользователям.

Сайт: https://addons.mozilla.org/ru/firefox/addon/csssir

Справочник CSS

Работа с динамикой сайта JavaScript и jQuery

Сервисы по работе с API jQuery.

jQuery Cheatsheet - Oscar Otero

JQuery Cheatsheet в HTML со ссылками на оригинальной документацию API. Удобен тем что собрано все в одном мсете, можно выбирать версии jQuery библиотеки и просмотреть какая версия что поддерживает. Описание фунций открывает в новом окне оригинальной документации.

Разработчики веб-страниц Front End’a несут ответственность за то, чтобы страница точь-в-точь повторяла макет дизайнера и одинаково отображалась во всех браузерах. В течение долгого времени это становилось легче с появлением более продвинутых браузеров и большего количества средств разработки.

В то время как все знают о HTML и CSS, меньше людей знает о Sass и Haml. Развитие фронтенда продолжает продвигаться с каждым годом. Одно из основных заданий разработчика – всегда быть в курсе последних нововведений.

Если вы чувствовали себя немного неуверенными в своих навыках фронтенда или просто хотите узнать о более новых методах, эту небольшую статью советую прочитать именно вам. Я предлагаю вам несколько популярных инструментов и ресурсов, которые каждый разработчик Front End’a должен использовать или по крайней мере знать об их существовании.

CSS препроцессоры

Возможно, самый известные препроцессоры CSS: SASS, также немного похож на него LESS. Благодаря этим двум библиотекам вы можете создать более динамический код.

Термин “SASS” можно применять как к технологии, так и к синтаксису. Файлы SASS могут также быть файлами SCSS, между ними нет особых различий, местами SCSS просто более напоминает привычный CSS. LESS – та же самая вещь только с различным синтаксисом.

SASS и LESS не языки по сути, но небольше расширения для CSS. Код SASS/LESS компилируется в обычный CSS.

Самое большое различие между SASS и LESS, кроме синтаксиса, то, как они работают. SASS компилируется с помощью Руби, в то время как LESS – использует JavaScript (или Node.js).

Обратите внимание на то, что предварительная обработка CSS действительно требует небольшого знания команд Terminal/CLI. Вам не обязательно быть экспертом, но у вас должны быть хотя бы базовые знания работы в командной строке. Например, самый быстрый способ собрать файлы SASS состоит в том, чтобы использовать что-то вроде этого в терминале:

sass input.scss output.css

Но как только вы получаете некоторую практику, это становится для вас вторым способом написания CSS.

Вот некоторые ресурсы для того, чтобы узнать больше о препроцессорах для CSS:

GIT (Распределенная система управления версиями)

Контроль для управлением проектом и версиями необходим для больших веб-проектов. Такое сообщество как GitHub сделало “GIT” обычной частью технологий.

Но как это работает, и почему вы должны его использовать?

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

Установка GIT’a очень снисходительно относится ко всем операционным системам. Легкое достаточно подробное обучение, в процессе которого вы узнает, как все передается, ветвится и контролируется.

Но с вводным гидом и большим количеством практики GIT будет медленно становиться частью вашего технологического процесса Front End’a.

Одно из самых больших препятствий, которое может произойти – это использование GIT через командную строку. Это – предпочтительный метод большинства программистов, которые уже используют CLI ежедневно. Однако, если вы так и не смогли научиться использовать его, то вам на помощь приходит приложение от GitHub’a и который на данный момент является бесплатным.

Мой совет если вы все таки решили начать изучать GIT’a состоит в том, чтобы вы учили его не в спешке, а поэтапно. Легко быть обескураженным, если контроль версий – абсолютно незнакомое понятие. Поэтому учитесь в своем собственном темпе и не сдавайтесь!

Вот некоторые превосходные веб-сайты для изучения основных возможностей GIT’a:

JavaScript библиотеки

Развитие Front End’a, несомненно, переместилось к полной поддержке JavaScript. От динамических элементов страницы до мультипликации JavaScript – одного из основных инструментов каждого веб-проекта.

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

Хорошее правило состоит в том, чтобы изучить только то, в чем вы нуждаетесь и когда вам это нужно. Если вы тот, кто просто любит писать код для забавы, лучше освоить только несколько библиотек. jQuery – возможно, лучший выбор, чтобы начать, так как это – одна из лучших пяти библиотек JavaScript, которыми чаще всего пользуются.

Но также следует рассмотреть более современные инструменты, такие как Backbone.js или Angular.js. Они оба являются общедоступными библиотеками, которые были написаны для структурирования основных JS веб-приложений. Они невероятно сильны, но могут служить небольшим дополнением на простом блоге WordPress.

Разработчики, ищущие проблему, могли бы считать изучение одного из инструментов предварительной обработкой языков, таких как CoffeeScript, TypeScript или LiveScript. Все три языка собирают в JavaScript, но предлагают небольшие отличия оригинальному синтаксису.

Настоящая сила JavaScript только сейчас обнаруживается. С таким инструментом как Node.js появляется возможность установить его на сервер. Нельзя не напомнить о том, что сырой JavaScript может быть выполнен в консоли браузера, дающей еще больше возможностей Front End разработчикам.

Являетесь ли вы полным новичком или закаленным разработчиком, есть всегда то, чему возможно научиться с JavaScript, если вы увлечены веб-разработкой. Следующие ресурсы могут оказаться исключительно полезны:

HTML препроцессоры

Популярность препроцессоров CSS, также дала возможность появлению препроцессоров для HTML Front End’a. Это работает точно так же, как SASS/LESS, где вы написав код, и скомпилировав, получили ли бы обычный HTML-код.

HTML препроцессоры могут спасти вас от многократного повторения одинаковых строк кода, закрытия тегов. В то время как это очевидно полезно, хотя иногда требуется некоторое урегулирование.

Haml и Jade – эти два наиболее популярных препроцессора с совсем разными стилями синтаксиса. Slim – третий вариант. Все три – в открытом доступе и все время улучшаются, благодаря общественной поддержке.

Haml и Slim работают на Ruby, Haml является альтернативой ERB шаблонов. Сейчас Haml – большой инструмент для разработчиков Rails. Для Front End’еров может быть столь же полезным, вне зависимости от того, пишете ли вы код на Back End’е или нет.

Jade – шаблонный двигатель, который работает на Node.js. Лучше использовать его для приложенний Node или также можно использоваться в качестве автономного решения для разработчиков Front End’a, которым нравится синтаксис Jade.

Нет никакого запрета или неправильного выбора, так как они оба довольно таки похожи. Общее согласие среди любителей Ruby состоит в том, чтобы придерживаться разработки на Haml. Но много разработчиков Front End’a склоняются к Jade’у, потому что Node.js стал горячей тенденцией в веб-разработке.

Правда, немного разработчиков находят обязательной предварительную обработку HTML. Вы можете предпочесть писать статический HTML, но некоторые разработчики предпочитают Haml/Slim/Jade. Поэтому, если вы можете, по крайней мере, понять синтаксис, это даст вам большое преимущество.

Советую вам изучить эти подробные обучающие ресурсы, чтобы копнуть поглубже:

JS менеджер задач

Автоматизированные менеджеры задач – новейшие инструменты Front End’a. Понятие часто запутывающее сначала, но менеджеры задач могут существенно улучшить ваш технологический процесс и дать огромный потенциал.

Два крупных менеджера задач – Gulp и Grunt. Вы заметите, что они оба работают на JavaScript, но также им требуется терминал. Так каким же образом все работает?

Gulp и Grunt устанавливаются через Node Package Manager (NPM) в командной строке. Сами библиотеки могут управляться командами JS от отдельных файлов, gulpfile.js и gruntfile.js соответственно.

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

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

Вы можете добавить код JS, который автоматизирует некоторые задачи, такие как обработка файлов SASS, Haml, даже языки JS, один из которых CoffeeScript. Вы заметите, что каждая из тех связей указывает на пакет NPM, предварительно написанный для Gulp’a. Это означает, что вы не должны писать, то же, что и ваши собственные автокомпиляторы SASS, потому что это уже все написано!

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

Чтобы начать, просто выберите Gulp или Grunt и заставьте себя практиковаться.

Вот некоторые способы начать:

В заключение

Все эти инструменты довольно новые или очень выросли за прошедшие несколько лет. Мир развития Front End’a предлагает столько впечатляющих инструментов для упрощения написания кода, и я надеюсь, что эта статья даст вам отправную точку.