Gulp. Урок 6. Подключение browser sync


Содержание материала:

ТИПИЧНЫЙ ВЕРСТАЛЬЩИК

Современная Frontend разработка предполагает использование препроцессора стилей SCSS или LESS, препроцессора и шаблонизатора HTML — Pug, сжатие изображение, JS и CSS файлов, в целях оптимизации загрузки веб-страниц и многоe многое другое. Чтобы упросить этот процесс, мы предлагаем вам воспользоваться сборкой проектов Gulp 4, которую постоянно совершенствует Андрей Горохов. Ниже будут представлены ссылки на скачивание, а пока пройдемся по основным моментам: описанию и установке.

Сборщик проектов Gulp

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

Скачать сборку можно с репозитория Github или через командную строку Git. В дальнейшем вы сможете настроить её под свои задачи.

Особенности

  • именование классов по БЭМ
  • используется БЭМ-структура
  • используется препроцессор SCSS
  • используется транспайлер Babel для поддержки современного JavaScript (ES6) в браузерах
  • используется Webpack для сборки JavaScript-модулей
  • используется CSS-сетка smart-grid на основе Bootstrap для быстрой адаптивной вёрстки
  • используется жёсткий кодгайд

Установка

  • установите NodeJS (если требуется) и Yarn
  • скачайте сборку с помощью Git: git clone https://github.com/andreyalexeich/gulp-scss-starter.git
  • установите gulp глобально: yarn global add gulp-cli
  • перейдите в скачанную папку со сборкой: cd gulp-scss-starter
  • скачайте необходимые зависимости: yarn
  • чтобы начать работу, введите команду: yarn run dev (режим разработки)
  • чтобы собрать проект, введите команду yarn run build (режим сборки)

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

Если у тебя возникли проблемы с установкой, то посмотри этот ролик:

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

  • Корень папки:
    • .babelrc.js — настройки Babel
    • .bemrc.js — настройки БЭМ
    • .eslintrc.json — настройки ESLint
    • .gitignore – запрет на отслеживание файлов Git’ом
    • .stylelintrc — настройки Stylelint
    • .stylelintignore – запрет на отслеживание файлов Stylelint’ом
    • gulpfile.babel.js — настройки Gulp
    • webpack.config.js — настройки Webpack
    • package.json — список зависимостей
  • Папка src — используется во время разработки:
    • БЭМ-блоки: src/blocks
    • шрифты: src/fonts
    • изображения: src/img
    • JS-файлы: src/js
    • страницы сайта: src/views/pages
    • SCSS-файлы: src/styles
    • HTML-файлы: src/views
    • конфигурационный файл веб-сервера Apache с настройками gzip (сжатие без потерь): src/.htaccess
  • Папка dist — папка, из которой запускается локальный сервер для разработки (при запуске yarn run dev )
  • Папка gulp-tasks — папка с Gulp-тасками

Команды

  • yarn run lint:style — проверить SCSS-файлы. Для VSCode необходимо установить плагин. Для WebStorm или PHPStorm необходимо включить Stylelint в Languages & Frameworks — Style Sheets — Stylelint (ошибки будут исправлены автоматически при сохранении файла)
  • yarn run lint:style —fix — исправить ошибки в SCSS-файлах
  • yarn run dev — запуск сервера для разработки проекта
  • yarn run build — собрать проект с оптимизацией без запуска сервера
  • yarn run build views — скомпилировать Pug-файлы
  • yarn run build styles — скомпилировать SCSS-файлы
  • yarn run build scripts — собрать JS-файлы
  • yarn run build images — собрать изображения
  • yarn run build webp — сконвертировать изображения в формат .webp
  • yarn run build sprites — собрать спрайты
  • yarn run build fonts — собрать шрифты
  • yarn run build favicons — собрать фавиконки
  • yarn run build gzip — собрать конфигурацию Apache

Рекомендации по использованию

Компонентный подход к разработке сайтов

  • аждый БЭМ-блок имеет свою папку внутри src/blocks/modules
  • папка одного БЭМ-блока содержит в себе один HTML-файл, один SCSS-файл и один JS-файл (если у блока используется скрипт)
    • HTML-файл блока импортируется в файл src/views/index.html (или в необходимый файл страницы, откуда будет вызываться блок)
    • SCSS-файл блока импортируется в файл src/blocks/modules/_modules.scss
    • JS-файл блока импортируется в src/js/import/modules.js

Пример структуры папки с БЭМ-блоком:

Чтобы вручную не создавать соответствующие папку и файлы, достаточно в консоли прописать команду bem create my-block — для создания папки БЭМ-блока, где my-block — имя БЭМ-блока

Страницы проекта

  • страницы проекта находятся в папке src/views/pages
    • главная страница: src/views/index.html

Шрифты

  • шрифты находятся в папке src/fonts
    • используйте форматы .woff и .woff2
    • шрифты подключаются в файл src/styles/base/_fonts.scss
    • сконвертировать локальные шрифты можно с помощью данного сервиса

Изображения

  • изображения находятся в папке src/img
    • изображение для генерации фавиконок должно находиться в папке src/img/favicon и иметь размер не менее 1024px x 1024px
    • изображения автоматически конвертируются в формат .webp . Подробная информация по использованию тут.

Сторонние библиотеки

  • все сторонние библиотеки устанавливаются в папку node_modules
    • для их загрузки воспользуйтеcь командой yarn add package_name
    • для подключения JS-файлов библиотек импортируйте их в самом начале JS-файла БЭМ-блока (то есть тот БЭМ-блок, который использует скрипт), например:
    • для подключения стилевых файлов библиотек импортируйте их в файл src/styles/vendor/_libs.scss
    • JS-файлы и стилевые файлы библиотек самостоятельно изменять нельзя

⚠️ Если в вашем проекте используется несколько библиотек, которые необходимо подключать на нескольких страницах, во избежании ошибок нужно:

  • по пути src/js/import создать папку pages
  • в папке pages создать js-файл для страницы, например, pageA.js , и импортировать туда библиотеку, которая будет использоваться только на этой странице
    • аналогично проделать шаг для дополнительных страниц
  • в файле webpack.config.js в точку входа добавить js-файлы страниц, пример:
  • подключить скомпилированные js-файлы на необходимых страницах

В сборщик включена CSS-сетка smart-grid от Дмитрия Лаврика. Она позволяет избавиться от лишних классов в разметке за счёт использования примесей в SCSS и ускоряет адаптивную вёрстку. Конфигурация уже настроена в соответствии с сеткой Bootstrap. Пример использования:

SCSS

Результат

Нужен SCSS + Pug?

Данная сборка постоянно дорабатывается и улучшается, поэтому всю самую актуальную информацию вы найдете в Github репозитории. Будем рады предложениям, пишите их в телеграм чат. Там вы обязательно найдете автора сборки Андрея Горохова.

Gulp и BrowserSync

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

Для примера будем транспилировать шаблоны, написанные на PUG в HTML-код. Предполагаю, что с node и npm вы уже работали и умеете устанавливать нужные пакеты.

Начало работы

Создадим основную структуру проекта. Она будет очень простой — папка /pug, в которой мы разместим шаблоны, и папка /dist, где будет лежать транспилированный html.

Настройка среды разработки: инструкция для новичков

Первые шаги в разработке могут быть сложными – ведь вы еще не знаете об инструментах и средствах, которые могут облегчить вашу задачу. О них – эта статья от преподавателя GeekBrains Артема Шашкова. Здесь состоится ваше знакомство со средой разработки, с Node.js и NPM, а также Gulp. Интересно? Тогда загляните и в вебинар Артема Шашкова «Настройка среды разработки Frontend-разработчика» – чтобы увидеть, как применить на практике материал статьи.

Выбираем среду разработки

IDE – Integrated Development Environment, или интегрированная среда разработки – это система программных средств, предназначенная для создания ПО. Сред существует много: от бесплатных, с минимально достаточным функционалом, до мощных платных программ с внушительной ценой. Рекомендация новичкам – бесплатный Visual Studio или Brackets. Если цена для вас – не преграда, то попробуйте продукт от JetBrains.

Выбираем IDE, устанавливаем и запускаем ее, и создаем пока пустой проект. Еще немного теории – и начнем писать «магические заклинания», которые помогут в разработке.

Таск-менеджер и Ко

Чтобы «творить магию», потребуется таск-менеджер, предназначенный для автоматического выполнения часто возникающих задач. Наиболее популярны Grunt, Webpack и Gulp. Первый уже устарел и не блещет скоростью, второй быстро новичку не поддастся – сложноват в освоении. А Gulp – то, что нужно: быстрый и простой.

Gulp написан на JavaScript. Для работы с ним используется командная строка, а задачи описываются в специальном файле – gulpfile. Для работы с Gulp понадобятся Node.js и NPM.

Node или Node.js – это программная платформа. Она основана на движке V8, который транслирует JavaScript в машинный код. Node.js превращает JavaScript из узкоспециализированного – в язык общего назначения. Берем платформу отсюда и ставим LTS-версию, так как она протестирована и стабильна.

NPM (Node.js Package Manager) – это менеджер пакетов, входящий в состав Node.js. С его помощью будем устанавливать все необходимое для работы.

Устанавливаем и настраиваем инструментарий

Работать будем в консоли (терминале), так что открываем ее либо в IDE, либо отдельно. Создаем в IDE новый проект (например, «frontend»). Проверяем, успешно ли установился Node.js: набираем в консоли:

Если все сделано правильно, в консоли увидим версию ПО. Если нет – пробуем перезапустить консоль или переустановить Node.

Node установилась, NPM на месте – можно инициализировать проект. Переходим в консоли в корневую папку проекта и пишем там же:

На все вопросы отвечаем утвердительно – нажимаем «Enter» (эти настройки пока нам не интересны). По завершении в корне проекта получаем файл package.json – это своего рода «инструкция по сборке». В нем хранится информация о всех зависимостях, задействованных в проекте.

Устанавливаем Gulp: сначала глобально, а далее уже локально – в каждом проекте, где планируется его использовать. Будем работать с четвертой версией, где есть интересные и полезные новые фишки.

Пишем в консоли:

Первая команда ставит Gulp глобально, а вторая – непосредственно в наш проект.

Процесс может занять некоторое время – ждем.

После успешной установки в проекте появится папка node_modules, а в файле package.json – следующие строки:

Это наша новая зависимость! В больших проектах таких могут быть десятки.

Теперь все готово для того, чтобы создать первую задачу.

Пишем первый таск

Создадим в корне проекта отдельный файл для описания и назовем его gulpfile.js. Открываем его и пишем первый таск (задачу):

В первой строке подключаем Gulp (далее будем действовать аналогично с остальными необходимыми модулями).

Любой таск в Gulp создается методом .task(), который принимает два аргумента – название задачи и функцию-обработчик. Отметим, что в Gulp задачи асинхронны: надо дать знать, что задача выполнена, и ее выполняет callback() (в данном таске это просто функция-пустышка, так как нам нечего возвращать). Если этого не сделать, то в консоли мы увидим:

Первый таск создан: можно запускать его в консоли! Пишем команду:

Здесь gulp – это вызов собственно gulp, а hello – название таска, который хотим выполнить. Все очень просто.

Усложняемся – работаем с препроцессором

Создадим что-то более сложное и функциональное, а попутно познакомимся с оставшимися методами Gulp.

Выстраиваем структуру папок. При разработке принято хранить исходники и сборку в разных папках. Создаем их: src для исходных материалов и build для готовой сборки.

Чтобы усложнить задачу, добавим в разработку препроцессор pcss (CSS-препроцессор). Это надстройка, которая с помощью новых синтаксических конструкций добавляет CSS ранее недоступные возможности. Происходит преобразование кода, написанного с использованием препроцессорного языка, в чистый и валидный CSS-код.

Установим препроцессор и несколько вспомогательных библиотек для работы с css.

Ставим сам препроцессор:

Далее устанавливаем autoprefixer, cssnext и precss

В файле package.json появляются следующие строки:

Понимаете, для чего это нужно? Скоро сами удивитесь, как это полезно.

Подключаем препроцессор и дополнительные модули (в начале файла):

Создадим в src папку pcss, где будем хранить стили. Добавим файл style.pcss и опишем несколько стилей в синтаксисе pcss:

Файл готов! Создадим «таск», который будет переписывать pcss в css и класть в папку build/css. Для удобства работы с директориями добавим в gulpfile объект конфигурации:

Теперь напишем сам таск и назовем его «css»:

Разберемся, что тут происходит:

Задан массив с дополнительными модулями для нашего postcss. Далее идет возврат (return) «цепочки» потоков (.pipe в каждом таком потоке выполняются какие-то задачи).

Метод .src у gulp указывает, откуда брать файлы для обработки (/**/*.pcss говорит о том, что нужно сканировать текущую и все вложенные папки на наличие файлов с расширением pcss).

Gulp.dest задает, куда положить результат обработки. Postcss вызывает обработку .pcss-файлов с параметрами из processors. dest (не путать с gulp.dest), дает возможность задать расширение выходного файла (в нашем случае – .css) и папку, в которую нужно положить файл.

Задача написана – протестируем ее! Набираем в консоли:

Переходим в build и видим, что там появилась папка css, а в ней – файл style.css с таким содержанием:

Перед нами привычный CSS-код, который можно подключить html-файлу.

Собираем js

Будем используем ES6-синтаксис – понадобится соответствующий плагин, чтобы сохранить кроссбраузерность приложения. Ставим Babel (занимается преобразованием ES6 в ES5):

Напишем задачу ‘js’, которая будет обрабатывать js-файлы:

Все аналогично задаче css, только вместо postcss в дело вступает babel.

Напишем простенький js-файл с ES6-кодом (пусть это будет script.js, размещенный в папке src/js). Испытаем работу таска:

Результатом будет файл script.js в папке build/js со следующим содержанием:

В результате работы Babel код немного усложнился по сравнению с исходным.

С одним файлом все хорошо, но что произойдет, если их будет 2, 3, 10 и больше? Совсем неудобно все это подключать к странице. Эту проблему поможет решить модуль gulp-concat.

Доработаем таск js:

Теперь concat(‘main.js’) объединяет все файлы в один – main.js, который удобно подключать к странице (попробуйте создать несколько файлов и понаблюдайте за результатом).

Научившись обрабатывать стили, JavaScript-код, вы все еще каждый раз набираете gulp ‘task’ в консоли. Это не очень удобно. Можно ли объединить все в одной задаче?

Да, и прежде чем это сделать, напишем еще пару вспомогательных тасков для очистки папки сборки и переноса остальных файлов (html, картинок, шрифтов и т.д.).

Напишем задачи ‘clr’ и ‘assets’. Первая будет вычищать папку build перед сборкой, а вторая – просто переносить файлы.

Создадим отдельный таск для html:

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

Напишем задачу ‘watch’, которая будет отслеживать изменения в нужных файлах и при необходимости запускать соответствующие таски:

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

Осталось написать задачу для первичной сборки – назовем ее ‘build’, а также задачу ‘default’, которая позволит, просто набрав команду ‘gulp’, собрать проект и запустить «вотчеры».

Используем метод .parallel, чтобы ускорить процесс и запустить все задачи в параллельных потоках.

Метод .series запускает задачи последовательно: сначала выполнится ‘build’, а далее параллельно стартуют ‘watch’ и ‘server’.

Пишем задачу ‘server’

Стоп, что за задача ‘server’ – откуда, зачем? Это для «полного фэншуя» в разработке. Она «поднимает» виртуальный сервер, перезагружает браузеры и синхронизирует их в случае изменений. И все это – при помощи одной команды ‘gulp’, введенной перед началом работы. Далее все происходит автоматически. Magic!

Ставим модуль ‘browser-sync’ для задачи ‘server’:

И пишем таск ‘server’:

Запускаем сервер, в настройках которого указываем базовую директорию (config.build) и индекс-файл, который будет открываться в браузере.


Остается набрать в консоли gulp и наслаждаться разработкой.

Сжимаем код

В заключение – небольшой бонус. Минифицируем JavaScript-код, чтобы уменьшить конечный размер файла.

Топ-пост этого месяца:  Google AdWords Express стал частью Google Ads

Дорабатываем таск ‘js’:

Перезапускаем и снова выполняем ‘gulp’ (остановить предыдущий можно нажатием ctrl+c), чтобы применились изменения. Код в main.js теперь сжат: читаемость стала хуже, но функциональность сохранилась.

P.S. Помните, мы говорили про зависимости и package.json? Попробуйте удалить папку build и node_ modules, а затем выполнить задачи. Оп, ничего не работает. А теперь – еще немного магии. В консоли в корне проекта пишем команду npm i и дожидаемся ее выполнения. Пробуем выполнить задачи теперь. Бинго!

Так вы можете легко развернуть ваш проект на любой другой машине. Помните: никогда не переносите проект полностью, то есть с папкой node_modules и папкой со сборкой. Ведь на разных операционных системах различные модули могут работать некорректно – их нужно ставить под конкретную ОС. Перенося проект, который разрабатывался на Win, на машину с MacOS, вы рискуете – может и «не завестись». Скорее всего, вам придется частично или полностью переустанавливать модули.

Код из этой статьи можно использовать как основу при автоматизации разработки в ваших проектах. Вы можете легко модифицировать gulpfile.js, добавляя или удаляя новые модули и задачи. Удачи в кодинге!

Первые шаги в разработке могут быть сложными – ведь вы еще не знаете об инструментах и средствах, которые могут облегчить вашу задачу. О них – эта статья от преподавателя GeekBrains Артема Шашкова. Здесь состоится ваше знакомство со средой разработки, с Node.js и NPM, а также Gulp. Интересно? Тогда загляните и в вебинар Артема Шашкова «Настройка среды разработки Frontend-разработчика» – чтобы увидеть, как применить на практике материал статьи.

Выбираем среду разработки

IDE – Integrated Development Environment, или интегрированная среда разработки – это система программных средств, предназначенная для создания ПО. Сред существует много: от бесплатных, с минимально достаточным функционалом, до мощных платных программ с внушительной ценой. Рекомендация новичкам – бесплатный Visual Studio или Brackets. Если цена для вас – не преграда, то попробуйте продукт от JetBrains.

Выбираем IDE, устанавливаем и запускаем ее, и создаем пока пустой проект. Еще немного теории – и начнем писать «магические заклинания», которые помогут в разработке.

Таск-менеджер и Ко

Чтобы «творить магию», потребуется таск-менеджер, предназначенный для автоматического выполнения часто возникающих задач. Наиболее популярны Grunt, Webpack и Gulp. Первый уже устарел и не блещет скоростью, второй быстро новичку не поддастся – сложноват в освоении. А Gulp – то, что нужно: быстрый и простой.

Gulp написан на JavaScript. Для работы с ним используется командная строка, а задачи описываются в специальном файле – gulpfile. Для работы с Gulp понадобятся Node.js и NPM.

Node или Node.js – это программная платформа. Она основана на движке V8, который транслирует JavaScript в машинный код. Node.js превращает JavaScript из узкоспециализированного – в язык общего назначения. Берем платформу отсюда и ставим LTS-версию, так как она протестирована и стабильна.

NPM (Node.js Package Manager) – это менеджер пакетов, входящий в состав Node.js. С его помощью будем устанавливать все необходимое для работы.

Устанавливаем и настраиваем инструментарий

Работать будем в консоли (терминале), так что открываем ее либо в IDE, либо отдельно. Создаем в IDE новый проект (например, «frontend»). Проверяем, успешно ли установился Node.js: набираем в консоли:

Если все сделано правильно, в консоли увидим версию ПО. Если нет – пробуем перезапустить консоль или переустановить Node.

Node установилась, NPM на месте – можно инициализировать проект. Переходим в консоли в корневую папку проекта и пишем там же:

На все вопросы отвечаем утвердительно – нажимаем «Enter» (эти настройки пока нам не интересны). По завершении в корне проекта получаем файл package.json – это своего рода «инструкция по сборке». В нем хранится информация о всех зависимостях, задействованных в проекте.

Устанавливаем Gulp: сначала глобально, а далее уже локально – в каждом проекте, где планируется его использовать. Будем работать с четвертой версией, где есть интересные и полезные новые фишки.

Пишем в консоли:

Первая команда ставит Gulp глобально, а вторая – непосредственно в наш проект.

Процесс может занять некоторое время – ждем.

После успешной установки в проекте появится папка node_modules, а в файле package.json – следующие строки:

Это наша новая зависимость! В больших проектах таких могут быть десятки.

Теперь все готово для того, чтобы создать первую задачу.

Пишем первый таск

Создадим в корне проекта отдельный файл для описания и назовем его gulpfile.js. Открываем его и пишем первый таск (задачу):

В первой строке подключаем Gulp (далее будем действовать аналогично с остальными необходимыми модулями).

Любой таск в Gulp создается методом .task(), который принимает два аргумента – название задачи и функцию-обработчик. Отметим, что в Gulp задачи асинхронны: надо дать знать, что задача выполнена, и ее выполняет callback() (в данном таске это просто функция-пустышка, так как нам нечего возвращать). Если этого не сделать, то в консоли мы увидим:

Первый таск создан: можно запускать его в консоли! Пишем команду:

Здесь gulp – это вызов собственно gulp, а hello – название таска, который хотим выполнить. Все очень просто.

Усложняемся – работаем с препроцессором

Создадим что-то более сложное и функциональное, а попутно познакомимся с оставшимися методами Gulp.

Выстраиваем структуру папок. При разработке принято хранить исходники и сборку в разных папках. Создаем их: src для исходных материалов и build для готовой сборки.

Чтобы усложнить задачу, добавим в разработку препроцессор pcss (CSS-препроцессор). Это надстройка, которая с помощью новых синтаксических конструкций добавляет CSS ранее недоступные возможности. Происходит преобразование кода, написанного с использованием препроцессорного языка, в чистый и валидный CSS-код.

Установим препроцессор и несколько вспомогательных библиотек для работы с css.

Ставим сам препроцессор:

Далее устанавливаем autoprefixer, cssnext и precss

В файле package.json появляются следующие строки:

Понимаете, для чего это нужно? Скоро сами удивитесь, как это полезно.

Подключаем препроцессор и дополнительные модули (в начале файла):

Создадим в src папку pcss, где будем хранить стили. Добавим файл style.pcss и опишем несколько стилей в синтаксисе pcss:

Файл готов! Создадим «таск», который будет переписывать pcss в css и класть в папку build/css. Для удобства работы с директориями добавим в gulpfile объект конфигурации:

Теперь напишем сам таск и назовем его «css»:

Разберемся, что тут происходит:

Задан массив с дополнительными модулями для нашего postcss. Далее идет возврат (return) «цепочки» потоков (.pipe в каждом таком потоке выполняются какие-то задачи).

Метод .src у gulp указывает, откуда брать файлы для обработки (/**/*.pcss говорит о том, что нужно сканировать текущую и все вложенные папки на наличие файлов с расширением pcss).

Gulp.dest задает, куда положить результат обработки. Postcss вызывает обработку .pcss-файлов с параметрами из processors. dest (не путать с gulp.dest), дает возможность задать расширение выходного файла (в нашем случае – .css) и папку, в которую нужно положить файл.

Задача написана – протестируем ее! Набираем в консоли:

Переходим в build и видим, что там появилась папка css, а в ней – файл style.css с таким содержанием:

Перед нами привычный CSS-код, который можно подключить html-файлу.

Собираем js

Будем используем ES6-синтаксис – понадобится соответствующий плагин, чтобы сохранить кроссбраузерность приложения. Ставим Babel (занимается преобразованием ES6 в ES5):

Напишем задачу ‘js’, которая будет обрабатывать js-файлы:

Все аналогично задаче css, только вместо postcss в дело вступает babel.

Напишем простенький js-файл с ES6-кодом (пусть это будет script.js, размещенный в папке src/js). Испытаем работу таска:

Результатом будет файл script.js в папке build/js со следующим содержанием:

В результате работы Babel код немного усложнился по сравнению с исходным.

С одним файлом все хорошо, но что произойдет, если их будет 2, 3, 10 и больше? Совсем неудобно все это подключать к странице. Эту проблему поможет решить модуль gulp-concat.

Доработаем таск js:

Теперь concat(‘main.js’) объединяет все файлы в один – main.js, который удобно подключать к странице (попробуйте создать несколько файлов и понаблюдайте за результатом).

Научившись обрабатывать стили, JavaScript-код, вы все еще каждый раз набираете gulp ‘task’ в консоли. Это не очень удобно. Можно ли объединить все в одной задаче?

Да, и прежде чем это сделать, напишем еще пару вспомогательных тасков для очистки папки сборки и переноса остальных файлов (html, картинок, шрифтов и т.д.).

Напишем задачи ‘clr’ и ‘assets’. Первая будет вычищать папку build перед сборкой, а вторая – просто переносить файлы.

Создадим отдельный таск для html:

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

Напишем задачу ‘watch’, которая будет отслеживать изменения в нужных файлах и при необходимости запускать соответствующие таски:

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

Осталось написать задачу для первичной сборки – назовем ее ‘build’, а также задачу ‘default’, которая позволит, просто набрав команду ‘gulp’, собрать проект и запустить «вотчеры».

Используем метод .parallel, чтобы ускорить процесс и запустить все задачи в параллельных потоках.

Метод .series запускает задачи последовательно: сначала выполнится ‘build’, а далее параллельно стартуют ‘watch’ и ‘server’.

Пишем задачу ‘server’

Стоп, что за задача ‘server’ – откуда, зачем? Это для «полного фэншуя» в разработке. Она «поднимает» виртуальный сервер, перезагружает браузеры и синхронизирует их в случае изменений. И все это – при помощи одной команды ‘gulp’, введенной перед началом работы. Далее все происходит автоматически. Magic!

Ставим модуль ‘browser-sync’ для задачи ‘server’:

И пишем таск ‘server’:

Запускаем сервер, в настройках которого указываем базовую директорию (config.build) и индекс-файл, который будет открываться в браузере.

Остается набрать в консоли gulp и наслаждаться разработкой.

Сжимаем код

В заключение – небольшой бонус. Минифицируем JavaScript-код, чтобы уменьшить конечный размер файла.

Дорабатываем таск ‘js’:

Перезапускаем и снова выполняем ‘gulp’ (остановить предыдущий можно нажатием ctrl+c), чтобы применились изменения. Код в main.js теперь сжат: читаемость стала хуже, но функциональность сохранилась.

P.S. Помните, мы говорили про зависимости и package.json? Попробуйте удалить папку build и node_ modules, а затем выполнить задачи. Оп, ничего не работает. А теперь – еще немного магии. В консоли в корне проекта пишем команду npm i и дожидаемся ее выполнения. Пробуем выполнить задачи теперь. Бинго!

Так вы можете легко развернуть ваш проект на любой другой машине. Помните: никогда не переносите проект полностью, то есть с папкой node_modules и папкой со сборкой. Ведь на разных операционных системах различные модули могут работать некорректно – их нужно ставить под конкретную ОС. Перенося проект, который разрабатывался на Win, на машину с MacOS, вы рискуете – может и «не завестись». Скорее всего, вам придется частично или полностью переустанавливать модули.

#1 — Установка и обзор возможностей.

BrowserSync позволяет тестировать ваше приложение сразу на всех браузерах одновременно. В этом уроке мы разберем, как менее чем за 5 минут, к вашему проекту можно подключить BrowserSync в режиме livereload и настроить синхронизацию между всеми браузерами.

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

2 thoughts on “ #1 — Установка и обзор возможностей. ”

Спасибо за урок!

Ребят, не смог установить browser-sync через консоль. Пишет следующую ошибку — «npm» не является внутренней или внешней
командой, исполняемой программой или пакетным файлом.
Все сделал как по видео, в чем может быть проблема?
Спасибо.

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

Для отправки комментария вам необходимо авторизоваться.

Самые нужные плагины для Gulp

Это пост можно сказать является дубликатом моей предыдущей подборки “Самые нужные плагины для Grunt”. Дело в том, что спустя много часов поиска я не нашел крутых плагинов для Gulp, которых нет для Grunt за исключением пары весьма специфичных утилит. Всё как раз наоборот, но проигнорировать множество пользователей Gulp я не мог. Все недостающие плагины я выделил, потому что Gulp умеет использовать их из Grunt, как и Grunt из Gulp.

Доброго времени суток, всем! Кто-то умный, не помню в какой статье именно на Хабре, буквально недавно размышлял о процессе разработки с явным призывом автоматизировать все, что только можно автоматизировать. И лучше один раз потратить время на автоматизацию, чтобы потом экономить его на протяжении всего проекта.

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

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

HTML&CSS

autoprefixer — один из самых полезных плагинов, который автоматически расставляет префиксы к CSS свойствам, исходя из статистики caniuse. Важно сказать, что Автопрефиксер это лишь один из множества дополнений в рамках проекта PostCSS от Злых Марсиан.

gulp-browser-sync — вероятно, самый нужный инструмент, с точки зрения повышения продуктивности веб-разработчиков. BrowserSync создает подключение, после чего производит автообновление страницы во всех браузерах на всех устройствах при изменениями не только клиентских или даже серверных файлов. А плюс ко всему синхронизирует позицию скроллинга и заполненные данные в формах.

gulp-useref — парсит специфичные блоки и конкатенирует описанные в них стили и скрипты.

gulp-email-design — бесценный инструмент при верстки писем, который переводит все CSS стили в инлайновые, автоматически изменяя все пути к файлам, опционально умеет загружать изображения на CDN и даже отсылать письма на почту.

gulp-uncss — лучшее решение для оптимизации CSS файлов. Плагин анализирует HTML код и находит все неиспользуемые и продублированные стили.

gulp-csso — отличный CSS минификатор. На сегодняшний день существует целый ряд CSS компрессоров и сравнительная таблица (GitHub) по ним. Но недавно я увидел лучшую Shorthand утилиту без Gulp, которая делает приблизительно следующее:

gulp-htmlmin — простой HTML минификатор.

gulp-csscomb — облагораживает структуру ваших CSS.

JavaScript

gulp-autopolyfiller — мега крутой плагин, который похож на Autoprefixer и подбирает все необходимые полифилы для JavaScript, чтобы вы могли использовать последние стандарты ECMAScript уже сегодня. Еще рекомендую gulp-babel, который конвертирует ES6/ES7 в ES5.

gulp-jsfmt — полезнейший плагин для работы с JavaScript от команды Rdio, который позволяет искать конкретные фрагменты, форматировать и производить массовые изменения в коде. Также существует gulp-jsbeautifier.

gulp-jscs — JavaScript Code Style. Замечательный инструмент со множеством конфигураций для проверки вашего кода в соответствии с существующими стайлгайдами от jQuery, Яндекса, Google, Airbnb и других.

gulp-modernizr — помогает составить правильную архитектуру проекта на основе Modernizr.js в зависимости от возможностей браузера.

gulp-express — запускает Express.js веб-сервер.

gulp-requirejs и gulp-browserify — оптимизируют работу RequireJS и Browserify соответственно.

gulp-plato — предоставляет аналитику по вашему коду с разными метриками в виде красивых графиков.

gulp-complexity — проверка на качество кода основанная на алгоритмах Halstead и Cyclomatic.

fixmyjs — автоматически исправляет простые ошибки в коде после линта выполненного на основе JSHint (gulp-jshint).

gulp-jscpd — для поиска дубликатов в коде.

gulp-jsonlint — валидатор JSON файлов.

Unit тесты

Графика

gulpicon — ценный плагин, который позволяет генерировать спрайты из SVG, переводить их в PNG, записывать все Data URI и подключать нужный формат в зависимости от возможностей браузера.

gulp-iconfont — великолепный плагин для работы с веб-шрифтами. Умеет создавать WOFF, WOFF2, EOT, TTF файлы из SVG.

gulp-responsive — простой способ сгенерировать адаптивные изображения под требуемые разрешения устройств с указанием соответствующих префиксов в наименовании.

gulp-sharp — самый быстрый модуль для работы с JPEG, PNG, WebP и TIFF изображениями. Плагин умеет изменять размер, ориентацию, фон, альфа-канал и многое другое.

gulp-svgstore — объединяет все подключаемые SVG файлы и записывает их в HTML как для дальнейшего использования.

gulp-imacss — очень удобная утилита, которая автоматически преобразовывает подключенные в CSS изображения PNG, JPG, SVG в Data URI.

gulp-spritesmith — автоматическая генерация спрайтов.

Разное

gulp-grunt — позволяет запускать Grunt плагины для Gulp.

Некоторые из отсутствующих:

grunt-html-build — универсальный помощник в верстке. Плагин умеет объединять исходные файлы и создавать полноценные шаблоны/блоки для вашего HTML. Еще для похожих задач очень хорош grunt-include-replace.

grunt-penthouse и grunt-criticalcss — автоматически находят Critical Path в вашем проекте. Важный момент с точки зрения производительность, о чем подробнее написано тут.

Топ-пост этого месяца:  Как работают в TypeScript классы создание, доступ к атрибутам и функциям, примеры кода

grunt-shipit — автоматизирует deploy с помощью Shipit.

grunt-githooks — привязывает Git Hooks к Grunt таскам.

grunt-gitbook — создавайте документацию с помощью потрясающей утилиты GitBook.

grunt-conventional-changelog — генерирует список изменений на основе коммитов в Git.

grunt-proxy and grunt-connect-proxy — connect support for proxying API calls during development.

grunt-phantomas — превосходный инструмент для измерения производительности проекта.

grunt-usebanner — добавляет баннеры (копирайт или ASCII заголовки) в исходных файлах и grunt-figlet для помощи работы с этим.

gulp-watch — краеугольный камень в плагинной системе Gulp. Следит за всеми указанными файлами или целыми директориями и в случае каких-либо изменений выполняет описанные в конфигурациях таски.

gulp-notify — выводит ошибки при сборке Gulp в виде системных сообщений, а главное то, что работает для разных операционных систем.

gulp-git — позволяет использовать Git команды.

gulp-jsdoc — генератор документации, работает на основе JSDoc3.

gulp-rev — полезный плагин для работы с ревизиями.

gulp-release — позволяет управлять версиями в вашем проекте.

gulp-bump — следит за репозиторием и обновляет package.json и gulp-update, который обновляет сами пакеты.

gulp-bower-files — подключает все необходимые Bower компоненты.

gulp-removelogs — автоматически удаляет логи.

gulp-preprocess — препроцессор, ссылающийся на установленные конфигурации.

gulp-duration — отображает время выполнения тасков.

gulp-changed и gulp-newer — запускают таски только для изменившихся файлов.

gulp-connect — простой веб-сервер для статических сайтов.

gulp-shell — позволяет запускать Shell команды.

gulp-ssh — обеспечивает возможность подключения по SSH и SFTP.

gulp-zip — архивирует папки и файлы.

gulp-clean и gulp-copy — соответственно очищают и копируют указанные исходники.

gulp-filesize — отображает размеры файлов в удобном для чтения формате.

gulp-util — различные утилиты для разработки Gulp плагинов.

Компиляторы

gulp-less — LESS в CSS.
gulp-sass — SASS/SCSS в СSS.
gulp-compass — SASS с Compass в CSS.
gulp-stylus — Stylus в CSS.
gulp-coffee — CoffeeScript в JavaScript.
gulp-jade — Jade в HTML.
gulp-handlebars — Handlebars шаблоны в JST.
gulp-jst — Underscore шаблоны в JST.
gulp-react — Facebook React’s JSX шаблоны в JST.
gulp-nunjucks — Nunjucks шаблоны в JST.
gulp-dustjs — Dust шаблоны в JST.
gulp-angular-templatecache — AngularJS шаблоны в JST.

Напоследок

psi — PageSpeed Insights with reporting.
tmi — TMI (Too Many Images) — discover your image weight on the web.
ngrok — Introspected tunnels to localhost.
pageres — удобная утилита для создания скриншотов сайтов в разных разрешениях.
Возможно, некоторые методы автоматизации вам будет удобнее использовать прямо в редакторе — Лучшие плагины для SublimeText.
matchdep — помогает правильно описать зависимости.

Browsersync + Gulp.js

There’s no official Browsersync plugin for Gulp, because it’s not needed! You simply require the module, utilise the API and configure it with options. The following are some common use-cases as seen in popular projects such as Google’s web starter kit and many others.

Install ^ TOP

First, you’ll need to install Browsersync & Gulp as development dependencies.

Then, use them within your gulpfile.js :

SASS + CSS Injecting ^ TOP

Streams are supported in Browsersync, so you can call reload at specific points during your tasks and all browsers will be informed of the changes. Because Browsersync only cares about your CSS when it’s finished compiling — make sure you call .stream() after gulp.dest

Ruby SASS & Source Maps ^ TOP

If you use gulp-ruby-sass with the sourcemap: true option, additional .map files will be generated. These files end up being sent down stream and when browserSync.reload() receives them, it will attempt a full page reload (as it will not find any .map files in the DOM).

To fix this problem, use browserSync.stream() as seen in the following example.

Browser Reloading ^ TOP

Sometimes you might just want to reload the page completely (for example, after processing a bunch of JS files), but you want the reload to happen after your tasks. This will be easier in gulp 4.x.x , but for now you can do the following (make sure you return the stream from your tasks to ensure that browserSync.reload() is called at the correct time).


If you are using gulp 4.x.x now, then you can follow this documentation.

Manual Reloading ^ TOP

If the streams support doesn’t suit your needs, you can fire the reload method manually by wrapping it in a task. This example will compile & auto-inject CSS just as before, but when HTML files are changed, the browsers will be reloaded instead.

Gulp с нуля — руководство для начинающих веб-разработчиков

Приветствую вас дорогой посетитель! Данную статью я хочу посвятить очень интересной и важной теме — фронтенд-разработка при помощи пакета Gulp. Скорее всего многие из вас уже слышали о нем, даже если не слышали, то скорее всего видели его файлы проекта. Сегодня большинство расширений (плагины jQuery, различные фреймворки и т.д.) ведут именно при помощи подобных пакетов. На подобии Gulp есть и другие пакеты, например, GruntJs — это «брат-близнец» Gulp и работает по той же аналогии. Например, на GruntJs создана сборка Twitter Bootstrap. Я сам начинал изучение именно с Grunt.

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

Что такое Gulp, чем он хорош и нужен ли он простому верстальщику?

Так что же такое Gulp?

Gulp — это инструмент фронтенд-разработчика, который автоматизирует большинство рутинных задач.

Gulp позволяет решать такие задачи, как:

  • использование различных JS, CSS, HTML препроцессоров для ускорения верстки (CoffeeScript, SASS, LESS, Stylus, Pug (Jade) и др.);
  • объединение файлов в один — js, css, html;
  • минимизация кода файлов — js, css, html;
  • создание локального веб-сервера и перезагрузка страницы браузера при сохранении файла проекта (live reaload);
  • автоматическая простановка вендорных префиксов в CSS-файле для поддержки стилей устаревшими браузерами;
  • работа с изображениями сайта — объединение в спрайты (в том числе и SVG-спрайты), оптимизация (уменьшение веса);
  • копирование файлов проекта из одной папки в другую, создавая при это рез. копию;
  • создание иконочных шрифтов;
  • и многое другое…

Одним словом, круг задач, решаемых с помощью галп достаточно широк и грех всем этим не воспользоваться. Когда я впервые столкнулся с GruntJs мне казалось, что подобные сборки нужны только для крупных и поддерживаемых проектов. А я верстаю небольших макеты и мне это не нужно. Ох как же я ошибался. На самом деле данный инструмент нужен любому веб-разработчику, он здорово экономит время. Представьте, я раньше делал спрайты изображений вручную — это же натуральная рутина. А в Gulp, установив нужный плагин мне достаточно добавить нужное изображение в определенную папку и скрипт сделает все за меня, выдав уже готовый объединенный файл изображений.

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

Установка Gulp

Установку Gulp я буду показывать на примере ОС Windows 10 x64 последней сборки, так как я работаю именно в данной системе.

Первым делом нам необходимо установить node.js. Данный пакет превращает клиентский язык javaScript в серверный. Для тех, кто не знает язык javaScript интерпретирует браузер пользователя. Кстати, Gulp создан на языке javaScript и если вы знакомы с данным языком, то освоить его вам будет намного легче.

Для установки node.js необходимо скачать инсталлятор с официального сайта. Качаем последнюю стабильную версию. Пакет устанавливается как обычная программа и ничего сложного в этом нет.

После установки node.js можно проверить правильно ли все установилось. Открываем консольное окно (командная строка) — в ОС Windows это комбинация клавиш Win+R -> cmd -> Enter . Вводим команду:

Если все правильно установили в ответ вы увидите версию установленного пакета.

Все, можно приступать к установке Gulp.

Пишем команду для установки Gulp:

Давайте разберем, что значит данная запись:

  • npm — говорит о том, что мы запускаем пакет менеджер, который установит Gulp;
  • i — это сокращенная запись install, т.е. установить;
  • gulp — имя устанавливаемого пакета;
  • -g — данный флаг говорит о том, что мы устанавливаем Gulp глобально в систему. Без данного ключа gulp установится в ту папку, из которой запускается команда. Так что имейте это ввиду.

Установка не занимает много времени, примерно 1-2 мин. После завершения работы установщика галп можно проверить корректность установки, также, как и node.js:

Если все правильно, то выдаст версию установленного галп.

Создание проекта

Двигаемся дальше. Теперь создайте папку проекта в удобном месте вашего компьютера. Назовем ее, например, gproject.

Внимание! Не называйте папку проекта кириллистическими символами, т.е. русскими буквами — только латиница. Тоже самое касается пути до папки проекта — не должно быть русских названий папок. Иначе корректная работа пакета не гарантируется.

Перейдем в папку проекта и запустим консоль команд для данного каталога. Наиболее быстрый вариант сделать это зажать клавишу «Shift» и удерживая ее щелкнуть правой кнопкой мыши на пустой области окна каталога. Откроется контекстное меню, в котором выбираем «Открываем окно PowerShell здесь«. Данный пункт может называться и по другому — «Открыть окно команд«.

Запускаем инициализацию проекта командой:

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

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

  • package-name: вводим название проекта маленькими буквами
  • version: оставляем по умолчанию — 1.0.0
  • description: вводим описание проекта, например, My first gulp project.
  • entry point: (index.js), test command:, git repository:, keywords: — данные шаги оставляем по умолчанию, жмем Enter и переходим к следующему шагу
  • author: впишите имя автора, я ввел Zaur Magomedov
  • license: оставляем по умолчанию
  • Is this ok? — вводим «yes» и жмем Enter поле чего в папке нашего проекта появится файл package.json.

Файл package.json содержит в себе информацию о проекте + информацию об установленных пакетах (плагинов). Это своего рода файл манифеста. Теперь давайте установим Gulp локально в папку нашего проекта. Для этого пишем следующую команду:

флаг —save-dev как раз говорит установщику установить gulp локально в папку нашего проекта.

Внимание! Локально установится та версия галпа, что и глобальная.

При установке gulp название пакета и его версия автоматически пропишутся в файле package.json. Вообще такой подход позволяет сохранять файл package.json со всеми установленными пакетами (зависимости), а при разворачивании нового проекта достаточно скопировать данный файл и запустить команду установки в консоли проекта — npm install и все пакеты в проект установятся автоматически. Сейчас может вам будет не совсем понятно, но дальше я уверен вы поймете.

И так, после установки gulp в папке проекта должна появиться папка node_modules, она содержит в себе необходимые зависимости. Также все новые установленные зависимости, прописываемые в package.json будут складываться именно в данную папку. Так что ничего не трогайте в ней и не удаляйте. Не пугайтесь если увидите в ней много файлов и папок.

Давайте откроем файл package.json реактором кода и взглянем на его содержимое.

Мы видим всю ту информацию, которую вводили при инициализации проекта + ниже в блоке «devDependencies» указаны установленные зависимости и их версии. В данном случае это gulp версии 3.9.1. Как я и говорил установилась локально именно та версия, что стоит глобально.

Структура каталогов проекта Gulp

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

Теперь давайте разберем предназначение каждой папки.

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

src — здесь будут храниться исходники файлов проекта. Вообще, в дочерних папках может быть очень много файлов, зависит от размера проекта. Каждые типы файлов потом объединяются в общий файл и копируются в папку продакшена. В корне лежит файл index.html. Вообще для HTML можно создать отдельный каталог, но я здесь не стал усложнять и создал всего лишь главный файл.

image — неоптимизированные изображения и иконки проекта.

js — файлы javaScript.

sass — файлы препроцессоров SASS или SCSS.

node_modules — с этой папкой мы уже знакомы — все модули и зависимости gulp.

gulpfile.js — это главный файл пакета Gulp. Для чего он предназначен поговорим чуть ниже.

Gulpfile.js

Это важный файл без которого Gulp проект работать не может. Здесь записываются все задачи для выполнения — это так называемые таски (task), что в переводе с английского означает — задача. В основном весь gulpfile состоит из сплошных тасков. Таски создаются для подключаемых дополнительных плагинов. Без таска плагин работать не будет. Давайте обо всем по порядку.

Создайте в корне своего проекта файл gulpfile.js и вставьте в него следующий код:

Сразу, не отходя от кассы, разберем что это за код и за что отвечает каждая строчка.

Данной строчкой мы подключаем gulp. Создается не просто переменная, а объект с данными, с которыми мы в дальнейшем будем работать. По данной аналогии подключаются все дополнительные плагины галп.

А это простейший таск для вывода сообщения в окне консоли. myFirstTask — это название нашего таска, оно может быть любым.

Данной строкой мы запускаем все прописанные здесь таски. Этот таск по умолчанию, который запускает одновременно все перечисленные в нем таски. В данном случае указан только один созданный нами — [«myFirstTask»] . Их может быть несколько, указываются в кавычках и через запятую. Например, если бы у нас было 2 таска, то мы бы указали так — [«myFirstTask», «mySecondTask»] . И одной командой мы бы запустили сразу 2 данных таска.

Итак, давайте же уже запустим и посмотрим на результат. Вводим команду — gulp и если ошибок нет, нам должно выдать — Привет, я твой первый таск!

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

Теперь давайте установим дополнительные плагины и рассмотрим более сложные таски.

Установка плагинов Gulp

Давайте создадим небольшой проект для верстки, установив некоторые плагины, которые упростят нам работу в разы. Откроем наш gulpfile.js и cразу под строкой var gulp = require(«gulp»); запишем подключение плагинов:

Переменные мы создали, но еще нужно установить и сами плагины. Устанавливать будем локально в папку проекта. Для установки плагина необходимо написать команду:

Здесь gulp-jshint — это название плагина. Чтобы установить несколько плагинов разом необходимо их просто прописать через пробел:

После установки плагинов, как говорилось выше, все их названия и версии записываются автоматически в файл package.json. Теперь мой файл выглядит так:

Теперь нам необходимо создать таски для наших плагинов. Вот что у меня получилось в файле gulpfile.js:

Теперь давайте разберем из чего состоит отдельный таск:

  • taskname — название таска — название может произвольным;
  • source-files — директория до файлов исходников, необходимо указать полный путь и расширения файлов, например, путь до всех фалов с расширением .js будет таким — templatename/js/*.js;
  • .pipe() — метод, который позволяет работать с установленным плагином
  • plugin-name — название плагина;
  • dest(«filder-path») — путь до папки продакшена, т.е. куда выгрузить после отработки плагина

Теперь, например, посмотрите наглядно на таск для работы с файлами javaScript:

Если заметили в gulpfile.js мы в конце создали таск под названием watch. Как он работает, ведь плагина для него мы не устанавливали? Все верно, это встроенная функция gulp. Данный таск позволяет следить за файлами, в которых были сделаны изменения. Как только в определенных файлах находятся изменения запускается указанный таск.

Топ-пост этого месяца:  Создание фреймворка. Класс Router

Ниже запускаем все таски по умолчанию.

Все, проект готов. Для запуска задаем команду — gulp . Побегут строчки и если ошибок нет вы должны увидеть следующую картину.

Как видим, все наши задачи запустились, картинки сжались на 3.5%.

Хотелось бы отметить, что когда вы вносите изменения в gulpfile.js необходимо перезапускать команду gulp , предварительно остановив его, для того, чтобы изменения вступили в силу. Для остановки просто два раза подряд вводим комбинацию клавиш Ctrl + С , когда увидим мигающий курсор, снова вводим — gulp .

Разворачивание готовой сборки одной командой

Вы создали сборку, теперь хотите реально создать на ней проект. Достаточно скопировать папку сборки и запустить установку. Вообще при установке должны устанавливаться все последние версии зависимостей, включая сам gulp (при обновлении глобальной версии). Для этого нам необходимо подредактировать файл package.json. В блоке devDependencies, где перечислены установленные расширения вместо версии необходимо указать ключевое слово — latest . Вот как теперь выглядит мой файл:

Теперь для быстрого разворачивания проекта необходимо сделать следующее — копируем все файлы проекта Gulp за исключением папки node_modules в другую папку вашего проекта. Открываем локально консоль и вводим команду npm i после чего запуститься установка gulp и всех зависимостей. Все, можно начинать работу.

Дополнительные полезные плагины для Gulp

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

Plumber — дает возможность продолжить работу gulp при ошибке в коде. На самом деле, если вы в коде (html, js, sass, css) сделаете ошибку gulp выдаст ее в консоли и прекратит свою работу. Вам необходимо будет исправить ошибку и вновь запустить gulp.

Sourcemaps — создает карту подключений файлов css и js. Обычно в подобных проектах файлы стилей и скриптов делят на несколько частей для удобства. Так вот, чтобы потом ориентироваться в каком файле и в какой строке находится та или иная запись как раз и нужна карта подключений.

Tinypng — сжатие изображений. Работает по той же аналогии, что и imagemin, но сжимает значительно лучше.

SvgSprite — сборка svg-спрайта иконок. В последнее время я перешел с иконочных шрифтов на svg иконки. Чтобы уменьшить количество http запросов к серверу нужно собирать иконки в спрайты.

Rigger — объединяет html-файлы в один. Необходимо, когда вы разбиваете html-файлы на отдельные неизменяемые блоки, например, шапка сайта, футер и т.д.

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

Spritesmith — создание спрайтов картинок. Еще один плагин для сборки спрайтов, только в данном случае из иконок Png. Также использую его частенько, т.к. не всегда иконки в макете бывают в формате svg.

Rimraf — очистка папки dist. Бывает, что приходится очищать время от времени папку продакшена dist, т.к. в нем могут скопиться неиспользуемые файлы. Например, вы переименовали файл стилей в другое название, таким образом у вас в dist будут две копии — старая и новая.

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

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

Жду ваши комментарии ниже. Подписывайтесь на мой канал в телеграм. До встречи в следующих статьях!

Остались вопросы? Посмотрите видео.

Заур Магомедов

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

Скринкаст по Gulp

Gulp — замечательная система сборки и задач, но при всём обилии информации в интернете о ней — это, как правило, либо самые основы, либо «готовые решения», чтобы адаптировать которые нужно понимание, как что работает.

В этом скринкасте я постараюсь восполнить этот «недостающий фрагмент». Не просто «вот такой код работает», а «почему и как он работает», и как его получить. Это сделает использование готовых решений легче и приятнее. И позволит создавать свои.

Для работы с Gulp необходимо знание Node.JS.

Хотя бы выпуски 1-9 (основы), 13 (события), 23-25 (потоки), а желательно – и остальные выпуски первой части скринкаста по Node.JS.

В скринкасте используется новый Gulp версии 4.

Текущей версией является Gulp 3, и большинство руководств в интернете посвящены именно ему.

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

В репозитории Gulp есть ветка 4.0, в которой есть и сам код и документация и даже рецепты, уже адаптированные под Gulp 4. Так что на новой версии Gulp вы будете точно не один.

Сборка Gulp для разработки проекта

Основный список инструментов

Список инструментов, посредством которых создадим окружение для разработки фронтенд составляющей проекта (сайта):

  • Node.js (среда для выполнения JavaScript приложений);
  • npm (пакетный менеджер, входящий в Node.js, его будем использовать для загрузки Gulp, плагинов к нему и Bower);
  • Git (система контроля версий, необходима для работы Bower);
  • Bower (пакетный менеджер, будем использовать для загрузки таких библиотек как Bootstrap, jQueryи Popover);
  • Gulp (инструмент, который будем использовать для сборки проекта и выполнения других веб задач).

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

Файловую структуру проекта можно организовать по-разному. Это может зависеть как от предпочтений конкретного разработчика, так и от проекта, для которого он её создаёт.

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

Bootstrap 4 — Файловая структура проекта, сборку которого будем осуществлять с помощью Gulp

Для этого в корне проекта создадим папку assets , файлы gulpfile.js (будет содержать задачи для сборщика проекта Gulp) и .bowerrc (конфигурационный файл для менеджера Bower с помощью которого будем загружать Bootstrap, jQuery и Popper). В папке assets создадим ещё 2 папки: src (для исходных кодов), build (для готовых файлов, их в эту папку будет помещать сборщик Gulp). В папке src создадим ещё 6 каталогов ( bower_components , fonts , img , js , style и template ) и 1 файл ( index.html ).

Директорию bower_components отведём под компоненты, которые будем загружать с помощью Bower.

Директорию fonts будем использовать под шрифты.

В директорию img будем помещать исходные файлы изображений.

Директорию js будем использовать для js-файлов: main.js и my.js . Файл my.js будем использовать для написания своих скриптов, а main.js – для определения списка файлов, содержимое которых необходимо будет включить в итоговый js-файл. Под итоговым понимается файл, который должен получиться на выходе (в каталоге build ).

Указать какие исходные SCSS файлы Bootstrap 4 должны участвовать при компиляции в CSS, а какие нет, можно, например, с помощью дополнительного SCSS файла main.scss . Другими словами именно с помощью этого файла и будем определять тот набор стилей, который после компиляции будет подключен к веб-странице.

Кроме этого, к данному файлу можно также подключить файл с переопределёнными переменными Bootstrap, а также SCSS файл (например, my.scss ), в котором вы будете описывать свои стили.

Содержимое файла main.scss (пример):

Список js-файлов (находятся в каталоге ./js/dist/ ):

Определять какие js-файлы фреймворка Bootstrap 4 необходимо включить в итоговый js-файл проекта, а какие нет, будем посредством main.js .

Импортирование нужных файлов в main.js будем осуществлять посредством Gulp плагина gulp-rigger(он будет установлен и подключен к проекту позже), используя следующую конструкцию:

В данный файл можно также импортировать jQuery, Popper (необходим для работы компонентов Dropdown, Tooltip и Popover) и свои js-файлы.

Содержимое файла main.js (пример):

Установка инструментов

Установим инструменты «Node.js», «Git», «Gulp» и «Bower». С помощью их будем создавать окружение для комфортной разработки фронтенд проекта.

Установка Gulp. Для установки Gulp необходимо открыть командную консоль и выполнить в ней команду:

Ключ -g указывает npm, что пакет необходимо загружать не в текущую, а в основную папку.

Установка Bower. Установка Bower выполняется также как и Gulp.

Инициализация проекта и установка зависимостей

Начинается разработка проекта обычно с создания файла package.json (манифеста).

Файл package.json будет содержать общую информацию о проекте (название, версию, описание, имя автора и др.), а также данные о пакетах, от которых этот проект зависит.

Для создания манифеста, необходимо перейти в корневую папку проекта и ввести команду:

Теперь установим пакеты, которые будем использовать в проекте с помощью следующей команды:

Ключ —save-dev необходим, чтобы при установке пакета, информация о нём, автоматически прописывалась в секцию devDependencies файла package.json .

После установки всех зависимостей, файл package.json будет иметь следующее содержимое:

Если вы не хотите выполнять все перечисленные действия, то достаточно создать в корневой папке файл package.json с вышепредставленным содержимым и ввести команду:

После этого все зависимости проекта будут установлены автоматически.

Инициализация Bower и установка зависимостей

Определим папку, в которую Bower будет загружать пакеты. Для этого создадим файл .bowerrc и введём в него следующее:

Сохраним файл .bowerrc . Теперь все компоненты будут загружаться в каталог bower_components , находящийся в assets/src/ .

Выполним инициализацию Bower (создадим файл-манифест bower.json ). Создание файла bower.json можно осуществить с помощью команды (в корневой папке проекта):

В результате этих действий будет создан файл bower.json .

Загрузим Bootstrap 4 и пакеты от которых он зависит (Popper и jQuery) в наш проект с помощью Bower.

Для этого в консоли необходимо ввести следующую команду:

Ключ -save необходим для того, чтобы информацию о пакете записать в секцию dependencies файла bower.json .

В результате bower.json будет иметь следующее содержимое:

Если вы не хотите инициализировать Bower (bower.json) с помощью команды bower init и устанавливать пакеты вручную, то можете просто создать файл bower.json (например, с помощью файлового менеджера) и вставить в него вышепредставленное текстовое содержимое. Для установки зависимостей в проект достаточно будет ввести следующую команду:

Создание сборщика проекта (gulpfile.js)

Все действия, выполненные до этого, были подготовительными. Весь функционал, который будет выполнять создаваемое окружение, будет определяться файлом gulpfile.js .

Файл gulpfile.js представляет собой список задач, которые будут выполнять следующие действия:

  • сбор нескольких файлов стилей в один, компиляция полученного scss в css, добавление автопрефиксов, минимизация CSS и создание source map;
  • импорт всех необходимых js-файлов в один, минимизация этого файла и создание source map;
  • сбор html файла, перенос шрифтов, обработка (сжатие) картинок и автоматическое обновление страниц посредством Browser Sync.

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

Откроем файл gulpfile.js и вставим в него следующее содержимое:

Код файла gulpfile.js содержит большое количество комментариев. С помощью них, если потребуется, можно будет очень просто разобраться с тем, что выполняет та или иная часть кода.

Синтаксис создания задач на Gulp очень прост:

Функционал же задачи в большинстве случаев состоит из следующих действий:

  • выборки исходных файлов;
  • вызова различных плагинов, которые делают что-то с этими файлами;
  • выгрузки полученных файлов в папку назначения.

Как использовать окружение

Открыть командную строку (путь должен указывать на корневую папку проекта) и ввести gulp.

После ввода этой команды запустится задача по умолчанию ( default ). Эта задача запустит задачи build , webserver и watch . Задача build осуществит сборку проекта для продакшена. Все полученные файлы она поместит в папку build . Задача webserver запустит локальный веб-сервер с «живой перезагрузкой» страниц. Задача watch будет отслеживать изменения исходных файлов в папке src и автоматически запускать необходимые задачи. В результате содержимое папки build всегда будет находиться в актуальном состоянии.

Gulp для начинающих

Gulp – это инструмент автоматизации front-end разработки. Он поможет вам автоматизировать рутинные задачи и ускорит вашу работу. Возможно вы уже работали с другой системой сборки Grunt. Сравнение Gulp и Grunt показывает, что Gulp на данный момент более перспективный инструмент и стоит обратить на него внимание.

Основные задачи, которые вам поможет решить Gulp:

  • Минимизация и конкатенация Javascript и CSS файлов;
  • Минимизация HTML;
  • Использование CSS препроцессоров Sass, Less, Stylus и других;
  • Оптимизация изображений;
  • Автоматическая простановка вендорных префиксов;
  • Использование шаблонизаторов (Jade);
  • Удаление неиспользуемого CSS (UnCSS);
  • Валидация кода и тестирование;

Ссылки на ресурсы

Официальный сайт Gulp gulpjs.com
Gulp на Github
Каталог плагинов для Gulp http://gulpjs.com/plugins/
Документация Gulp (на английском) ссылка

Установка Gulp

На вашем компьютере должен быть установлен Node.js. Скачать его можно по ссылке. Небольшая инструкция по установке.

После установки Node.js откройте командную строку и введите команду:

npm install – это команда, которую использует Node Package Manager для установки Gulp на компьютер.

Флаг — global указывает, что Gulp надо установить на компьютер глобально для использования в любом месте системы.

Создание проекта

Создадим папку project для нашего проекта. Откройте командную строку и перейдите в папку с вашим проектом:

Команда npm init создает файл package.json, который содержит информацию о проекте (описание проекта и зависимости).

Когда файл package.json создан, мы можем установить Gulp с помощью команды:

На этот раз – g не был использован и Gulp локально установится в папку project.

— save — dev вносит в уже существующий файл package.json запись о Gulp в секцию devDependencies.

После выполнения команды вы увидите, что в директории project появилась папка node_modules, внутри которой лежит папка Gulp.

Мы почти готовы начать проект с Gulp. Но перед этим необходимо определиться со структурой проекта.

Определяем файловую структуру

Gulp достаточно гибок, чтобы работать с любой файловой структурой. В этом проекте мы будем использовать следующую структуру:

В папке app будет находится рабочая версия проекта. В папке dist будет лежат продакшн версия проекта.

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

Создадим первую задачу в файле gulpfile . js , в котором хранится вся конфигурация Gulp.

Пишем первую задачу Gulp

Базовый синтаксис задачи Gulp:

task — name ссылается на имя задачи, которое вы будете использовать для запуска задачи. Задачу можно запустить командой gulp task-name.

Для теста создадим задачу hello, которая выведет Hello Zell!

Запустим команду gulp hello в командной строке.

В командной строке появится сообщение Hello Zell !

Задачи в Gulp обычно намного сложнее. Вот как может выглядеть реальная задача:

Как вы видите, реальная задача содержит два дополнительных метода gulp . src и gulp . dest .

gulp . src говорит, какие файлы использовать для выполнения задачи.

gulp . dest указывает, куда положить файлы после выполнения задачи.

Создадим реальную задачу, где мы скомпилируем Sass файлы в Css.

Препорцессинг с Gulp

Мы можем компилировать Sass в Css с помощью плагина gulp-sass. Для установки gulp-sass надо запустить команду:

В gulpfile . js необходимо записать:

Создадим задачу sass ( )

[/crayon]
Далее нам необходимо создать файл

в папке app/scss и указать путь к этому файлу в gulp.src. Скомпилированный файл styles.css будет лежать в папке app/css. Укажем эту папку в gulp.dest.

Для проверки правильности настройки задачи, добавим функцию sass в файл styles . scss .

Если вы запустите команду gulp sass в командной строке, то вы увидите, что в папке app/css появится файл styles . css , в котором будет следующий код:

Теперь мы знаем, как работает задача sass.

Если вам необходимо выбрать несколько файлов в gulp.src, то можно использовать специальные выражения.

  • * . scss : Символ * — означает, что будут выбраны все файлы с расширением .scss в указанной директории;
  • * / * . scss — будут выбраны все файлы с указанным расширением в корневой папке и всех дочерних папках;
  • * / * . scss . Символ ! указывает, что данный файл надо исключить из выполнения задачи;
  • * . + ( scss | sass ) — позволяет выбрать для выполнения задач файлы с несколькими расширениями. В данном случае будут выбраны все файлы с расширениями . scss и . sass из указанной директории.

Теперь мы можем заменить app/scss/styles.scss на scss/ **/*.scss.

Любой файл с расширением .scss находящийся в папке app/scss будет скомпилирован. Например, если добавить print.scss, то мы увидим, что в папке app/css появится скомпилированный файл print.css.

Компилируем Sass «на лету»

С помощью метода watch можно отслеживать изменения в файлах. Синтаксис метода:

Добавить комментарий