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

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

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

gulp-scss-starter ├── dist ├── gulp-tasks ├── src │ ├── blocks │ ├── fonts │ ├── img │ ├── js │ ├── styles │ ├── views │ └── .htaccess ├── gulpfile.babel.js ├── webpack.config.js ├── package.json ├── .babelrc.js ├── .bemrc.js ├── .eslintrc.json ├── .stylelintrc ├── .stylelintignore └── .gitignore

• Корень папки:
  • .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

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

Blocks ├── modules │ ├──header │ │ ├── header.html │ │ ├── header.js │ │ ├── header.scss

Чтобы вручную не создавать соответствующие папку и файлы, достаточно в консоли прописать команду 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-файла БЭМ-блока (то есть тот БЭМ-блок, который использует скрипт), например:

  Import $ from " jquery" ;

  • для подключения стилевых файлов библиотек импортируйте их в файл src/styles/vendor/_libs.scss
  • JS-файлы и стилевые файлы библиотек самостоятельно изменять нельзя

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

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

Entry: { main: " ./src/js/index.js" , pageA: " ./src/js/import/pages/pageA.js" , pageB: " ./src/js/import/pages/pageB.js" }

• подключить скомпилированные js-файлы на необходимых страницах

CSS-сетка smart-grid

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

Items { @include row-flex (); @include md (justify-content , center ); .item { @include col (); @include size (3 ); @include size-md (5 ); @include size-xs (10 ); } }

сентябрь 24 , 2016

Будут рассмотрены такие вопросы: работа со стилями sass с использованием sourcemaps, склеивание и сжатие js-файлов, сборка requirejs с помощью rjs, препроцессинг html, очистка и копирование файлов, оптимизация изображений, поднятие локального веб-сервера и режим наблюдения - watch-таски. Добро пожаловать в статью, будет много интересного!
P.S. Материала много, поэтому статья будет разбита на 3 части: основы сборки и организация проекта, написание тестового приложения на Backbone + Require.js и собственно сборка с помощью gulp.

Зачем нужна сборка фронтенда.

Один из самых важных принципов в разработке - это модульность. Разбиение кода проекта на множество небольших, в идеале слабосвязанных между собой кусочков-модулей. Это касается далеко не только javascript-кода. Это относится и к стилям, и html-шаблонам, к различным библиотекам.

Примерно так может выглядеть структура простого приложения, написанного на Backbone + Require.

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

Разница хорошо заметна: вместо десятков файлов мы имеем один index.html, один css-файл, оптимизированные и сжатые изображения в отдельной папке, хотя на скриншоте этого и не видно:-)

А также самое интересное: в папке js мы получили всего 3 сжатых файла.
P.S. Почему три, а не один, расскажу позже.
Замечу, что это реальная структура тестового приложения, которое мы вскоре напишем.

Я описал лишь одну причину использования инструментов сборки, но она уже достаточна, чтобы начать использовать gulp, grunt, webpack или что-то подобное в своих проектах. Причем не имеет значения, пишем ли мы громадный сервис, небольшое SPA (как в нашей статье) или landing page. Принципы сборки одинаковы для всех проектов и различаются лишь разнообразием задач и подходов к их решению. В нашем примере мы создадим такую структуру, которая может сколь угодно расшириться в дальнейшем, но на выходе всегда будет аккуратная стопка файлов, готовая к выливке на ваш продакшен - боевой сайт.

Как правильно организовать проект.

Принцип такой: есть раздел с девелоперскими файлами, есть с собранными и все остальное, что это добро обслуживает. Создадим в корне проекта 2 папки: src и build. В src и только в src мы будем работать, создавать новые файлы, редактировать их и вообще развлекаться. На скриншоте выше, там, где пара десятков файлов, Вы видели именно содержимое папки src нашего тестового проекта. А чуть ниже несколько аккуратных файлов из папки build. Она формируется только автоматически, инструментами сборки, ничего самим там править не нужно. Все равно при каждой сборке ее содержимое затирается новыми файлами (а в режиме development папки build вообще нет - удаляется, дабы не мозолить глаза)

Кроме src и build в корне будут лежать файлы package.json, gulpfile.js, папка node_modules и опционально, .gitignore (если Вы работает с гитом). У меня еще можно заметить папку logs - это порождение apache и давняя привычка держать логи проекта в его же папке, конечно, исключив ее из репозитория гита:-)

Вот так выглядит структура проекта целиком:

По содержимому build, думаю, вопросов нет, по src поясню подробнее:

• 1. html - index.html, корневой индексный файл проекта. Почему не сразу в корне src? Потому что он будет препроцесситься и создаваться gulp-ом. Каким образом, узнаем немного позже, когда вплотную займемся сборкой.
• 2. img - изображения, не сжатые, обычные
• 3. js - вся javascript-движуха проекта, модели и представления Backbone
• 4. lib - сторонние библиотеки, вроде backbone.js, require.js, lodash.js и прочих
• 5. scripts - js-скрипты, которые необходимы на боевом сайте, но не нужны в режиме разработки. Имеются в виду коды для аналитики, различных экспериментов и прочих маркетинговых штук.
• 6. styles - sass-файлы со стилями. В эту же папку будет складываться собранный css-файл (только для режима девелопмента)
• 7. tpl - html-шаблоны. Используются представлениями Backbone с помощью плагина require.js text

Внешний вид тестового приложения довольно неказистый. Вы можете сказать, что подобная хрень делается парой строк html и css-кода без единого js-файла.
Но мы преследуем цель не нарисовать красивую картинку, а создать надежную структуру проекта и рассмотреть как можно больше аспектов сборки. Когда проект разрастется до сотни файлов, мы уже будем готовы к этой напасти и легко управимся с возросшими объемами. Поэтому несмотря на малость и внешнюю убогость тестового приложения, мы узнаем принципы сборки для больших и сложных проектов.

Какие задачи сборки мы решим.

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

Вот список того, чем мы займемся после написания тестового приложения:

• 1. Очистка файлов и папок от результатов предыдущей сборки
• 2. Сборка css из sass-файлов, со сжатием и без
• 3. Подключение sourcemaps к стилям, заодно покажу на примере, зачем это нужно
• 4. Сборка js-бандла с помощью requirejs
• 5. Склеивание и сжатие отдельных js-файлов (аналитики)
• 6. Препроцессинг html
• 7. Оптимизация и сжатие изображений
• 8. Поднятие локального веб-сервера
• 9. Задачи наблюдения за файлами при работе в режиме девелопмента - watch-таски
• 10. Сбор отдельных задач в кучу - итоговые таски для production-сборки и development-работы

Итак, мы порассуждали, зачем вообще нужна сборка фронтенда, определились со структурой проекта, подробно разобрали, что мы хотим от сборки и в общих чертах поговорили про тестовое приложение. В следующей части статьи мы займемся написанием простенького Backbone-приложения в связке с Require.js. Если Вы не знакомы с Backbone и/или Require.js, то ничего страшного нет. Собственно Backbone-овского кода в приложении мало. Вы легко можете вместо него использовать любимую библиотеку или просто писать код на javascript/jquery и пропустить раздел настройки requirejs.

Данный мануал содержит описание полезных и наиболее часто используемых front-end инструментов. Вы сможете узнать процесс установки инструментов и основные моменты работы с ними.

NPM

Введение

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

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

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

Одним из пакетных менеджеров используемых во frontend-проектах является NPM.

npm (Node.js Package Manager) - менеджер пакетов, входящий в состав Node.js. Используется для скачивания пакетов из облачного сервера npm, либо для загрузки пакетов на этот сервер.

Официальный сайт

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

Для установки npm необходимо скачать и установить NodeJS (npm будет автоматически установлен): https://nodejs.org/en/.

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

Установка пакетов

Пакетом называется один или несколько JavaScript-файлов, представляющих собой какую-то библиотеку или инструмент. Для установки пакета с помощью npm необходимо выполнить следующую команду:

Npm install <название пакета>

Для глобальной установки пакета используется ключ -g. После установки пакет вместе с исходниками находится в директории node_modules/.

Проверка версии

Чтобы проверить текущую версию npm, необходимо выполнить команду:

Настройка файла конфигурации

Файл package.json содержит в себе информацию о вашем приложении: название, версия, зависимости и тому подобное. Любая директория, в которой есть этот файл, интерпретируется как Node.js-пакет.

Для создания файла package.json необходимо выполнить команду:

Npm init

После этого необходимо будет заполнить некоторую информацию о проекте.

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

Для установки некоторого пакета и автоматическим сохранением в файле package.json используется команда:

Npm install<название пакета> --save-dev

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

Yarn

Особенности

• Создание веб-сервера и автоматическая перезагрузка страницы в браузере при сохранении кода, слежение за изменениями в файлах проекта.
• Использование различных JavaScript, CSS и HTML препроцессоров (CoffeeScript, Less, Sass, Stylus, Jade и т.д.).
• Минификация CSS и JS кода, а также, оптимизация и конкатенация отдельных файлов проекта в один.
• Автоматическое создание вендорных префиксов (приставок к названию CSS свойства, которые добавляют производители браузеров для нестандартных свойств) для CSS.
• Управление файлами и папками в рамках проекта – создание, удаление, переименование.
• Запуск и контроль выполнения внешних команд операционной системы.
  Работа с изображениями – сжатие, создание спрайтов, изменение размеров (png, jpg, svg и др.).
• Деплой (отправка на внешний сервер) проекта по FTP, SFTP и т. д.
  Подключение и использование в проекте безгранично большого количества Node.js и Gulp утилит, программ и плагинов.
• Создание различных карт проекта и автоматизация другого ручного труда.

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

В системе должны быть установлены NodeJS и npm.

Шаг 1: Для глобальной установки GulpJS с помощью пакетного менеджера npm необходимо выполнить команду:

Npm install gulp -g

Шаг 2: Необходимо установить его для приложения:

Npm install --save-dev gulp

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

Npm install <название плагина> --save-dev

Все установленные плагины находятся в директории node_modules/ .

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

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

Var gulp = require("gulp");

Функция require() позволяет подключать плагины из папки node_modules/.

Шаг 2: С помощью переменной gulp можно создавать таски для сборки проекта:

Gulp.task("exampleTask", function() {});

Метод task принимает два параметра: название и функцию с телом таски.
Данную инструкцию уже можно выполнить. Для этого в консоли прописываем:

Gulp exampleTask

Основные команды

Ниже представлен более сложный пример инструкции:

Gulp.task("exampleTask", function () { return gulp.src("source-files") .pipe(plugin()) .pipe(gulp.dest("folder")); });

Разберем команды использованные в данном примере:

• gulp.src – выборка исходных файлов проекта для обработки плагином;
• .pipe(plugin()) – вызов Gulp плагина для обработки файла;
• .pipe(gulp.dest(‘folder’)) – вывод результирующего файла в папку назначения.

Маски файлов

Функция gulp.src принимает в качестве параметра маску файлов. Примеры масок:

• ./ – текущая директория;
• ../ – родительская директория;
• js/index.js – файл index.js в папке js;
• js/*.js – все файлы с расширением js в папке js;
• js/**/*.js – все файлы с расширением js в папке js и в ее подкаталогах;
• !js/*.js – исключение файлов с расширением js в папке js.

Потоки

Использование потоков является одним из важнейших преимуществ GulpJS.

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

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

Ниже представлен пример использования потоков. В данном примере использованы сторонние плагины gulp-jshint и gulp-concat, которые необходимо установить и подключить в gulpfile.js.

Функция gulp.src берет файлы по маске js/*.js . Запускает JSHint и выводит результат. Затем производит конкатенацию файлов и в конце сохраняет полученный файл после конкатенации в директории dist/ .

Gulp.task("example", function () { return gulp.src("js/*.js") .pipe(jshint()) .pipe(concat("index.js")) .pipe(gulp.dest("dist")); });

Сторонние плагины

Рассмотрим пример использования сторонних плагинов. Для этого создадим инструкцию конкатенации файлов js:

Шаг 1: Сперва необходимо подключить плагин командой require:

Var concat = require("gulp-concat");

Шаг 2: Затем нужно создать таск для конкатенации файлов с расширением js находящихся в директории js/ . В конце получившийся файл помещается в директорию dist/js:

Gulp.task("concat", function () { return gulp.src("js/*.js") .pipe(concat("index.js")) .pipe(gulp.dest("dist/js")); });

Gulp concat

Дополнительная информация

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

Gulp.task("build", ["html", "css"]);

Кроме этого существует метод watch для наблюдения изменений в файлах:

Gulp.watch("маска файлов для наблюдения", ["название таски, которая выполнится при изменении файлов"]);

В gulpfile.js можно создать дефолтный таск:

Gulp.task("default", ["task1", "task2"]);

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

Основные плагины

• gulp-autoprefixer – автоматически расставляет префиксы к CSS свойствам;
• gulp-browser-sync – создает подключение, после чего производит автообновление страницы при изменении клиентских или даже серверных файлов;
• gulp-uncss – оптимизация CSS файлов. Плагин анализирует HTML код и находит все неиспользуемые и продублированные стили;
• gulp-csso – CSS минификатор;
• gulp-htmlmin – простой HTML минификатор;
• gulp-htmlhint – HTML валидатор;
• gulp-uglify – JavaScript минификатор;
• gulp-concat – конкатенация файлов;
• gulp-webserver – позволяет создать и запустить сервер;
• gulp-jshint – проверка качества JS кода;
• gulp-jasmine – запуск jasmine тестов;
• gulp-jsdoc – генерация JSDoc документации.

С полным списком Gulp-плагинов вы можете ознакомиться по ссылке:
http://gulpjs.com/plugins/

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

GruntJS

Особенности

• Поддержка асинхронного тестирования.
• Возможность выставлять наблюдателей (observer) на разные объекты.

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

Для подключения Jasmine к своему проекту необходимо скачать библиотеку и подключить следующие файлы на главную HTML-страницу:

• lib/jasmine-*/jasmine.js - сам фреймворк;
• lib/jasmine-*/jasmine-html.js - оформление результатов в виде HTML;
• lib/jasmine-*/jasmine.css - внешний вид результата выполнения тестов;
• SpecRunner.html - файл, который следует открыть в браузере для запуска тестов.

Синхронизация с инструментами

GulpJS

Jasmine можно подключить в сборку проекта на GulpJS:

Шаг 1: Вначале необходимо установить плагин gulp-jasmine:

Npm install gulp-jasmine --save-dev

Шаг 2: Затем нужно подключить плагин в файле сборки и создать таску запуска тестов:

Var jasmine = require("gulp-jasmine"); gulp.task("jasmine", function() { gulp.src("файлы тестов") .pipe(jasmine()); });

KarmaJS

(в конце статьи подробнее описана работа с этим инструментом)

Для подключения Jasmine в KarmaJS необходимо:

Шаг 1: Установить KarmaJS:

Npm install -g karma-cli

Шаг 2: Установить плагины необходимые для запуска тестов написанных на Jasmine в браузерах Chrome и PhantomJS:

Npm install karma-jasmine karma-chrome-launcher karma-phantomjs-launcher

Шаг 3: Установить сам Jasmine:

Npm install -g jasmine

Шаг 4: В файле конфигурации karma подключить плагины и прописать путь к тестам.

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

Ключевые слова

• describe – определение набора тестов;
• it – определение теста;
• expect – определение ожиданий, которые проверяются в тесте.

Функции describe и it принимают два параметра: первый – название, второй – функция с кодом.

Пример базового теста

describe(“название набора тестов”, function () { it(“название теста”, function () { expect(2+2).toBe(4); }); });

Методы проверки результатов

• expect().toBe() – проверка переменных на равенство (‘===’);
• expect().not.toBe() – проверка переменных на равенство (‘!==’);
• expect().toEqual() – проверка на равенство переменных и объектов, включая содержимое;
• expect().toBeDefined() – проверка на существование;
• expect().toBeUndefined() – проверка на несуществование;
• expect().toBeNull() – проверка значения переменной на null;
• expect().toBeTruthy() – проверка на истинность;
• expect().toBeFalsy() – проверка на ложность;
• expect().toBeLessThan() – проверка на то, что значение должно быть меньше чем;
• expect().toBeGreaterThan() – проверка на то, что значение должно быть больше чем;
• expect().toBeCloseTo() – проверка на то, что значение должно быть близко к числу;
• expect().toMatch() – проверка на соответствие регулярному выражению;
• expect().toContain() – проверка на содержание в массиве;
• expect().toThrow() – проверка вызова исключения;
• expect().toHaveBeenCalled() – проверка вызова функции.

Дополнительные функции

Во избежание копирования какой-либо логики, используемой в тестах, используются функции beforeEach/afterEach . Они запускаются соответственно перед/после каждого теста.

Для тестирования асинхронных вызовов используются функции runs и waitsFor .

• runs – принимает асинхронную функцию для выполнения;
• waitsFor – принимает три параметра: первый – функция, которая должна вернуть true, если асинхронный вызов в функции runs был выполнен, второй – сообщение об ошибке, третий – ожидание в миллисекундах.

describe(“пример тестирования асинхронного вызова”, function () { var result = 0; function asyncFunc() { setTimeout(function() { result = result + 2; }, 500); } it(“название теста”, function () { runs(function () { asyncFunc(); }); waitsFor(function() { return result === 2; }, “значение не изменилось”, 2000); }); });

Наблюдатели

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

If(“проверка вызова функции”, function () { spyOn(exampleObject, "exampleFunction"); exampleObject.exampleFunction(); expect(exampleObject.exampleFunction).toHaveBeenCalled(); });

При тестировании с использованием spyOn можно отслеживать количество вызовов, их параметры и каждый вызов в отдельности.

Для создания функции без реализации можно воспользоваться createSpy . Функция createSpy принимает имя функции для идентификации.

If(“проверка вызова функции”, function () { var example = createSpy("EXAMPLE"); example(“param1”, “param2”); expect(example.identify).toHaveBeenCalledWith(“param1”, “param2”); expect(example.calls.length).toEqual(1); });

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

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

Mocha

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

Генерация документации производится из комментариев исходного кода.

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

Проект, рассматриваемый в рамках этой статьи расположен на Github по адресу: https://github.com/itchief/gulp-project-bootstrap-4

Видео к этой статье:

Инструкция по установке Gulp окружения

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

• "Node.js" (загрузить установщик "Node.js" для своей операционной системы можно c этой страницы ; для проекта требуется версия программы не ниже 10 );
• "Gulp" (установить Gulp можно посредством выполнения в консоли следующей команды: npm install -g gulp-cli).

Следующий этап – это установка npm пакетов и их зависимостей. Для этого в консоли (должны находиться в корневой директории проекта) необходимо выполнить команду:

Npm install

Данная команда установит все пакеты, которые нужны как для работы самого окружения, так и для фронтенда. Выполняет npm эти действия в соответствии с инструкциями, написанными в файле "package.json".

При использовании первой версии проекта (1.0.0), в которой используется менеджер пакетов Bower, необходимо выполнить ещё команду:

Bower install

Данная программа установит фронтенд пакеты, указанные в файле "bower.json".

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

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

После ввода этой команды запустится задача по умолчанию, т.е. "default". Эта задача в свою очередь запустит серию других задач: "build", "webserver" и "watch".

Задача "build" выполнит сборку проекта для продакшена (т.е. она запустит "clean:build", "html:build", "css:build", "js:build", "fonts:build" и "image:build"). Эти задачи поместят в папку "assets/build" результирующие файлы проекта.

Задача "webserver" предназначена для запуска локального веб-сервера с «живой перезагрузкой» страниц в браузере. С помощью него можно очень просто посмотреть проект и выполнить его тестирование.

Задача "watch" используется для отслеживания изменения исходных файлов в папке "assets/src" и выполнение если это призошло различных задач. Другими словами, она позволяет автоматически запускать необходимые задачи и поддерживать результирующие файлы (содержимое папки "assets/build") в актуальном состоянии.

Кроме этого можно выполнять выборочную (самостоятельную) сборку той или иной части проекта.

Например, для сборки только CSS части сайта достаточно ввести команду:

Gulp css:build

Список других задач:

Gulp clean:build // для очистки каталога "assets/build" gulp html:build // для сборки HTML файлов gulp js:build // для сборки JS файлов gulp fonts:build // для сборки шрифтов gulp image:build // для сборки изображения

Описание Gulp окружения

В этом разделе разберём:

• основные инструменты и файловую структуру Gulp окружения;
• как осуществляется подключение исходников Bootstrap к проекту и их настройка;
• как самостоятельно (с нуля) выполнить инициализацию Gulp проекта и установку зависимостей (без использования готового package.json)
• как с нуля выполнить инициализацию Bower и установку фронтенд пакетов (без использования готового "bower.json")*;
• содержимое файла сборщика проекта Gulp (gulpfile.js)

* Менеджер пакетов Bower не используется в проекте, начиная с версии 2.0.0.

Список инструментов

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

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

В первых версиях проекта дополнительно ещё использовался пакетный менеджер Bower. Он применялся за загрузки библиотек jQuery, Popover и Bootstrap. В версиях проекта, начиная с 2.0.0, загрузка данных библиотек выполняется посредством npm.

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

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

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

В корне проекта расположена папка "assets" и файлы "gulpfile.js", "package.json". Файл "gulpfile.js" будет содержать задачи для сборщика проекта Gulp.

В первой версии проекта также использовались файлы ".bowerrc" и "bower.json". Файл "bower.json" - это конфигурационный файл менеджера Bower, на основании которого определялись необходимые для загрузки фронтенд пакеты. В данном проекте он использовался для загрузки Bootstrap, jQuery и Popper.

В папке "assets" находятся две папки: "src" (для исходных файлов) и "build" (для готовых файлов; в эту папку их будет помещать сборщик Gulp). В папке "src" расположены каталоги "fonts" (для шрифтов), "img" (для исходных изображений), "js" (для js-файлов), "style" (для стилей) и "template" (для HTML фрагментов) и файл "index.html".

В первой версии проекта в папке "src" ещё находилась директория "bower_components". Она предназначалась для компонентов, загрузка которых выполнялась с помощью Bower. В текущей версии её нет.

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

Директория "style" отведена под стили. В данной директории находятся три файла: "main.scss" (содержит список файлов, содержимое которых необходимо включить в итоговый файл стилей), "my.scss" (используется для написания своих стилей) и "variables.scss" (содержит SCSS переменные, с помощью которых будем изменять стили Bootstrap 4, а также использовать его для создания своих переменных).

Файл "index.html" - это главная страница создаваемого проекта. Кроме "index.html" в данную директорию можно поместить и другие html страницы.

Директория "template" предназначена для помещения в неё фрагментов HTML страниц. Например, в данной директории можно создать файлы "head.html" и "footer.html", и импортировать их содержимое (используя синтаксис //= путь_к_файлу) сразу в несколько страниц. Это позволит более просто создавать и редактировать html страницы, т.к. отдельные части страниц уже будут находиться в отдельных файлах.

Подключение исходников Bootstrap 4 к проекту и их настройка

Существуют разные способы подключения фреймворка Bootstrap 4 к проекту, а также варианты работы с ним.

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

Исходные коды CSS стилей Bootstrap 4 написаны на языке SCSS и представлены посредством большого количества небольших файлов.

Список SCSS файлов (расположены в каталоге "node_modules/bootstrap/scss/"): "functions.scss", "variables.scss", "mixins.scss", "variables.scss", "print.scss", "reboot.scss", "type.scss", "images.scss", "code.scss", "grid.scss", "tables.scss", "forms.scss", "buttons.scss", "transitions.scss", "dropdown.scss" и др.

Каждой такой файл выполняет либо определённую служебную задачу, либо отвечает за стилизацию какой-то определённой функции фреймворка или компонента. Файлы SCSS имеют краткие и понятные имена. Используя только их можно достаточно точно понять назначение каждого из них.

Настройка или изменение дефолтных стилей Bootstrap 4 осуществляется посредством переопределения значений переменных SCSS . Все SCSS переменные для удобства собраны в одном месте (в файле "variables.scss"). Но, переопределять их значения желательно, конечно же, не в этом файле, а в своём (например, имеющим такое же имя "variables.scss", но находящемся в "assets/style/variables.scss").

Например, изменение цвета тем success и danger , осуществляется посредством изменения значений переменных $green и $red:

// Переопределение дефолтных значений переменных Bootstrap 4 $red: #cc2eaa; $green: #2ecc71;

Обратите внимание , что после копирования переменных Bootstrap 4 в свой файл CSS ("assets/style/variables.scss"), у них необходимо убрать метку!default .

Метка!default предназначена для установления SCSS переменной значения по умолчанию. Если же у SCSS переменной уже есть значение, то новое значение, если оно указано с ключом!default , установлено не будет.

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

Кроме этого, к этому файлу также подключёны файлы "assets/style/variables.scss" (для переопределения переменных Bootstrap) и "assets/style/my.scss" (для создания своих стилей).

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

// Переопределение дефолтных значений переменных Bootstrap 4 и определение своих @import "variables"; // Подключение нужных SCSS исходников Bootstrap 4 @import "../../../node_modules/bootstrap/scss/_functions"; @import "../../../node_modules/bootstrap/scss/_variables"; @import "../../../node_modules/bootstrap/scss/_mixins"; @import "../../../node_modules/bootstrap/scss/_root"; @import "../../../node_modules/bootstrap/scss/_reboot"; @import "../../../node_modules/bootstrap/scss/_type"; @import "../../../node_modules/bootstrap/scss/_images"; @import "../../../node_modules/bootstrap/scss/_code"; @import "../../../node_modules/bootstrap/scss/_grid"; @import "../../../node_modules/bootstrap/scss/_tables"; @import "../../../node_modules/bootstrap/scss/_forms"; @import "../../../node_modules/bootstrap/scss/_buttons"; @import "../../../node_modules/bootstrap/scss/_transitions"; @import "../../../node_modules/bootstrap/scss/_dropdown"; @import "../../../node_modules/bootstrap/scss/_button-group"; @import "../../../node_modules/bootstrap/scss/_input-group"; @import "../../../node_modules/bootstrap/scss/_custom-forms"; @import "../../../node_modules/bootstrap/scss/_nav"; @import "../../../node_modules/bootstrap/scss/_navbar"; @import "../../../node_modules/bootstrap/scss/_card"; @import "../../../node_modules/bootstrap/scss/_breadcrumb"; @import "../../../node_modules/bootstrap/scss/_pagination"; @import "../../../node_modules/bootstrap/scss/_badge"; @import "../../../node_modules/bootstrap/scss/_jumbotron"; @import "../../../node_modules/bootstrap/scss/_alert"; @import "../../../node_modules/bootstrap/scss/_progress"; @import "../../../node_modules/bootstrap/scss/_media"; @import "../../../node_modules/bootstrap/scss/_list-group"; @import "../../../node_modules/bootstrap/scss/_close"; @import "../../../node_modules/bootstrap/scss/_toasts"; @import "../../../node_modules/bootstrap/scss/_modal"; @import "../../../node_modules/bootstrap/scss/_tooltip"; @import "../../../node_modules/bootstrap/scss/_popover"; @import "../../../node_modules/bootstrap/scss/_carousel"; @import "../../../node_modules/bootstrap/scss/_spinners"; @import "../../../node_modules/bootstrap/scss/_utilities"; @import "../../../node_modules/bootstrap/scss/_print"; // Подключение своих SCSS файлов @import "my";

Кроме этого, для работы некоторых компонентов Bootstrap 4 нужен ещё JavaScript код.

Список js-файлов Bootstrap 4 (находятся в каталоге "node_modules/bootstrap/js/dist/"): "util.js", "alert.js", "button.js", "carousel.js", "collapse.js", "dropdown.js", "modal.js", "tooltip.js", "popover.js", "scrollspy.js", "tab.js" и "toast.js".

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

Импортирование нужных файлов в результирующий build/main.js осуществляется посредством следующей конструкции:

//= путь_к_файлу

Выполняет это действие будет Gulp плагин "gulp-rigger". Как его установить и подключить будет описано ниже.

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

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

// Импортируем jQuery //= ../../../node_modules/jquery/dist/jquery.js // Импортируем Popper //= ../../../node_modules/popper.js/dist/umd/popper.js // Импортируем необходимые js-файлы Bootstrap 4 //= ../../../node_modules/bootstrap/js/dist/util.js //= ../../../node_modules/bootstrap/js/dist/alert.js //= ../../../node_modules/bootstrap/js/dist/button.js //= ../../../node_modules/bootstrap/js/dist/carousel.js //= ../../../node_modules/bootstrap/js/dist/collapse.js //= ../../../node_modules/bootstrap/js/dist/dropdown.js //= ../../../node_modules/bootstrap/js/dist/modal.js //= ../../../node_modules/bootstrap/js/dist/tooltip.js //= ../../../node_modules/bootstrap/js/dist/popover.js //= ../../../node_modules/bootstrap/js/dist/scrollspy.js //= ../../../node_modules/bootstrap/js/dist/tab.js //= ../../../node_modules/bootstrap/js/dist/toast.js // Импортируем другие js-файлы //= my.js

Как с нуля выполнить инициализацию Gulp проекта и установку зависимостей?

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

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

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

Npm init

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

• имя проекта (name) – "bootstrap-4";
• номер версии (version) – "2.0.0";
• описание (description) – "Start project with use Bootstrap 4";
• автор (author) – "сайт";
• git репозиторий (git repository) - "";
• точка входа (entry point), тестовая команда (test command), лицензия (license), ключевые слова (keywords) – значения по умолчанию.

На вопрос «Is this ok?» ответим "yes" или нажмём Enter .

В результате в корневой папке проекта появится файл "package.json".

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

Npm install название_пакета --save-dev // установка пакета, при этом информация о нём, автоматически прописывается в секцию "devDependencies" файла "package.json" npm install название_пакета --save-prod // установка пакета, при этом информация о нём, автоматически прописывается в секцию "dependencies" файла "package.json"

Ключ "--save-dev" или "--save-prod" определяет в какую секцию файла "package.json" попадёт информация о нём.

Список пакетов, которые будут использоваться в проекте:

Npm install gulp --save-dev // установка gulp npm install browser-sync --save-dev // установка browser-sync npm install gulp-autoprefixer --save-dev // установка gulp-autoprefixer npm install gulp-cache --save-dev // установка gulp-cache npm install gulp-clean-css --save-dev // установка gulp-clean-css npm install gulp-rimraf --save-dev // установка gulp-clean-css npm install gulp-imagemin --save-dev // установка gulp-imagemin npm install gulp-plumber --save-dev // установка gulp-plumber npm install gulp-rigger --save-dev // установка gulp-rigger npm install gulp-sass --save-dev // установка gulp-sass npm install gulp-sourcemaps --save-dev // установка gulp-sourcemaps npm install gulp-uglify --save-dev // установка gulp-uglify npm install imagemin-jpeg-recompress --save-dev // установка imagemin-jpeg-recompress npm install imagemin-pngquant --save-dev // установка imagemin-pngquant npm install gulp-rename --save-dev // установка imagemin-pngquant npm install jquery --save-prod npm install popper.js --save-prod npm install bootstrap --save-prod

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

{ "name": "bootstrap-4", "version": "2.0..com/itchief/gulp-project-bootstrap-4.git" }, "dependencies": { "jquery": "^3.4.1", "popper.js": "^1.14.7", "bootstrap": "^4.3.1" }, "devDependencies": { "browser-sync": "^2.26.7", "gulp": "^4.0.2", "gulp-autoprefixer": "^6.1.0", "gulp-cache": "^1.1.2", "gulp-clean-css": "^4.2.0", "gulp-rimraf": "^0.2.2", "gulp-imagemin": "^6.0.0", "gulp-plumber": "^1.2.1", "gulp-rigger": "^0.5.8", "gulp-sass": "^4.0.2", "gulp-sourcemaps": "^2.6.5", "gulp-uglify": "^3.0.2", "imagemin-jpeg-recompress": "^6.0.0", "imagemin-pngquant": "^8.0.0", "gulp-rename": "^1.4.0" } }

Как с нуля выполнить инициализацию Bower и установку фронтенд пакетов?

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

{ "directory" : "assets/src/bower_components/" }

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

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

Bower init Инициализация Bower

После этого необходимо ответить на следующие вопросы:

• имя проекта (name) – bootstrap-4;
• описание (description) – Start project on Bootstrap 4 - сайт;
• автор (author) – сайт;
• установить установленные компоненты как зависимости (set currently installed components as dependencies) – Y (Да);
• хотите вы отметить этот пакет как приватный, это предотвратит его случайную публикацию в реестре Bower (would you like to mark this package as private which prevents it from being accidentally published to the registry) – Y (Да);
• на остальные вопросы оставим ответы, предлагаемые программой по умолчанию;

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

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

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

Bower install bootstrap#v4.0.0-beta --save

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

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

{ "name": "bootstrap-4", "description": "Start project on Bootstrap 4 - сайт", "authors": [ "сайт" ], "license": "ISC", "keywords": , "homepage": "", "ignore": [ "**/.*", "node_modules", "bower_components", "assets/src/bower_components/", "test", "tests" ], "dependencies": { "jquery": "^3.2.1", "bootstrap": "^v4.0.0-beta" } }

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

Bower install

Описание файла сборщика проекта Gulp (gulpfile.js)

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

Файл "gulpfile.js" представляет собой список задач.

Основные задачи которые будут выполнять этот файл:

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

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

Код файла "gulpfile.js" (при использовании Gulp 4):

"use strict"; /* пути к исходным файлам (src), к готовым файлам (build), а также к тем, за изменениями которых нужно наблюдать (watch) */ var path = { build: { html: "assets/build/", js: "assets/build/js/", css: "assets/build/css/", img: "assets/build/img/", fonts: "assets/build/fonts/" }, src: { html: "assets/src/*.html", js: "assets/src/js/main.js", style: "assets/src/style/main.scss", img: "assets/src/img/**/*.*", fonts: "assets/src/fonts/**/*.*" }, watch: { html: "assets/src/**/*.html", js: "assets/src/js/**/*.js", css: "assets/src/style/**/*.scss", img: "assets/src/img/**/*.*", fonts: "assets/srs/fonts/**/*.*" }, clean: "./assets/build/*" }; /* настройки сервера */ var config = { server: { baseDir: "./assets/build" }, notify: false }; /* подключаем gulp и плагины */ var gulp = require("gulp"), // подключаем Gulp webserver = require("browser-sync"), // сервер для работы и автоматического обновления страниц plumber = require("gulp-plumber"), // модуль для отслеживания ошибок rigger = require("gulp-rigger"), // модуль для импорта содержимого одного файла в другой sourcemaps = require("gulp-sourcemaps"), // модуль для генерации карты исходных файлов sass = require("gulp-sass"), // модуль для компиляции SASS (SCSS) в CSS autoprefixer = require("gulp-autoprefixer"), // модуль для автоматической установки автопрефиксов cleanCSS = require("gulp-clean-css"), // плагин для минимизации CSS uglify = require("gulp-uglify"), // модуль для минимизации JavaScript cache = require("gulp-cache"), // модуль для кэширования imagemin = require("gulp-imagemin"), // плагин для сжатия PNG, JPEG, GIF и SVG изображений jpegrecompress = require("imagemin-jpeg-recompress"), // плагин для сжатия jpeg pngquant = require("imagemin-pngquant"), // плагин для сжатия png rimraf = require("gulp-rimraf"), // плагин для удаления файлов и каталогов rename = require("gulp-rename"); /* задачи */ // запуск сервера gulp.task("webserver", function () { webserver(config); }); // сбор html gulp.task("html:build", function () { return gulp.src(path.src.html) // выбор всех html файлов по указанному пути.pipe(plumber()) // отслеживание ошибок.pipe(rigger()) // импорт вложений.pipe(gulp.dest(path.build.html)) // выкладывание готовых файлов.pipe(webserver.reload({ stream: true })); // перезагрузка сервера }); // сбор стилей gulp.task("css:build", function () { return gulp.src(path.src.style) // получим main.scss .pipe(plumber()) // для отслеживания ошибок.pipe(sourcemaps.init()) // инициализируем sourcemap .pipe(sass()) // scss -> css .pipe(autoprefixer()) // добавим префиксы.pipe(gulp.dest(path.build.css)) .pipe(rename({ suffix: ".min" })) .pipe(cleanCSS()) // минимизируем CSS .pipe(sourcemaps.write("./")) // записываем sourcemap .pipe(gulp.dest(path.build.css)) // выгружаем в build .pipe(webserver.reload({ stream: true })); // перезагрузим сервер }); // сбор js gulp.task("js:build", function () { return gulp.src(path.src.js) // получим файл main.js .pipe(plumber()) // для отслеживания ошибок.pipe(rigger()) // импортируем все указанные файлы в main.js .pipe(gulp.dest(path.build.js)) .pipe(rename({ suffix: ".min" })) .pipe(sourcemaps.init()) //инициализируем sourcemap .pipe(uglify()) // минимизируем js .pipe(sourcemaps.write("./")) // записываем sourcemap .pipe(gulp.dest(path.build.js)) // положим готовый файл.pipe(webserver.reload({ stream: true })); // перезагрузим сервер }); // перенос шрифтов gulp.task("fonts:build", function () { return gulp.src(path.src.fonts) .pipe(gulp.dest(path.build.fonts)); }); // обработка картинок gulp.task("image:build", function () { return gulp.src(path.src.img) // путь с исходниками картинок.pipe(cache(imagemin([ // сжатие изображений imagemin.gifsicle({ interlaced: true }), jpegrecompress({ progressive: true, max: 90, min: 80 }), pngquant(), imagemin.svgo({ plugins: [{ removeViewBox: false }] }) ]))) .pipe(gulp.dest(path.build.img)); // выгрузка готовых файлов }); // удаление каталога build gulp.task("clean:build", function () { return gulp.src(path.clean, { read: false }) .pipe(rimraf()); }); // очистка кэша gulp.task("cache:clear", function () { cache.clearAll(); }); // сборка gulp.task("build", gulp.series("clean:build", gulp.parallel("html:build", "css:build", "js:build", "fonts:build", "image:build"))); // запуск задач при изменении файлов gulp.task("watch", function () { gulp.watch(path.watch.html, gulp.series("html:build")); gulp.watch(path.watch.css, gulp.series("css:build")); gulp.watch(path.watch.js, gulp.series("js:build")); gulp.watch(path.watch.img, gulp.series("image:build")); gulp.watch(path.watch.fonts, gulp.series("fonts:build")); }); // задача по умолчанию gulp.task("default", gulp.series("build", gulp.parallel("webserver","watch")));

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

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

// создание gulp задачи (nametask – название задачи) gulp.task("nametask", function() { // действия, которые должна выполнить задача... });

Задачи в gulp построены очень просто. Их каркас действий в большинстве случаев можно представить так:

• получить данные из исходных файлов;
• обработать исходные данные посредством gulp плагинов;
• сохранить полученный результат (файлы) в каталог "build".

Если используете Gulp 3, то содержимое файла "gulpfile.js" должно быть следующим:

"use strict"; /* параметры для gulp-autoprefixer */ var autoprefixerList = [ "Chrome >= 45", "Firefox ESR", "Edge >= 12", "Explorer >= 10", "iOS >= 9", "Safari >= 9", "Android >= 4.4", "Opera >= 30" ]; /* пути к исходным файлам (src), к готовым файлам (build), а также к тем, за изменениями которых нужно наблюдать (watch) */ var path = { build: { html: "assets/build/", js: "assets/build/js/", css: "assets/build/css/", img: "assets/build/img/", fonts: "assets/build/fonts/" }, src: { html: "assets/src/*.html", js: "assets/src/js/main.js", style: "assets/src/style/main.scss", img: "assets/src/img/**/*.*", fonts: "assets/src/fonts/**/*.*" }, watch: { html: "assets/src/**/*.html", js: "assets/src/js/**/*.js", css: "assets/src/style/**/*.scss", img: "assets/src/img/**/*.*", fonts: "assets/srs/fonts/**/*.*" }, clean: "./assets/build/*" }; /* настройки сервера */ var config = { server: { baseDir: "./assets/build" }, notify: false }; /* подключаем gulp и плагины */ var gulp = require("gulp"), // подключаем Gulp webserver = require("browser-sync"), // сервер для работы и автоматического обновления страниц plumber = require("gulp-plumber"), // модуль для отслеживания ошибок rigger = require("gulp-rigger"), // модуль для импорта содержимого одного файла в другой sourcemaps = require("gulp-sourcemaps"), // модуль для генерации карты исходных файлов sass = require("gulp-sass"), // модуль для компиляции SASS (SCSS) в CSS autoprefixer = require("gulp-autoprefixer"), // модуль для автоматической установки автопрефиксов cleanCSS = require("gulp-clean-css"), // плагин для минимизации CSS uglify = require("gulp-uglify"), // модуль для минимизации JavaScript cache = require("gulp-cache"), // модуль для кэширования imagemin = require("gulp-imagemin"), // плагин для сжатия PNG, JPEG, GIF и SVG изображений jpegrecompress = require("imagemin-jpeg-recompress"), // плагин для сжатия jpeg pngquant = require("imagemin-pngquant"), // плагин для сжатия png rimraf = require("gulp-rimraf"), // плагин для удаления файлов и каталогов rename = require("gulp-rename"); /* задачи */ // запуск сервера gulp.task("webserver", function () { webserver(config); }); // сбор html gulp.task("html:build", function () { return gulp.src(path.src.html) // выбор всех html файлов по указанному пути.pipe(plumber()) // отслеживание ошибок.pipe(rigger()) // импорт вложений.pipe(gulp.dest(path.build.html)) // выкладывание готовых файлов.pipe(webserver.reload({ stream: true })); // перезагрузка сервера }); // сбор стилей gulp.task("css:build", function () { return gulp.src(path.src.style) // получим main.scss .pipe(plumber()) // для отслеживания ошибок.pipe(sourcemaps.init()) // инициализируем sourcemap .pipe(sass()) // scss -> css .pipe(autoprefixer({ // добавим префиксы browsers: autoprefixerList })) .pipe(gulp.dest(path.build.css)) .pipe(rename({ suffix: ".min" })) .pipe(cleanCSS()) // минимизируем CSS .pipe(sourcemaps.write("./")) // записываем sourcemap .pipe(gulp.dest(path.build.css)) // выгружаем в build .pipe(webserver.reload({ stream: true })); // перезагрузим сервер }); // сбор js gulp.task("js:build", function () { return gulp.src(path.src.js) // получим файл main.js .pipe(plumber()) // для отслеживания ошибок.pipe(rigger()) // импортируем все указанные файлы в main.js .pipe(gulp.dest(path.build.js)) .pipe(rename({ suffix: ".min" })) .pipe(sourcemaps.init()) //инициализируем sourcemap .pipe(uglify()) // минимизируем js .pipe(sourcemaps.write("./")) // записываем sourcemap .pipe(gulp.dest(path.build.js)) // положим готовый файл.pipe(webserver.reload({ stream: true })); // перезагрузим сервер }); // перенос шрифтов gulp.task("fonts:build", function () { return gulp.src(path.src.fonts) .pipe(gulp.dest(path.build.fonts)); }); // обработка картинок gulp.task("image:build", function () { return gulp.src(path.src.img) // путь с исходниками картинок.pipe(cache(imagemin([ // сжатие изображений imagemin.gifsicle({ interlaced: true }), jpegrecompress({ progressive: true, max: 90, min: 80 }), pngquant(), imagemin.svgo({ plugins: [{ removeViewBox: false }] }) ]))) .pipe(gulp.dest(path.build.img)); // выгрузка готовых файлов }); // удаление каталога build gulp.task("clean:build", function () { return gulp.src(path.clean, { read: false }) .pipe(rimraf()); }); // очистка кэша gulp.task("cache:clear", function () { cache.clearAll(); }); // сборка gulp.task("build", [ "clean:build", "html:build", "css:build", "js:build", "fonts:build", "image:build" ]); // запуск задач при изменении файлов gulp.task("watch", function () { gulp.watch(path.watch.html, ["html:build"]); gulp.watch(path.watch.css, ["css:build"]); gulp.watch(path.watch.js, ["js:build"]); gulp.watch(path.watch.img, ["image:build"]); gulp.watch(path.watch.fonts, ["fonts:build"]); }); // задача по умолчанию gulp.task("default", [ "build", "webserver", "watch" ]);

Джентльменский набор Front-end разработчика

Ни для кого не секрет, что современный front-end разработчик обязан иметь в своем вооружении один из инструментов сборки проектов такие как Gulp или Grunt . До какого-то времени Grunt занимал монополию в этом вопросе, но отделившаяся от Grunt группа разработчиков решила создать свой легковесный и быстрый таск-менеджер Gulp.

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

Какие мы используем технологии

• Программная платформа: Node.js
• CSS пре-процессор: Stylus
• Таск-менеджер: Gulp

Зачем фронтендеру таск-менеджер

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

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

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

Установка Node.js

Если вы знаете как установить node.js на свою систему и пользуетесь ей, можете смело переходить к следующему заголовку.

Хотелось бы сразу предупредить, что все описанные действия актуальны для Mac OS X , но в целом применимы и для других Unix систем. Разработка через таск-менеджер и командную строку в Windows несколько более затруднительная и тут она описана не будет. Однако, если вы все же пользуетесь Windows и не готовы от него отказываться, то могу предложить вариант использования виртуальной машины с установленной Ubuntu , я использую этот вариант на своей домашней системе, что в целом довольно удобно.

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

в ответ должна появиться версия установленной node.js. Если все хорошо, идем дальше.

Структура директорий проекта

В наших проектах мы будем использовать унифицированный вариант структуры:

Develop - корневой каталог разработки └─start - каталог проекта ├─build - билд собраный таск-менеджером ├─resource - все файлы исходники для разработки (.psd и пр.) ├─src - каталог разработки │├─css - каталог разработки стилей ││├─images - все статичные изображения ││├─sprites - изображение собираемые в спрайт ││├─partial - пользовательские файлы стилей │││├─mixins.styl - пользовательские миксины │││└─styles.styl - пользовательские стили ││├─vendor - прочие внешние файлы стилей ││└─styles.styl - основной файл стилей │├─fonts - каталог шрифтов │├─img - каталог динамических изображений │├─js - каталог разработки JavaScript ││├─_*.js - побочные файлы js ││├─_main.js - основной пользовательский js ││└─main.js - основной файл js │├─.htaccess - конфиг для сервера │├─*.html - файлы разметки страницы │├─pages.html - файл со ссылками на все страницы шаблона │├─index.html - индексовый файл разметки страницы │└─include - каталог подключаемых файлов разметки │ └─*.html - подключаемые файлы разметки (header.html и пр.) ├─package.json - конфиг пакетного менеджера npm ├─gulpfile.js - конфиг Gulp ├─stylus.template.mustache - маска для чтения спрайтов ├─TODO - todo лист └─.gitignore - конфиг для Git

Установка

В консоли с помощью команды cd перейдем в корневой каталог разработки, создадим каталог нашего проекта mkdir start и перейдем в него.

Установим нашу структуру для проекта через консоль:

mkdir build resource src src/css src/css/images src/css/sprites src/css/partial src/css/vendor src/js src/template src/template/include src/img src/fonts

Создадим начальные файлы в структуре проекта:

touch gulpfile.js stylus.template.mustache .gitignore src/.htaccess src/TODO src/css/styles.styl src/css/partial/styles.styl src/css/partial/mixins.styl src/js/main.js src/js/_main.js src/template/pages.html src/template/index.html src/template/include/header.html src/template/include/footer.html

Создадим package.json

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

.gitignore

Говорим гиту какие каталоги игнорировать и не заливать в репозиторий:

/node_modules/ /build/ /resource/

Каталог node_modules появится позже после установки плагинов и будет содержать в себе все node-плагины проекта.

src/.htaccess

Устанавливаем для сервера дополнительное gzip сжатие и кэширование:

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript # Serve gzip compressed CSS files if they exist # and the client accepts gzip. RewriteCond "%{HTTP:Accept-encoding}" "gzip" RewriteCond "%{REQUEST_FILENAME}\.gz" -s RewriteRule "^(.*)\.css" "$1\.css\.gz" # Serve gzip compressed JS files if they exist # and the client accepts gzip. RewriteCond "%{HTTP:Accept-encoding}" "gzip" RewriteCond "%{REQUEST_FILENAME}\.gz" -s RewriteRule "^(.*)\.js" "$1\.js\.gz" # Serve correct content types, and prevent mod_deflate double gzip. RewriteRule "\.css\.gz$" "-" RewriteRule "\.js\.gz$" "-" # Serve correct encoding type. Header append Content-Encoding gzip # Force proxies to cache gzipped & # non-gzipped css/js files separately. Header append Vary Accept-Encoding ExpiresActive on ExpiresByType application/javascript "access plus 1 months" ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType text/css "access plus 1 months"

src/css/styles.styl

Подключим пользовательские файлы стилей в основной файл стилей:

@import "partial/styles"

Обратите внимание, что для подключение.styl файлов, расширение не указывается, согласно семантике кода пре-процессора Stylus. Для подключения стилей в другом расширении, например.css, указание последнего обязательно.

TODO

Эта страница содержит в себе todo лист разработки. Более подробно о работе с данным файлом вы можете почитать на странице плагина PlainTasks для Sublime Text.

На этом установка структуры завершена.

Установка плагинов через пакетный менеджер npm

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

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

Для начала нужно установить Gulp глобально (с ключем -g) на нашу систему

npm install gulp -g

Делать это нужно один раз , в дальнейшем глобальная установка не требуется.

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

npm install gulp --save-dev

Ключ --save-dev говорит о том, что информация о плагине (имя в репозитории и его версия) будет добавлена в конфиг package.json и запомнит его для данного проекта. Поскольку мы не храним в гите тяжеловесную папку с плагинами node_modules , сохраненная в конфиге информация об установленных плагинах позволит всего одной командой npm i развернуть в проекте все нужные плагины.

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

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

Плагин Stylus для Gulp

В наших проектах мы пользуемся пре-процессором Stylus который отлично работает и компилируется на ноде.

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

npm i gulp-stylus -D

Плагины обработки CSS

Автопрефиксер - автоматически подставляет префиксы -ms- -o- -moz- -webkit- в нужные свойства:

npm i gulp-autoprefixer -D

Минификация CSS - плагин минифицирует выходной CSS файл избавляя его от лишних пробелов и табуляций:

npm i gulp-minify-css -D

Плагины обработки изображений

Объединение картинок в спрайты - вам больше не нужно тратить часы драгоценного времени на объединение всех изображений в спрайты, а потом высчитывать их координаты, все это за вас автоматически сделает этот плагин:

npm i gulp.spritesmith -D

Добавим в ранее созданный файл stylus.template.mustache маску вычисления позиций в спрайтах:

{{#items}} ${{name}} = {{px.x}} {{px.y}} {{px.offset_x}} {{px.offset_y}} {{px.width}} {{px.height}} {{px.total_width}} {{px.total_height}} "{{{escaped_image}}}"; {{/items}}

Добавим специальные миксины в mixins.styl:

SpriteWidth($sprite) width $sprite spriteHeight($sprite) height $sprite spritePosition($sprite) background-position $sprite $sprite spriteImage($sprite) background-image url($sprite) sprite($sprite) if !match("hover", selector()) && !match("active", selector()) spriteImage($sprite) spritePosition($sprite) spriteWidth($sprite) spriteHeight($sprite)

Подключим миксины и генерируемый файл с координатами в основной файл стилей src/css/styles.styl:

@import "partial/sprite" @import "partial/mixins"

Обратите внимание что файлы спрайтов должны подключаться до пользовательских стилей @import "partial/styles"

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

npm i gulp-imagemin -D

Плагины обработки JavaScript

Минификация JS - плагин максимально минифицирует ваш JS код сокращая время его загрузки:

npm i gulp-uglify -D

Отслеживание ошибок JS - плагин досканально проверит ваш JS код на выявление всех несоответствий и выведет их в консоль:

npm i jshint gulp-jshint -D

Плагины обработки HTML

Подключаемые файлы - плагин позволяет хранить статичные части сайта, такие как header , footer , aside и т.д., в отдельных файлах и подключать их в любой части другого файла. Больше нет надобности, в случае мелких изменений в шапке, менять десятки, а то и сотни html страниц шаблона:

npm i gulp-rigger -D

Плагин так же совместим с JS.

Подключим пользовательский JS в основной файл JS src/js/main.js констуркцией:

//= _main.js

Подключим в index.html файлы header.html и footer.html

//= include/header.html //= include/footer.html

Прочие плагины

LiveReload - плагин избавляет вас от надобности каждый раз перезагружать страницу в браузере чтобы увидеть изменения, теперь это происходит автоматически при сохранении измененного файла:

npm i gulp-connect -D

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

npm i gulp-plumber -D

Переименование файлов - самая обычная работа с именами файлов. Плагин позволяет полностью переименовывать файлы, изменять расширение, добавлять префиксы и постфиксы, например чтобы привести файл вида style.styl в style.min.css:

npm i gulp-rename -D

Клинер - иногда возникает потребность в полном очищении каталога build , тут нам на помощь приходит плагин:

Sourcemap - для того чтобы после минификации ваши файлы оставались читаемы через отладку браузером, нужно добавлять sourcemap в минифицируемые файлы:

npm i gulp-sourcemaps -D

Расширенные возможности watch - плагин делает watch умным, теперь он не перезаписывает все файлы в билд при изменении всего одного файла, перезаписывается конкретный измененный файл, что экономит время и ресурсы:

npm i gulp-watch -D

Проверим package.json

После всех установленных плагинов, проверим наш package.json . Он должен иметь примерно следующий вид:

{ "name": "start", "version": "1.0.0", "description": "Start pack for Front-end develop", "author": "Ivan Ivanov", "license": "MIT", "dependencies": {}, "devDependencies": { "gulp": "latest", "gulp-autoprefixer": "latest", "gulp-connect": "latest", "gulp-imagemin": "latest", "jshint": "latest", "jshint-stylish": "latest", "gulp-jshint": "latest", "gulp-minify-css": "latest", "gulp-plumber": "latest", "gulp-rename": "latest", "gulp-rigger": "latest", "gulp-sourcemaps": "latest", "gulp-stylus": "latest", "gulp-uglify": "latest", "gulp-watch": "latest", "gulp.spritesmith": "latest", "rimraf": "latest" } }

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

В папке проекта также должен появиться каталог node_modules в котором хранятся все файлы плагинов ноды. Все нужные плагины установлены, можно переходить к настройки конфига Gulp.

Настройка gulpfile.js

gulpfile.js - это основной файл конфигурации нашего таск-менеджера, именно в нем мы будем хранить все настройки и команды.

Вся работа Gulp сводится к task (англ. задача). Задача - это отдельная самостоятельная функция с именем. Каждая задача может быть вызвана отдельно.

Режим совмстимости с современными стандартами

Во первых в начало файла подключим режим совместимости только по современным стандартам:

"use strict";

Подробнее про эту директиву можно .

Инициализируем плагин

Плагины инициализируются следующей конструкцией:

var initPlugin = require("plugin-name");

В соответствии с этой конструкцией инициализируем все наши плагины:

Var gulp = require("gulp"), //основной плагин gulp stylus = require("gulp-stylus"), //препроцессор stylus prefixer = require("gulp-autoprefixer"), //расставление автопрефиксов cssmin = require("gulp-minify-css"), //минификация css uglify = require("gulp-uglify"), //минификация js jshint = require("gulp-jshint"), //отслеживание ошибкок в js rigger = require("gulp-rigger"), //работа с инклюдами в html и js imagemin = require("gulp-imagemin"), //минимизация изображений spritesmith = require("gulp.spritesmith"), //объединение картинок в спрайты rimraf = require("rimraf"), //очистка sourcemaps = require("gulp-sourcemaps"), //sourcemaps rename = require("gulp-rename"), //переименвоание файлов plumber = require("gulp-plumber"), //предохранитель для остановки гальпа watch = require("gulp-watch"), //расширение возможностей watch connect = require("gulp-connect"); //livereload

Константы путей

Для удобства сразу определим все пути и маски:

Var path = { build: { //Тут мы укажем куда складывать готовые после сборки файлы html: "build/", js: "build/js/", css: "build/css/", img: "build/css/images/", fonts: "build/fonts/", htaccess: "build/", contentImg: "build/img/", sprites: "src/css/images/", spritesCss: "src/css/partial/" }, src: { //Пути откуда брать исходники html: "src/template/*.html", //Синтаксис src/template/*.html говорит gulp что мы хотим взять все файлы с расширением.html js: "src/js/[^_]*.js",//В стилях и скриптах нам понадобятся только main файлы jshint: "src/js/*.js", css: "src/css/styles.styl", cssVendor: "src/css/vendor/*.*", //Если мы хотим файлы библиотек отдельно хранить то раскоментить строчку img: "src/css/images/**/*.*", //Синтаксис img/**/*.* означает - взять все файлы всех расширений из папки и из вложенных каталогов fonts: "src/fonts/**/*.*", contentImg: "src/img/**/*.*", sprites: "src/css/sprites/*.png", htaccess: "src/.htaccess" }, watch: { //Тут мы укажем, за изменением каких файлов мы хотим наблюдать html: "src/template/**/*.html", js: "src/js/**/*.js", css: "src/css/**/*.*", img: "src/css/images/**/*.*", contentImg: "src/img/**/*.*", fonts: "src/fonts/**/*.*", htaccess: "src/.htaccess", sprites: "src/css/sprites/*.png" }, clean: "./build", //директории которые могут очищаться outputDir: "./build" //исходная корневая директория для запуска минисервера };

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

• *.js - все файлы с расширением js
• [^_]*.js - все файлы с расширением js, исключая те что начинаются с нижнего подчеркивания
• *.* - любые файлы с любым расширением в пределах текущей дитректории
• /**/*.html - все файлы с расширением.html в пределах текущей директории и всех дочерних директорий

Task (задачи)

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

Gulp.task("taskName", function(){ //some functions });

Мини-сервер и LiveReload

Первым делом мы настроим работу локального сервера и LiveReload:

// Локальный сервер для разработки gulp.task("connect", function(){ connect.server({ //настриваем конфиги сервера root: , //корневая директория запуска сервера port: 9999, //какой порт будем использовать livereload: true //инициализируем работу LiveReload }); });

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

Билд HTML

// таск для билдинга html gulp.task("html:build", function () { gulp.src(path.src.html) //Выберем файлы по нужному пути.pipe(rigger()) //Прогоним через rigger .pipe(gulp.dest(path.build.html)) //выгрузим их в папку build .pipe(connect.reload()) //И перезагрузим наш сервер для обновлений });

Билд JS

// проверка js на ошибки и вывод их в консоль gulp.task("jshint:build", function() { return gulp.src(path.src.jshint) //выберем файлы по нужному пути.pipe(jshint()) //прогоним через jshint .pipe(jshint.reporter("jshint-stylish")); //стилизуем вывод ошибок в консоль }); // билдинг яваскрипта gulp.task("js:build", function () { gulp.src(path.src.js) //Найдем наш main файл.pipe(rigger()) //Прогоним через rigger .pipe(sourcemaps.init()) //Инициализируем sourcemap .pipe(uglify()) //Сожмем наш js .pipe(sourcemaps.write()) //Пропишем карты.pipe(rename({suffix: ".min"})) //добавим суффикс.min к выходному файлу.pipe(gulp.dest(path.build.js)) //выгрузим готовый файл в build .pipe(connect.reload()) //И перезагрузим сервер });

Билд спрайтов

Все изображения для объединения в спрайты складываются в директорию src/css/sprites/ и после прогона через Gulp становятся единым спрайтовым изображением. В спрайты не стоит складывать логотипы и бэкграунды без четких размеров.

// билдим спрайты gulp.task("sprites:build", function () { var spriteData = gulp.src(path.src.sprites) //выберем откуда брать изображения для объединения в спрайт.pipe(spritesmith({ imgName: "sprite.png", //имя спрайтового изображения cssName: "sprite.styl", //имя стиля где храним позиции изображений в спрайте imgPath: "images/sprite.png", //путь где лежит спрайт cssFormat: "stylus", //формат в котором обрабатываем позиции cssTemplate: "stylus.template.mustache", //файл маски cssVarMap: function(sprite) { sprite.name = "s-" + sprite.name //имя каждого спрайта будет состоять из имени файла и конструкции "s-" в начале имени } })); spriteData.img.pipe(gulp.dest(path.build.sprites)); // путь, куда сохраняем картинку spriteData.css.pipe(gulp.dest(path.build.spritesCss)); // путь, куда сохраняем стили });

Для вывода спрайта достаточно воспользоваться миксином. Например, для файла lorem.png выборка из спрайта будет выглядеть следующим образом:

Lorem sprite($s-lorem)

Теперь объект с классом.lorem примет размеры изображения и само изображение в качестве фона.

Билд статичных изображений

Статичные изображения - это изображения используемые в шаблоне верстки.

// билдим статичные изображения gulp.task("image:build", function () { gulp.src(path.src.img) //Выберем наши картинки.pipe(imagemin({ //Сожмем их progressive: true, //сжатие.jpg svgoPlugins: [{removeViewBox: false}], //сжатие.svg interlaced: true, //сжатие.gif optimizationLevel: 3 //степень сжатия от 0 до 7 })) .pipe(gulp.dest(path.build.img)) //выгрузим в build .pipe(connect.reload()) //перезагрузим сервер });

Билд динамичных изображений

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

// билдим динамичные изображения gulp.task("imagescontent:build", function() { gulp.src(path.src.contentImg) .pipe(imagemin({ //Сожмем их progressive: true, //сжатие.jpg svgoPlugins: [{removeViewBox: false}], //сжатие.svg interlaced: true, //сжатие.gif optimizationLevel: 3 //степень сжатия от 0 до 7 })) .pipe(gulp.dest(path.build.contentImg)) //выгрузим в build .pipe(connect.reload()) //перезагрузим сервер });

Билдим CSS

// билдинг пользовательского css gulp.task("cssOwn:build", function () { gulp.src(path.src.css) //Выберем наш основной файл стилей.pipe(sourcemaps.init()) //инициализируем soucemap .pipe(stylus({ compress: true, "include css": true })) //Скомпилируем stylus .pipe(prefixer({ browser: ["last 3 version", "> 1%", "ie 8", "ie 7"] })) //Добавим вендорные префиксы.pipe(cssmin()) //Сожмем.pipe(sourcemaps.write()) //пропишем sourcemap .pipe(rename({suffix: ".min"})) //добавим суффикс.min к имени выходного файла.pipe(gulp.dest(path.build.css)) //вызгрузим в build .pipe(connect.reload()) //перезагрузим сервер });

Отдельный таск для внешних стилей:

// билдинг вендорного css gulp.task("cssVendor:build", function () { gulp.src(path.src.cssVendor) // Берем папку vendor .pipe(sourcemaps.init()) //инициализируем soucemap .pipe(cssmin()) //Сожмем.pipe(sourcemaps.write()) //пропишем sourcemap .pipe(gulp.dest(path.build.css)) //выгрузим в build .pipe(connect.reload()) //перезагрузим сервер });

Также добавим таск для билда общего CSS:

// билдим css целиком gulp.task("css:build", [ "cssOwn:build", // "cssVendor:build" ]);

В случае если требуется обработать внешние стили отдельно от домашних и выгрузить их отдельными файлами нужно раскомментировать строчку "cssVendor:build"

Билд шрифтов

// билдим шрифты gulp.task("fonts:build", function() { gulp.src(path.src.fonts) .pipe(gulp.dest(path.build.fonts)) //выгружаем в build });

Билд.htaccess

// билдим htaccess gulp.task("htaccess:build", function() { gulp.src(path.src.htaccess) .pipe(gulp.dest(path.build.htaccess)) //выгружаем в build });

Общий билд

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

// билдим все gulp.task("build", [ "html:build", "jshint:build", "js:build", "sprites:build", "css:build", "fonts:build", "htaccess:build", "image:build", "imagescontent:build" ]);

Очистка билда

Иногда требуется полностью очистить каталог build . Здесь нам на помощь придет следующий таск:

// чистим папку билда gulp.task("clean", function (cb) { rimraf(path.clean, cb); });

Watch или отслеживание изменений в реальном времени

Одной из самых важных и полезных функций Gulp является функция watch , которая позволяет отслеживать в реальном времени все изменения с производимыми файлами и в зависимости от этого выполнять конкретные действия:

// watch gulp.task("watch", function(){ //билдим html в случае изменения watch(, function(event, cb) { gulp.start("html:build"); }); //билдим спрайты в случае изменения watch(, function(event, cb) { gulp.start("sprites:build"); }); //билдим контекстные изрображения в случае изменения watch(, function(event, cb) { gulp.start("imagescontent:build"); }); //билдим css в случае изменения watch(, function(event, cb) { gulp.start("css:build"); }); //проверяем js в случае изменения watch(, ["jshint"]); //билдим js в случае изменения watch(, function(event, cb) { gulp.start("js:build"); }); //билдим статичные изображения в случае изменения watch(, function(event, cb) { gulp.start("image:build"); }); //билдим шрифты в случае изменения watch(, function(event, cb) { gulp.start("fonts:build"); }); //билдим htaccess в случае изменения watch(, function(event, cb) { gulp.start("htaccess:build"); }); });

Действия по-умолчанию

Действия по-умолчанию - это то какие задачи будет выполнять таск-менеджер при вводе команды gulp в консоль:

// действия по умолчанию gulp.task("default", ["build", "watch", "connect"]);

В нашем случае по-умончанию мы сбилдим наш проект, включим режим watch и запустим сервер.

Команды для командной строки

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

• gulp - основная команда, запускает таск default
• gulp build - билдим всё
• gulp watch - запуск watch
• gulp clean - очистка каталога build
• gulp connect - запуск сервер
• gulp html:build - билд HTML
• gulp jshint:build - проверяем JS на ошибки
• gulp js:build - билд JS
• gulp sprites:build - билд спрайта
• gulp image:build - билд статичных изображений
• gulp imagecontent:build - билд динамичных изображений
• gulp cssOwn:build - билд пользовательского CSS
• gulp cssVendor:build - билд внешних CSS
• gulp css:build - общий билд CSS
• gulp fonts:build - билд шрифтов
• gulp htaccess:build - билд.htaccess

На данном этапе настройка gulpfile.js закончена.

Копируем стартовый пакет в проект

Для начала зайдем через консоль в папке где мы ведем разработку, например cd develop/example и скопируем все из директории стартового пакета в наш проект cp -a ~/develop/start/. ~/develop/example/

Такой способ копирования наиболее удобен, т.к. точно скопирует все, в том числе и скрытые файлы.gitignore и пр.

Заключение

Используя данное руководство мы подготовили стартовый пакет для использования Gulp в своих проектах для Front-end разработки.

Так же данный пакет доступен на GitHub

Post Scriptum

Данная статья не является заключительной и будет обновляться в зависимости от изменений и улучшений.