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


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

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

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

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

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

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

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

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

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

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

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

Современная 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

Установка Gulp

Установка Gulp довольно простая. Для начала установите пакет Gulp глобально:

Затем установите его в свой проект:

Использование Gulp

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

Добавьте следующие команды в ваш файл gulpfile.js:

Установите gulp-uglify через npm выполнив npm install —save-dev gulp-uglify , а затем запустите задачу через gulp minify . Предположим, у вас есть файл с именем app.js в папке js, новый app.js будет создан в папке build и содержать сжатую версию js/app.js.

Что на самом деле здесь происходит?

Мы делаем несколько вещей в нашем файле gulpfile.js. Вначале мы загружаем модули gulp и gulp-uglify:

Затем определяем задачу с именем minify, которая при запуске вызывает функцию, заданную в качестве второго аргумента:

В конце, и это самое сложное, мы определяем, что наша задача должна делать:

Если вы не знакомы с потоками, а большинство фронтенд-разработчиков с ними не знакомы, то код выше ничего вам не скажет.

Потоки

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

В приведённом выше примере функция gulp.src() получает строку, которая соответствует файлу или набору файлов, и создаёт поток объектов представляющих эти файлы. Затем они переходят (или перетекают) в функцию uglify() , которая принимает объекты файлов и возвращает новые объекты файлов с минимизированным исходником. Этот результат затем перетекает в функцию gulp.dest() , которая сохраняет изменённые файлы.

Вот что происходит в виде схемы:

Когда есть только одна задача, функция ничего не делает. Тем не менее, рассмотрим следующий код:

Чтобы запустить это самостоятельно, установите gulp, gulp-jshint, gulp-uglify и gulp-concat.

Эта задача берёт все файлы соответствующие js/*.js (иными словами все файлы JavaScript из папки js), запускает для них JSHint, выводит отчёт, минимизирует каждый файл, а затем объединяет их, сохраняя их в build/app.js. В виде схемы:

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

Для лучшего понимания потоков прочтите Stream Handbook.

gulp.src()

Функция gulp.src() берёт один или несколько файлов или массив и возвращает поток, который может быть передан в плагины.

Gulp использует node-glob для получения указанных файлов. Проще всего объяснить на примерах:

  • js/app.js
    Соответствует определённому файлу.
  • js/*.js
    Соответствует всем файлам, заканчивающихся на .js в папке js.
  • js/**/*.js
    Соответствует всем файлам с расширением .js в папке js и всех вложенных папках.
  • !js/app.js
    Исключает js/app.js из соответствия, что полезно если вы желаете выбрать все файлы в папке за исключением определённого файла.
  • *.+(js|css)
    Соответствует всем файлам, заканчивающихся на .js или .css.

Другие функции также доступны, но в Gulp они обычно не применяются. Посмотрите документацию Minimatch ради подробностей.

Предположим, у нас есть папка с именем js, содержащая файлы JavaScript, некоторые минимизированы, а некоторые нет. Мы хотим создать задачу по минимизации ещё не уменьшенных файлов. Чтобы сделать это, мы выбираем все файлы JavaScript в папке, за исключением всех файлов, оканчивающиеся на .min.js:

Определение задач

Чтобы определить задачу используйте функцию gulp.task() . Для простой задачи эта функция принимает два параметра: имя задачи и функция для запуска.

Запуск gulp greet выведет «Здравствуй, мир» в консоли.

Задача также может быть списком других задач. Предположим, мы хотим определить задачу build, которая выполняет три других задачи: css, js и imgs. Мы можем сделать это, указав вместо функции массив с задачами:

Они будут запускаться асинхронно, так что вы не можете предполагать, что когда задача css завершится, то запустится задача js — на деле, это, скорее всего, не произойдёт. Чтобы убедиться, что задача завершила работу перед запуском другой задачи, вы можете указать зависимостей путём объединени массива задач с функцией. Например, чтобы определить задачу css, которая перед запуском проверит, что задача greet завершена, вы можете сделать так:

Теперь, когда вы запустите задачу css, Gulp выполнит задачу greet, подождёт, пока она окончится, а затем вызовет указанную функцию.

Задача по умолчанию

Вы можете определить задачу default, которая выполняется, когда вы просто запускаете gulp. Вы можете сделать это, определив задачу с именем default.

Плагины

Вместе с Gulp вы можете использовать ряд плагинов — более 600 на деле. Вы найдёте их список на странице плагинов, либо путём поиска gulpplugin в npm. Некоторые плагины помечены «gulpfriendly»; это не плагины, но они предназначены для работы с Gulp. Учтите, что при поиске непосредственно в npm, вы не увидите плагины из чёрного списка (прокрутите страницу с плагинами вниз и увидите больше).

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

Давайте расширим уже упомянутую задачу js:

Мы используем три плагина: gulp-jshint, gulp-uglify и gulp-concat. Вы можете увидеть в файлах README для плагинов, что их довольно легко использовать. Доступны некоторые настройки, но по умолчанию, как правило, всё хорошо.

Вы, возможно, заметили, что плагин JSHint вызывается дважды. Потому что первая строка вызывает JSHint для файлов, которые только присоединяют свойство jshint к файловым объектам без какого-либо вывода. Вы можете прочитать свойство jshint самостоятельно или передать его в jshint.reporter по умолчанию или в другой reporter , такой как jshint-stylish.

Два других плагина понятнее: функция uglify() минимизирует код, а функция concat(‘app.js’) объединяет все файлы в один с именем app.js.

gulp-load-plugin

Модуль, который я нахожу весьма полезным называется gulp-load-plugins, он автоматически загружает любые плагины Gulp из файла package.json и присоединяет их к объекту. Основное применение следующее:

Вы можете записать всё в одну строку ( var plugins = require(‘gulp-load-plugins’)(); ), но я не большой поклонник однострочного вызова require.

После запуска этого кода объект plugins будет содержать ваши плагины с именами в CamelCase-стиле (к примеру, gulp-ruby-sass будет загружен как plugins.rubySass ). Вы можете использовать их обычным путём. Например, наша задача js сократится так:

К этому прилагается файл package.json, который содержит нечто похожее:

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

Версия 0.4.0 gulp-load-plugins выпущенная в начале марта добавила отложенную загрузку плагина, которая улучшает производительность. Плагины не загружаются, пока их не вызовем, это значит, что вам не придётся беспокоиться о неиспользованных плагинах в package.json влияющих на производительность (хотя их, вероятно, следует убрать в любом случае). Другими словами, если вы запустите задачу, которая требует только два плагина, она не станет загружать все плагины, которые необходимы для других задач.

Отслеживание файлов

Gulp имеет возможность следить за изменением файлов и выполнять задачу или задачи при обнаружении изменений. Эта функция удивительно полезна (для меня, наверное, одна из самых полезных в Gulp). Вы можете сохранить Less-файл, а Gulp превратит его в CSS и обновит браузер без каких-либо действий с вашей стороны.

Для слежения за файлом или файлами используйте функцию gulp.watch() , которая принимает шаблон файлов или их массив (такой как gulp.src() ), либо массив задач для их запуска или выполнения функции обратного вызова.

Предположим, что у нас есть задача build, она превращает наши файлы шаблонов в HTML и мы хотим определить задачу watch, которая отслеживает изменение шаблонов и запускает задачу для преобразования их в HTML. Мы можем использовать функцию watch следующим образом:


Теперь при изменении файла шаблона будет запущена задача build, которая создаст HTML.

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

Другой отличительной особенностью gulp.watch() является то, что она возвращает watcher . Используйте его для прослушивания дополнительных событий или для добавления файлов в watch. Например, чтобы одновременно запустить список задач и вызвать функцию, вы можете добавить слушателя в событие change при возвращении watcher :

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

  • end
    Срабатывает, когда watcher завершается (это означает, что задачи и функции обратного вызова не будут больше вызываться при изменении файлов).
  • error
    Срабатывает, когда происходит ошибка.
  • ready
    Срабатывает, когда файлы были найдены и готовы к отслеживанию.
  • nomatch
    Срабатывает, когда запросу не соответствует ни один файл.
Топ-пост этого месяца:  База данных WordPress сайта – общее знакомство

Объект watcher также содержит некоторые методы, которые можно вызывать:

Все о WEB программировании

WEB программирование от А до Я

Заказать сайт:

Социальные сети:

Партнеры:

Настройка GULP для верстальщика

Доброго времени суток. В данной статье мы поговорим о настройках Gulp для верстальщика. Я на своем примере покажу как установить и настроить Gulp для проекта, какими пакетами я пользуюсь для автоматизации. Как настроить задачи в Gulp и как объединить выполнения нескольких задач в одну.

Что такое Gulp?

Gulp – это менеджер задач для автоматического выполнения их. Gulp написан на языке программирования JavaScript. Для запуска задач используется командная строка. Для конфигурации используется файл gulpfile.js. Распространяется через менеджер пакетов npm.

Установка Gulp для проекта.

Для установки gulp у нас должен быть установлен npm. Что такое npm и для чего он нужен очень хорошо описано в статье «npm для простых смертных» .

Открываем терминал и переходим в папку с проектом. Первое, что нам необходимо сделать это инициализировать npm для этого выполняем команду:

От вас потребуется:

  • Указать название проекта
  • Версию проекта
  • Описание проекта
  • Точку входа
  • Команду
  • Git репазиторий
  • Ключевые слова
  • Имя автора
  • Лицензия

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

Затем подтверждаем введенную информацию.

Отлично. NPM инициализировали. Теперь в корне появился файл packages.json – файл конфигурации менеджера пакетов.

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

Теперь установим gulp для проекта:

Все gulp для проекта установлен.

Давайте проверим. Создадим файл gulpfile.js и создадим в нем одну задачу test, которая будет выводить в консоль «Я работаю».

Первое мы подключаем gulp, и второе мы вызываем функцию task у gulp, которая принимает два параметра:

  • Название задачи
  • Анонимная функция в которой описывается наша задача

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

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

Browsersync, пакет который позволяет при изменении файлов обновлять страницу автоматически

Для установки в консоли выполняем следующую команду:

Теперь давайте создадим задачу, которая будет запускать browser-sync и отслеживать изменения файлов.

Задача называется serve. И browser-sync будет обновлять страницу браузера автоматически, если изменились файлы с расширением css (которые расположены в папке src/css) и с расширением html (которые расположены в папке src).

Для запуска данной задачи выполняем команду

Для верстки я использую sass. Поэтому для компиляции из sass в css я использую пакет gulp-sass.

Установка и настройка gulp-sass

Для установки gulp-sass в консоли выполняем команду:

Теперь создадим задачу sass, которая будет компилировать sass в css. И изменим задачу serve, чтобы наш browser-sync отслеживал вместо css файлы sass.

Теперь при запуске задачи serve, будет запускаться задача sass.

Отлично. Дальше установим и подключим пакет gulp-autoprefixer, который будет добавлять к css стилям префиксы (для старых браузеров).

Установка и настройка gulp-autoprefixer

Для установки gulp-autoprefixer выполним команду:

И добавим в задачу sass добавление префикса.

Теперь при запуске задачи sass у на с будет:

  1. Компилирование sass в css
  2. Добавление префиксов
  3. Сохранение файла в src/css

Следующий пакет объединяет все css файлы в один.

Установка и настройка contactCss

Для установки contactCss используем следующую команду:

И добавим выполнение данного пакета в задачу sass. (Будем все файлы css объединять в style.css)

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

Установка и настройка gulp-rename

Для установки gulp-rename выполним следующую команду:

Пока данный пакет не будем добавлять ни в какие задачи.

Установка и настройка пакета для минимизации CSS файлов – clean-css

Для установки clean-css выполним следующую команду:

Теперь давайте создадим задачу mincss, которая будет добавлять к имени файла суффикс «.min», минимизировать css файл и сохранять в app/css

Отлично, давайте установим gulp пакет, который будет минимизировать js файлы.

Установка и настройка пакета gulp для минимизации js файлов —gulp-uglify

Для установки gulp-uglify выполним следующую команду:

Теперь создадим задачу, которая будет добавлять к файлу суффикс «.min», минимизировать файл js и сохранять в app/js

Мы создали основные задачи. Но две последние должны выполняться при выкладывании проекта в продакшен. И выполняться должны вместе. Давайте создадим задачу, которая будет выполнять задачу mincss, а потом minjs

Создание задачи в gulp

Создадим задачу min, которая будет запускать задачи mincss и minjs

Все. Давайте еще зададим задачу по умолчанию.

Задание задачи по умолчанию gulp

Вывод.

Мы с вами рассмотрели для чего нужен gulp, как его установить. Установили дополнительные пакеты, которые необходимы для верстки и задали задачи.

Gulp: инструкция для начинающих

Настройка сборщика для сборки Pug/Stylus, создания SVG-спрайтов и ещё чего-то там. Если интересно — читай.

Рассказывать про то, что такое Gulp, как установить Node.js и прочее не буду. Инфы итак вагон и маленькая тележка. Лучше сфокусируемся на нужном.

Посмотреть, поковырять, скачать себе мою сборку можно с GitHub.

1. Что используется и что происходит?

  • Шаблонизатор — Pug(Jade), файлы компилируются в обычный HTML.
  • Препроцессор — Stylus, так же компилируются в обычный CSS.
  • С помощью autoprefixer, в стилях расставляются префиксы.
  • Стили и JS собираются, минимизируются.
  • SVG-иконки собираются в спрайт.
  • Шрифты конвертируются из ttf в woff и woff2.
  • Картинки оптимизируются через TinyPNG (нужно зарегистрироваться и указать ключ).
  • Используется browser-sync. При изменении каких-то файлов, страница автоматически перезагружается.
  • Если допустить ошибку в .styl/.pug — выводится ошибка.
  • Gulp следит не только за изменением файлов, но и , сука, за добавлением новых.

2. Что там по папкам?
У меня файловая структура имеет такой вид:

Все задачи делятся на две категории. Задачи из первой используются при разработке и постоянно выполнятся. Из второй (конвертация шрифтов, оптимизация картинок, минификация CSS/JS) — запускаются один раз, после окончания разработки.

Давайте пробежимся по gulpfile.js и посмотрим какие таски что делают.

BrowserSyns.
Запукает сервер, при изменении каких-то файлов — перезагружает страницу.

Images/Fonts/Scripts.
Переносит картинки, шрифты и скрипты.

Pages.
Компилирует .pug файлы в HTML.

Styles.
Компилирует стили (использую stylus), расставляет префиксы.

SvgSpriteBuild.
Собирает спрайт из SVG-иконок из папки images/icons.

TinyPNG.
Прогоняет jpg, jpeg, png файлы через сервис TinyPNG.

ttf2woff/ttf2woff2.
Генерирует woff и woff2 файлы из ttf.

cssMin/jsMin.
Минифицирует CSS/JS файлы и сохраняет их с суффиксом «.min».

Установка.

Скачиваем gulpfile.js, package.json и mkdir.bat.

  1. Переходим в папку с проектом, на Windows удерживаем Shift и кликаем правой кнопкой где-нибудь в папке, выбираем «Открыть окно команд». Открывается командная строка. Вводим «npm install», ждём пока плагины из package.json установятся.
  2. Чтобы вручную не создавать папки, запускаем mkdir.bat и скрипт сам всё создаёт.
  3. Чтобы использовать TinyPNG, регистрируемся у них на сайте, получаем ключ и вводим его в gulpfile.js в таске «tinypng».

Рабочий процесс.

В командной строке вводим «gulp». По умолчанию, gulp запускает сервер, открывает в браузере страницу, компилирует и переносит всё, что надо и начинает следить за изменением файлов.

Кроме того, gulp следит не только за изменением файлов, но и за добавлением новых. То есть, если вы создали новую страницу, файл стилей или скриптов или добавили новую иконку, не нужно перезагружать всё. Gulp автоматом их подхватит.

Так же создастся SVG-спрайт. ID для элементов спрайта берутся из названий файлов иконок (как использовать и как создавать его вручную писал тут).

Создаём pug-страницы в /dev/pages, styl-стили — в styles, SVG-иконки кидаем в /images/icons, а шрифты, в формате ttf, — в папку /fonts.

Deploy.

После окончания вёрстки, вводим команду «gulp deploy». TTF-шрифты в папке конвертируются в woff и woff2, картинки прогонятся через TinyPNG, а CSS и JS — минимизируются.

Введение в Gulp.js

JavaScript-разработчики уделяют программированию очень мало времени. Большая часть работы включает в себя выполнение рутинных заданий:

  • генерирование HTML из шаблонов и файлов содержимого;
  • сжатие изображений;
  • компиляция Sass в CSS код;
  • удаление значений console и debugger из скриптов;
  • объединение и минификация файлов CSS и JavaScript;
  • развертывание файлов на серверах.

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

Звучит сложно!

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

  • Сначала автоматизируйте самые монотонные.
  • Постарайтесь не усложнять процесс сборки.
  • Выберите программное обеспечение для сборщика проектов.

Сборщики проектов: варианты

Первым популярным решением подобного рода был Grunt – сборщик проектов, созданный на основе Node.js. Grunt был невероятно популярным. Но низкая скорость работы и сложность настройки были его слабыми местами.

Затем появился Gulp , обладающий следующими преимуществами:

  • Возможность просмотра файлов.
  • Плагины для Gulp просты и предназначены для выполнения одной задачи.
  • Код конфигурации на JavaScript, который легче для понимания.
  • Gulp быстрее из-за того, что использует потоки Node.js для передачи данных через серию плагинов.

Версии Gulp

Gulp.js 3.9.1 был единственной версией много лет. И хотя был доступен Gulp 4, его нужно было устанавливать с помощью npm install gulp@next . Причина этого заключалась в том, что плагины оставались совместимыми. Но Gulp 4 использовал новый синтаксис конфигурации.

10 декабря 2020 года Gulp.js 4.0 был объявлен единственной версией и появился в менеджере пакетов npm. Любой, кто станет использовать npm install gulp , получит версию 4. Эта версия будет использоваться и в данном руководстве.

Шаг 1: установите Node.js

Node.js можно загрузить для Windows, macOS и Linux с nodejs.org/download/ . Доступны различные варианты платформы для установки из бинарных файлов, модульных сборщиков и Docker-образов.

Примечание: Node.js и Gulp работают в Windows, но некоторые плагины могут работать некорректно, если они зависят от собственных бинарных файлов Linux. Одним из вариантов решения проблемы в Windows 10 является подсистема Windows для Linux .

После установки запустите командную строку и введите следующую команду. Она позволит узнать номер версии:

Вскоре вы станете активно использовать npm – менеджер пакетов Node.js, который необходим для установки модулей. Узнайте номер его версии:

Примечание: модули Node.js можно устанавливать глобально, чтобы они были доступны во всей ОС. Но большинство пользователей не будут иметь права на запись в глобальные библиотеки, если у команд npm не будет префикса sudo . Существует несколько вариантов, как исправить разрешения npm . Но можно изменить каталог по умолчанию. Например, в Ubuntu/Debian:

Затем добавьте следующую строку в конце

Шаг 2: установите Gulp глобально

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

Убедитесь, что Gulp установлен, проверив его версию:

Шаг 3: Настройте проект

Примечание: пропустите этот шаг, если у вас уже есть файл конфигурации package.json .

Предположим что, у вас есть новый проект в папке project1 . Перейдите в каталог и инициализируйте его с помощью npm:

Затем нажмите « Return », чтобы принять значения по умолчанию. Файл package.json , в котором хранятся параметры конфигурации npm , будет создан автоматически.

Примечание: Node.js устанавливает модули в папку node_modules . Нужно добавить их в свой файл .gitignore , чтобы убедиться, что они не попадут в репозиторий. При развертывании проекта в другой системе можно будет запустить npm install , чтобы их восстановить.

Предполагается, что ваш проект содержит папки, перечисленные ниже.

Папка src: предварительно обработанные исходники

Содержит следующие подкаталоги:

  • html ‒ исходные файлы и шаблоны HTML;
  • images ‒ оригинальные несжатые изображения;
  • js – предварительно обработанные файлы скриптов;
  • css – предварительно обработанные файлы Sass ( .scss )

Папка build: скомпилированные/обработанные файлы

Когда понадобится, Gulp создаст файлы и подпапки:

  • html ‒ скомпилированные статические файлы HTML;
  • images ‒ сжатые изображения;
  • js ‒ единственный объединенный и минифицированный файл JavaScript;
  • css – единственный скомпилированный и минифицированный файл CSS.

Примечание: Если вы работаете в Unix-системе, то можете воссоздать структуру исходных папок с помощью следующей команды:

Шаг 4: Установите Gulp локально

Теперь можно установить Gulp в папку проекта:

Эта команда устанавливает Gulp как зависимость. После чего раздел « devDependencies » в package.json обновляется соответствующим образом. В рамках этого руководства предполагается, что Gulp и все плагины являются зависимостями.

Альтернативные варианты развертывания

Зависимости разработки не устанавливаются, если в операционной системе для переменной среды NODE_ENV задано значение production . Обычно это делается на сервере с помощью команды macOS/Linux:

В этом руководстве предполагается, что ресурсы будут скомпилированы в папку build , переданы в репозиторий Git или загружены непосредственно на сервер.

Чтобы использовать ресурсы на работающем сервере, изменить способ их создания. Например, файлы HTML, CSS и JavaScript сжимаются при использовании, но не в средах разработки. В этом случае удалите —save-dev при установке Gulp и его плагинов. Например:

Эта команда устанавливает Gulp как зависимость приложения в разделе « dependencies » файла package.json . Сборщик будет установлен при вводе npm install и может быть запущен везде, где развернут проект.

Шаг 4: Создайте файл конфигурации Gulp

Создайте новый файл конфигурации gulpfile.js в корне папки проекта. Добавьте в него базовый код:

Код ссылается на модуль Gulp, устанавливает для переменной devBuild значение true при запуске в режиме разработки и определяет расположение исходных файлов и папок сборки.

gulpfile.js ничего не сделает до того, пока вы не выполните следующий шаг.

Шаг 5: Создайте таск для Gulp

Сам по себе Gulp ничего не делает. Необходимо:

  1. Установить плагины Gulp.
  2. Написать инструкции (таск), которые они должны выполнить.

Чтобы найти нужные плагины, используйте библиотеку Gulp на gulpjs.com/plugins/ , на npmjs.com или используя поисковую систему Google.

Большинство заданий (тасков) будут использовать:

  • src (folder) — для создания потока из файлов в исходной папке;
  • dest (folder) — для вывода потока в виде файлов в целевую папку сборки.


Любое количество методов плагина может быть вызвано с помощью .pipe (plugin) между .src и .dest.

Задания для изображений

Создадим инструкцию (таск), которая сжимает изображения и копирует их в соответствующую папку сборки. Поскольку этот процесс может занять некоторое время, будем сжимать только новые и измененные файлы. Для этого понадобятся два плагина: gulp-newer и gulp-imagemin . Установите их с помощью командной строки:

Теперь можно ссылаться на оба модуля в верхней части gulpfile.js :

Затем определите функцию обработки изображений в конце gulpfile.js :

Этот код делает следующее:

  1. Создает новую функцию таска с именем
  2. Определяет папку out , в которой будут находиться файлы сборки.
  3. Читает поток файлов из папки src/images/ . **/* .
  4. Передает все файлы в модуль gulp-newer .
  5. Передает оставшиеся новые или измененные файлы через gulp-imagemin , который устанавливает необязательный аргумент optimisLevel .
  6. Сохраняет сжатые изображения в папку Gulp dest/images/ .
  7. Экспортирует таск images , который вызывает функцию images .

Сохраните gulpfile.js и поместите несколько изображений в папку проекта src/images/ . Затем запустите задание из командной строки:

Все изображения будут сжаты, и вы увидите следующее:

Попробуйте снова запустить gulp images . Файлы не обрабатываются, поскольку ни одно из изображений не было изменено.

Задание для HTML

Создадим таск, который копирует файлы из исходной папки HTML. Мы можем сжать HTML-код, чтобы удалить ненужные пробелы и атрибуты, используя плагин gulp-htmlclean.

Также будет установлен плагин gulp-noop . Он не выполняет никакой операции:

Эти модули загружаются в начале gulpfile.js :

Теперь можно экспортировать функцию для обработки html в конец gulpfile.js :

  1. Мы передаем HTML только через gulp-htmlclean , если NODE_ENV установлен на production . Поэтому HTML остается несжатым во время разработки. Что будет полезно для отладки.
  2. Экспортируемый таск html использует series() для объединения заданий, которые выполняются друг за другом. В этом случае функция images() запускается до функции html(). В результате файлы HTML могут ссылаться на изображения.

Сохраните gulpfile.js и запустите gulp html из командной строки. Будут выполняться оба таска – html и images .

Задание для JavaScript

Обработаем файлы JavaScript, построив сборщик пакетов. Он делает следующее:

  1. Гарантирует, что зависимости будут загружены с помощью плагина gulp-deporder . Анализирует комментарии в верхней части каждого скрипта, чтобы обеспечить правильное упорядочение – например, // requires: defaults.js lib.js .
  2. Объединяет все файлы скриптов в один файл js , используя gulp-concat .
  3. Удаляет значения console и debugging с помощью gulp-strip-debug при работе в режиме разработки.
  4. Минифицирует код с помощью ES6-совместимого gulp-terser .
  5. Добавляет карту источника в режиме разработки с помощью gulp-sourcemaps .

Установите модули плагинов:

Затем загрузите их в начало gulpfile.js :

Примечание: для большей эффективности модули gulp-strip-debug и gulp-sourcemaps загружаются только в режиме разработки.

Экспортируйте новую функцию задания:

Функция sourcemap.init() вызывается до преобразования кода, а sourcemaps.write() — после завершения.

Добавьте файлы JavaScript в папку src/js/ . Затем запустите gulp js .

Задание для CSS

Создадим задание (таск), которое будет компилировать файлы Sass ( .scss ) в один файл .css , используя gulp-sass . Это плагин Gulp для node-sass , который связан с LibSass C/C++ . Предполагается, что ваш основной файл Sass scss/main.scss отвечает за загрузку всех файлов.

Инструкция также будет использовать PostCSS через плагин gulp-postcss . PostCSS требуется собственный набор плагинов:

  • postcss-assets – предназначен для управления ресурсами. Он позволяет использовать такие свойства, как background: resolve (‘image.png’); разрешить пути к файлам или к background: inline (‘image.png’); встроить изображения с закодированными данными.
  • autoprefixer – предназначен для автоматического добавления вендорных префиксов в свойства CSS.
  • css-mqpacker – для упаковки нескольких ссылок на один и тот же медиа запрос CSS в одно правило.
  • cssnano – для минификации кода CSS.

Source Map будет добавлена ​​в файл CSS при повторном запуске в режиме разработки с помощью gulp-sourcemaps .

Установите все модули:

Загрузите их в начало gulpfile.js :

Теперь можно экспортировать новый таск в конец gulpfile.js . Обратите внимание, что задание images установлено ​​как зависимость, потому что плагин postcss-assets может ссылаться на изображения в процессе сборки:

Топ-пост этого месяца:  Что такое лендинг и для чего он нужен в интернете

При этом .on(‘error’, sass.logError) гарантирует, что Sass выводит синтаксические ошибки на консоль, не останавливая работу Gulp.

Сохраните файл, добавьте файлы Sass .scss и запустите таск из командной строки:

Шаг 6: Автоматизируйте выполнение заданий

Чтобы запустить все задания в одной команде, экспортируйте таск build в gulpfile.js :

Метод gulp.parallel() выполняет все задания одновременно. Его можно комбинировать с gulp.series() для создания сложных цепочек зависимостей. В этом примере exports.html, exports.css и exports.js запускаются параллельно. Но каждый из них может иметь последовательности зависимостей, включая таск images.

Введите в командной строке gulp build , чтобы выполнить все таски.

Кроме этого Gulp предоставляет метод .watch() , который может запускать соответствующий таск при каждом изменении файла. Он передает набор файлов или папок для мониторинга, любые и функцию таска для запуска (необязательно в методах gulp.series() ли gulp.parallel() ).

Экспортируем новый таск watch в конец gulpfile.js :

Gulp нужно знать, когда будет завершена функция таска. Этого можно добиться, используя JavaScript Promise, транслятор событий, дочерний процесс или функцию обратного вызова. В данном примере мы используем функцию обратного вызова done() , чтобы указать, что все задания watch() были настроены.

Вместо того чтобы запустить gulp watch немедленно, добавим таск по умолчанию. Его можно выполнить, запустив gulp без дополнительных аргументов:

Сохраните gulpfile.js и введите в командной строке gulp . Ваши изображения, HTML, CSS и JavaScript будут обработаны. Затем Gulp продолжит проверку обновлений и будет повторно выполнять задания по мере необходимости. Нажмите Ctrl/Cmd + C , чтобы прервать мониторинг и вернуться в командную строку.

Шаг 7: Пожинаем плоды!

Другие плагины, которые могут быть полезны:

  • gulp-load-plugins : загружает все модули плагинов Gulp автоматически;
  • gulp-preprocess : простой препроцессор HTML и JavaScript;
  • gulp-less : плагин препроцессора Less CSS ;
  • gulp-stylus : плагин препроцессора Stylus CSS ;
  • gulp-size : отображает размеры файлов;
  • gulp-nodemon : использует nodemon для автоматического перезапуска приложений Node.js при их изменении.

Таски Gulp могут запускать любой JavaScript- код или модули Node.js. Они не обязательно должны быть плагинами. Например:

  • browser-sync : автоматически перезагружает ресурсы, когда происходят изменения;
  • del : удаляет файлы и папки (может очищать папку build в начале каждого запуска).
  • множество плагинов ;
  • конфигурация с использованием pipe легко читаема и понятна;
  • js можно адаптировать для использования в других проектах;
  • упрощает развертывание;
  • домашняя страница Gulp ;
  • плагины Gulp ;
  • домашняя страница npm .

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

Gulp – это отличный вариант для автоматического запуска заданий и упрощения процесса разработки.

Галп – Gulp для начинающих

Поиск
Рубрики

перевод, произношение, транскрипция, примеры использования

Я сглотнул, когда увидел счёт (за что либо). ☰

Она проглотила (очень быстро съела) свой завтрак и побежала на автобус. ☰

Перед тем как нырнуть, он сделал большой вздох. ☰

Измученные скакуны лежали на земле глотая воздух. ☰

He took a huge gulp of brandy.

Он сделал огромный глоток бренди. ☰

He finished it at a single gulp.

Он прикончил выпивку одним глотком. ☰

“That’s a lot of money,” she gulped.

“Это большие деньги”, — сказала она сглотнув. ☰

We rushed outside and gulped in the sweet fresh air.

Мы выбежали на улицу и жадно вдохнули сладкий свежий воздух. ☰

He gulped for help after choking on a big piece of meat.

Подавившись большим куском мяса, он, задыхаясь, позвал на помощь. ☰

The soldier took pride in being able to gulp back a whole pint of beer at once.

Солдат гордился тем, что может в один присест выпить целую пинту пива. ☰

She told him not to gulp his food.

Она сказала ему не глотать еду не пережёвывая. ☰

Hannah drained her mug in one gulp.

Ханна осушила свою кружку одним глотком. ☰

Charlie drank the whisky in one gulp.

Чарли выпил виски одним глотком. ☰

She swallowed the whole spoonful at one gulp.

Она проглотила целую ложку одним махом. ☰

He gulped back tears as he thanked the rescuers.

Еле сдерживая слёзы, он поблагодарил спасателей. ☰

She gulped down her drink and made a hasty exit.

Она разом проглотила свой напиток и поспешно вышла. ☰

He gulped down vast quantities of champagne at the party.

Он выпил огромное количество шампанского на вечеринке. ☰

Gulp. Часть 1. Зачем он нужен? :: Блог веб разработчика

Что вообще такое Gulp?

О том что такое Gulp, наверное, не писал только ленивый и, тем не менее, все чаще я слышу один и тот же вопрос: Зачем вообще использовать Gulp? В чем дзен то?

Итак, объясняю на пальцах:

Допустим, вы верстальщик (для примера). Верстаете какой-то проект в котором вам понадобилось комплировать LESS в CSS. Что вы делаете? Правильно, ищите плагин для вашей любимой IDE, настраиваете его и запускаете. Далее вам внезапно понадобилось автоматически собирать спрайты (ведь вручную их делать в фотошопе довольно муторное занятие, поверьте, я знаю). Вы снова ищите плагин для своей любимой IDE, но не находите (скорее всего). Ищите стороннее решение, находите, например скрипт на питоне для автоматического создания спрайтов, долго его устанавливаете и настраиваете (с питоном то вы не бум-бум) и наконец запускаете. Далее вам может понадобиться компилировать, например React.js, так же автоматически. Вы снова ищите плагин под свою IDE, может быть даже находите.

Вроде все работает как надо, так в чем проблема то?

И тут у вас появляется второй проект, который требует всего того же самого, плюс/минус небольшие изменения. И что? Копировать настройки всех плагинов или заного их настраивать? А если вы завтра смените IDE или отдадите проекту другому верстальщику? Вот тут то и помогут таск-менеджеры.

На самом деле мир не ограничивается Gulp-ом, но мы будем рассматривать его, как наиболее адекватный, на мой взгляд.

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

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

Далее: Часть 2. Установка Gulp

Gulp — автоматизация процесса разработки

Значимую роль в технологиях веб-разработки приобрели система автоматизации процесса разработки. Наиболее известные из них — это старичок Grunt и более молодой Gulp, который отличается более простым и понятным синтаксисом.

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

Потому что она может:

  • Автоматически перезагружать браузер при любых изменениях в файлах проекта (более не надо затирать клавиши Ctrl/Cmd+R)
  • Сжимать и склеивать скрипты и стили
  • Проверять скрипты и стили на ошибки
  • Использовать различные препроцессоры — SASS/LESS/Stylus, Jade и так далее.
  • Оптимизировать изображения

Конечно, возможностей больше. Здесь лишь перечислены основные из них.

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

Установка

Устанавливается Gulp при помощи NPM (Node Package Manager).

Подразумевается под тем, что вы уже установили Node.JS на свой компьютер. Или, по-крайней мере, знаете, как это сделать.

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

Устанавливаем Gulp:

Структура папок в проекте носит произвольный характер. Здесь указана такая структура, которая удобна автору статьи.

Перейдём в директорию с проектом и создадим пустой файл для конфигурации.

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

Конфигурация

Приступаем к настройке файла конфигурации gulpfile.js , который мы создали в корневом каталоге проекта.

После сохранения файла, в консоли, находясь в папке проекта, запустите команду gulp .

Тестовый проект с уже созданными файлами для Stylus, Jade и CoffeeScript можно скачать по адресу:

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

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

Первые шаги в разработке могут быть сложными – ведь вы еще не знаете об инструментах и средствах, которые могут облегчить вашу задачу. О них – эта статья от преподавателя 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, вы рискуете – может и «не завестись». Скорее всего, вам придется частично или полностью переустанавливать модули.

Топ-пост этого месяца:  Методы верстки сайтов – как верстаются сайты

Код из этой статьи можно использовать как основу при автоматизации разработки в ваших проектах. Вы можете легко модифицировать 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, вы рискуете – может и «не завестись». Скорее всего, вам придется частично или полностью переустанавливать модули.

Gulp для ускорения разработки

Что такое Gulp, зачем он нужен, его возможности, как установить и как начать использовать в разработке сайтов. Обновление до Gulp 4

Gulp — что это такое и зачем он нужен

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

  1. Автоматическая перезагрузка страницы при сохранении кода
  2. Использование препроцессоров для CSS (например, Sass), для JavaScript (например, CoffeeScript), для HTML (например, Pug)
  3. Минификация CSS, JavaScript, HTML (уменьшение размера кода путём удаления ненужных символов и пробелов)
  4. Соединение файлов в один (например, из пяти CSS файлов сделать один файл CSS)
  5. Создание , удаление и переименование файлов и папок проекта
  6. Автоматическое создание вендорных префиксов (-webkit, -moz, -o, -ms), чтобы старые версии браузеров поддерживали все css-свойства
  7. Оптимизация изображений
  8. И многое другое.

Как установить Gulp глобально в системе

Для установки Gulp нам понадобится пакетный менеджер npm , который входит в состав Node.js . С помощью npm мы будем устанавливать пакеты в каталог node_modules . Если Node.js не установлен, то устанавливаем его. Далее можно начать установку Gulp.

Открыть командную строку и ввести следующий текст:

Коротко о том, что это значит:

  • npm — это менеджер пакетов, с помощью которого будем устанавливать Gulp
  • i (install) — означает установка
  • gulp — это установка Gulp
  • -g (global) — установить глобально, а не в какую-то конкретную папку

Gulp установлен глобально. Приступим к установке Gulp в папку проекта.

Установка Gulp в папку проекта

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

Создадим корневую папку для нашего проекта. Назовём, например, gulp-project . Зайдём в неё, зажмём клавишу shift и выберем в контекстном меню пункт Открыть PowerShell здесь или Открыть окно команд .

Введём следующий текст для создания файла package.json .

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

Начнём создание файла package.json

Вводим имя проекта, описание и автора, остальные пункты оставить по умолчанию, нажатием клавиши «Enter». Ответив на все вопросы, будет создан файл package.json.

Теперь мы можем установить Gulp в наш проект, а именно в папку gulp-project , которую мы создавали для нашего проекта.

Для установки Gulp в нашу папку воспользуемся командой:

Есть несколько отличий от установки Gulp глобально.

Здесь нет -g , т.е. Gulp будет устанавливаться локально в ту папку, в которой была открыта консоль. И появилась запись —save-dev, благодаря этому пакет и его версия будет добавлен в package.json. Это нужно для последующей быстрой установки пакетов в других проектах путём копирования файла package.json

После установки gulp мы увидим примерно следующее:

Мы установили Gulp в нашу папку gulp-project , в которой появилась новая папка node_modules . В ней и находится Gulp, а так же будут храниться все зависимости нашего проекта.

Так же если зайти в package.json , то увидим изменения:

Создание структуры Gulp проекта

Структура может быть практически любой, но я рекомендую именно такую, она наиболее распространённая:

    gulp-project/

      app/

        css/ fonts/ img/ js/ libs/ sass/
      • index.html

      dist/ node_modules/ gulpfile.js

    • < >package.json
  • app/ — рабочая папка проекта, в ней будут находиться все исходники — шрифты, изображения, css и js файлы.
  • dist/ — папка продакшена, в ней будет находиться готовый оптимизированный проект
  • node_modules/ — папка с модулями и зависимостями
  • gulpfile.js — файл конфигурации, в котором будем описывать все задачи Gulp
  • package.json — файл, содержащий информацию о проекте (название, описание, автор и т.д.)

Как создавать задачи (таски) Gulp

Создадим файл gulpfile.js и начнём его заполнение.

Сначала нужно подключить Gulp к проекту. Для этого нужно ввести переменную и присвоить ей имя пакета, который находится в папке node_modules. Для этого напишем следующий текст:

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

Gulp таск имеет следующий вид:

[‘имя-другого-таска’] или gulp.parallel(‘имя-другого-таска’) — это необходимо писать в том случае, если до выполнения нашего таска нужно выполнить другой таск(и).

Создадим простейший task, который будет выводить строку ‘Привет, Мир!’.

‘output’ — имя таска, оно может быть любым.

Для вызова таска нужно выполнить команду gulp имя-таска (в нашем случае output ). Сделаем это.

Запуск gulp таска по умолчанию

Таск будет выполнять все перечисленные в ней таски одной командой gulp

И теперь чтобы запустить наш таск, достаточно просто написать gulp

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

Это был самый простой пример работы Gulp. Для более сложных задач используются дополнительные методы.

Начинаем работать с gulp.js

Для автоматизации рутинных, повторяющихся процессов мы используем gulp.js. В своем шаблоне мы используем следующие его возможности:

  • компиляция scss в css, jade в html
  • автоматическое проставление вендорных префиксов
  • оптимизация изображений
  • конкатинация скриптов
  • сжатие скриптов и стилей
  • создание иконочных шрифтов и svg-спрайтов
  • проверка html на валидность

Это основные, есть еще несколько мелочей, об этом позже. Шаблон нашей команды вы найдете на гитхабе

Установка

Gulp — это npm-пакет для node.js, поэтому устанавливаем node.js (https://nodejs.org/en/). Устанавливаем как обычную программу.

После установки перейдите в папку с проектом и в консоли введите:

Последуют разные сообщения, на все можете отвечать утвержительно. Эта процедура инициализации необходима для установки пакетов. После её завершения введите в консоль:

После выполнения этой команды вы увидите в вашем проекте папку node_modules. Это папка для хранения npm-пакетов. В данном случае вы установили пакет локально, т.е. все файлы gulp лежат в проеке. Как вы могли заметить это занимает некоторое время. Для того, чтобы не устанавливать каждый раз кучу модулей локально — устанавливайте пакеты глобально, а затем делайте ссылку на них в проекте. Как это сделать:

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

Далее установим остальные пакеты и слинкуем их:

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

Пишем gulpfile

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

Обычно в репозитории плагинов есть информация о том, как прописывать зависимость. Далее объявим переменные для папок проекта:

Их будем использовать в тасках. Напишем первый таск — для компиляции jade

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

Постепенно вы привыкните к синтаксису. Обычно в репозитории gulp-модуля есть примеры тасков. Обратите внимание на строчку

При возникновении ошибок компиляции будет “вылетать” gulp, и нужно запускать заново. Но с плагином plumber этого не будет. Для того, чтобы перезапускать браузер после каждого прохождения таска используется команда:

Для конкатинации скриптов служит следующий таск:

Он соединит все таски из папки js/all в один скрипт. Обычно это разные плагины.

Таски для синхронизации папок проекта между собой:

Для того, чтобы отслеживать изменения в проекте и запускать таски автоматически используем gulp.watch

Для обновления браузера и локального хоста используем browser-sync

Теперь, чтобы запустить все это хозяйство напишем дефолтный таск gulp

Здесь мы указываем какие таски необходимо запустить вместе. Благодаря таску watch, gulp не закончит работу, а будет ждать изменений.

Для того, чтобы запустить дефолтный таск введите

Откроется браузер и все будет компилироваться и обновляться автоматически.

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