Gulp. Урок 4. Gulp debug и работа с плагинами


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

gulp: работа с gulp.src и gulp.dest

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

структура dev папки для scss:

так вот как сделать что — бы на выходе было следующее:

пробовал в gulp.dest задавать колбек и в ней менять file.relative :

В результате чего получил ошибку о невозможности модифицировать file.relative

Error: File.relative is generated from the base and path attributes. Do not modify it.

Правда не пробовал саму path модифицировать.
А вот при такой выборке:

Складывает как мне необходимо. Только бы вот еще ложил скомпилированные файлы в паку css .
Подскажите какие есть варианты и способы раскладывать скомпилированные файлы так как мне захотелось и те папки которые я укажу?

Введение в 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.
Топ-пост этого месяца:  Первой жертвой BERT стал сайт издания The New York Times

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. Урок 4. Gulp debug и работа с плагинами

Debug Vinyl file streams to see what files are run through your Gulp pipeline

Type: string
Default: gulp-debug:

Give it a custom title so it’s possible to distinguish the output of multiple instances logging at once.

Type: boolean
Default: true

By default only relative paths are shown. Turn off minimal mode to also show cwd , base , path .

The stat property will be shown when you run gulp in verbose mode: gulp —verbose .

Type: boolean
Default: true

Type: boolean
Default: true

Print the file count.

Type: Function
Default: fancy-log

Provide your own logging utility in place of fancy-log. The message is passed as a string in the first argument. Note that ANSI colors may be used in the message.

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 можно отслеживать изменения в файлах. Синтаксис метода:

Все о 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

Установка 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
    Срабатывает, когда запросу не соответствует ни один файл.

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

Пример верстки на флексах с использованием gulp и less.

Разработку любого сайта следует начинать с настройки инструментов.

Рассмотрим инструменты и подготовим их к работе.

Все материалы я буду добавлять сюда: https://github.com/pikaweb

Для работы с репозиториями нам пригодится GitBash. Скачать его можно отсюда:

В качестве локального сервера я использую OpenServer:

Кроме того понадобится установить node.js

Перейдем к подготовке. Создаем каталог в \Ваш путь\OpenServer\domains\

Запускаем OpenServer. Входим в его настройки, вкладка «Домены» и добавляем домен для созданной ранее папке. Запускаем сервер.

Теперь сайт будет доступен при вводе в браузере http://domain-name/

Настраиваем git (если еще не настроен). Я предпочитаю bitbucket т.к. он предоставляет бесплатные приватные репозитории. Ниже ссылки на github и bitbucked и на материал по настройке подключения сразу к обоим:

Переходим к созданию git репозитория.

Добавление проекта в репозиторий:

Подробный tutorial по bitbucket:

Настроив репозитории, перейдем к настройке gulp для проекта. Для начала его нужно установить (необходим установленный node.js). Перейдя в терминале (можно и gibush, можно любой удобный для вас) в каталог с сайтом, выполняем следующую команду:

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

npm install gulp —save-dev

—save-dev обозначает, что мы сохраним информацию об установке пакета в package.json. Это нужно, чтобы не хранить в репозитории подгружаемые npm файлы для установленных модулей. Все они содержатся в node_modules. Чтобы node_modules не отправлялись на git, создадим файл .gitignore со следующим содержимым:

Топ-пост этого месяца:  SEO оптимизация изображений для сайта сжатие, метатеги, формат

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

Модуль gulp-concat для конкатенации файлов:

npm install gulp-concat —save-dev

Модуль gulp-less для построения css файлов на основе less. Про это чуть подробней при верстке проекта.

npm install gulp-less —save-dev

Для less еще пригодятся less-plugin-clean-css (пост обработка и сжатие less файла) и less-plugin-autoprefix (автоматическое добавление вендорных префиксов, согласно базе данных caniuse.com)

npm install less-plugin-clean-css —save-dev

npm install less-plugin-autoprefix —save-dev

Для сжатия css файлов добавим gulp-minify-css

npm install gulp-minify-css —save-dev

Часть css я встраиваю в html, поэтому добавим gulp-inline-source

npm install gulp-inline-source —save-dev

Для удаления комментариев из html файла понадобится.

npm install —save-dev gulp-remove-html-comments

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

npm install gulp-htmlclean —save-dev

Для него требуется jquery

npm install slick-carousel –save-dev

npm install jquery —save-dev

Для верстки еще полезно подключить normalize.css или reset.css. Я обычно использую normalize.

npm install normalize.css —save-dev

Почитать про него можно тут:

Продумаем общую структуру проекта

Где в public будет собираться проект.

Для настройки gulp следует создать файл gulpfile.js и подключить в нем все установленные плагины:


var gulp = require(‘gulp’)

var less = require(‘gulp-less’);

var minifyCSS = require(‘gulp-minify-css’);

var inlinesource = require(‘gulp-inline-source’);

var LessPluginCleanCSS = require(‘less-plugin-clean-css’),

cleancss = new LessPluginCleanCSS(< advanced: true >),

var htmlclean = require(‘gulp-htmlclean’);

var concat = require(‘gulp-concat’);

var uglify = require(‘gulp-uglify’);

//generate css from less ( + slick less files + slick files).

return gulp.src([‘./assets/less/*.less’, ‘node_modules/slick-carousel/slick/slick.less’, ‘node_modules/slick-carousel/slick/slick-theme.less’])

plugins: [autoprefix, cleancss]

//move images to public

//inline link, script and img in index.html . Clean html.

return gulp.src([‘node_modules/jquery/dist/jquery.min.js’,’node_modules/slick-carousel/slick/slick.min.js’, ‘assets/js/*.js’])

gulp.task(‘default’, [‘less-to-css’,’index’, ‘slickJs’]);

Запуск gulp осуществляется из консоли. Открыв консоль в каталоге с проектом и введя gulp, мы запустим выполнения задачи default, которая в свою очередь выполнит задачи ‘less-to-css’,’index’, ‘slickJs’. За счет gulp.watch, после любого изменения less файлов или index.html файла будет выполняться соответствующая задача.

Для примера верстки макета я выбрал .psd макет, распространяемый свободно как для некоммерческого, так и для коммерческого использования.

Ссылка на макет:

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

Обычно первым делом я формирую общую схему разметки. Получается нечто подобное:

В дальнейшем в разметке я буду придерживаться BEM методологии. Почитать про неё можно здесь:

Далее согласно этой методологии размечаю всю страницу.

Оптимизация загрузки шрифтов.

К данному макету шрифты шли в каталоге /fonts.

Для оптимизации работы со шрифтами воспользуемся fontsquirrel и возможностью хранить до 5мб места в localstorage. Подробней можно прочитать в переводах статей Adam Beres-Deak:

Верстал преимущественно флексами, про них можно почитать по ссылкам:

Ссылка на кросс-браузерный вариант реализации filter.

Полностью выкладывать в пост файлы проекта я не буду. Они выложены в гит аккаунте сообщества:

Посмотреть на результат в git pages:

Чтобы отправить каталог public В новую ветвь для git pages следует выполнить следующую команду:

git subtree push —prefix public origin gh-pages

Если у кого-нибудь будут проекты, которые вы хотите выложить в репозиторий сообщества – пишите. Создам репозиторий и поделюсь доступом.

Дубликаты не найдены

Большое спасибо за пример.
А есть ли что-то еще на флексах с БЭМ, less, gulp и psd макетом? Аналогичное, но более сложное. Возможно с использованием flex-grow/flex-shrink.
Если да, выложите на гитхаб пожалуйста, буду очень благодарен.

На днях думал перевести и выложить перевод этой статьи:

Хороший хак по flex.

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

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

Я не против побыть тьютором, у меня уже есть опыт в этом. Оставьте свой e-mail/skype/vk или любой другой контакт и я вам напишу.

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

С PostCSS лично не знаком, но опираюсь на то, что Bootstrap v4 и Foundation используют именно SASS/SCSS именно как платформу для своих фреймворков.

Почему less, а не sass?

Зачем OpenServer? Где livereload? Почему не используешь плагин для оптимизации изображений?

Чем less-plugin-autoprefix отличается от gulp-autoprefixier?

1. less и scss сопостовимы по возможностям. Точнее scss несколько мощнее, но для данной задачи принципиальной разницы не будет. Мне так привычней, поэтому использовал его.

2. Openserver я использую как локальный сервер. Давно им пользуюсь, удобно стрктурированны прошлые проекты. Для данной задачи он действительно не обязателен. Можно конечно обойтись сервером из npm.

3. На gulp перешел недавно, livereload еще не использовал. Судя по тому, что о нем читал — удобно.

4. Изображения пожал на этапе нарезки макета при помощи FileOptimizer. Какой из плагинов под gulp рекомендуете?

5. less-plugin-autoprefixer — это плагин для gulp-less. Выбрал его т.к. ориентировался на список плагинов с сайта less http://lesscss.org/usage/#plugins

Если есть рекомендации, как улучшить верстку или настройки — с удовольствием почитаю. Особенно если с пояснениями о преимуществах другого подхода.

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

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

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

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

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

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

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

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

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

Видео недоступно!

Это видео удалено или не существует! Начните с главной страницы или посетите раздел популярное видео.

  • © 2014 — 2020 MosCatalogue.net
  • Блог
  • Запросы
  • Правообладателям
  • Отказ от ответственности
  • Политика конфиденциальности
  • Пользовательское соглашение
  • О сервисе
  • Контакты

О сервисе MosCatalogue.net

MosCatalogue.net — это сервис, который предоставляет вам возможность быстро, бесплатно и без регистрации скачать видео с YouTube в хорошем качестве. Вы можете скачать видео в форматах MP4 и 3GP, кроме того можно скачать видео любого типа.

Ищите, смотрите, скачивайте видео — все это бесплатно и на большой скорости. Вы даже можете найти фильмы и скачать их. Результаты поиска можно сортировать, что упрощает поиск нужного видео.

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

Скачивайте и смотрите океан бесконечного видео в хорошем качестве. Все бесплатно и без регистрации!

Все о 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, как его установить. Установили дополнительные пакеты, которые необходимы для верстки и задали задачи.

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