Скринкаст по
Детально про gulp и рецепты его использования.
Если вы где-то выкладываете этот скринкаст (торрент и т.п.), то обязательно давайте ссылку на эту страницу, так как все обновления и важные изменения я публикую здесь.
Ниже вы можете ознакомиться с планом скринкаста
Gulp – замечательная система сборки и задач, но при всём обилии информации в интернете о ней – это, как правило, либо самые основы, либо «готовые решения», чтобы адаптировать которые нужно понимание, как что работает.
В этом скринкасте я постараюсь восполнить этот «недостающий фрагмент». Не просто «вот такой код работает», а «почему и как он работает», и как его получить. Это сделает использование готовых решений легче и приятнее. И позволит создавать свои.
Для работы с Gulp необходимо знание Node.JS.
Хотя бы выпуски 1-9 (основы), 13 (события), 23-25 (потоки), а желательно – и остальные выпуски первой части скринкаста по Node.JS.
В скринкасте используется новый Gulp версии 4.
Текущей версией является Gulp 3, и большинство руководств в интернете посвящены именно ему.
Однако в новой версии многое сделано более правильно, она обратно совместима и стабильна. Поэтому мы будем использовать её.
В репозитории Gulp есть ветка 4.0, в которой есть и сам код и документация и даже рецепты, уже адаптированные под Gulp 4. Так что на новой версии Gulp вы будете точно не один.
Выпуски скринкаста
- Что такое Gulp? Сравнение с Grunt и Webpack
- Установка и запуск задач
- Потоки Vinyl-FS
- Начальная сборка стилей
- Инкрементальная сборка, watch
- Инкрементальность и производительность
- Автоперезагрузка браузера: browser-sync
- Обработка ошибок
- Создание плагинов при помощи through2
- Более сложный поток: eslint, gulp-if, stream-combiner2
- Понимаем ли мы потоки Node.JS?
- Организация gulpfile'а
- Стили + ресурсы, спрайты, продакшн
- Интеграция Gulp и Webpack
Код примеров – в репозитории https://github.com/iliakan/gulp-screencast.
Иногда одному выпуску соответствует несколько примеров кода, в этом случае у них общий префикс с номером выпуска.
Комментарии
<code>, для нескольких строк кода — тег<pre>, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)