Мануал по часто используемым front-end инструментам
Вступление
Данный мануал содержит описание полезных и наиболее часто используемых 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, необходимо выполнить команду:
npm -v
Настройка файла конфигурации
Файл package.json содержит в себе информацию о вашем приложении: название, версия, зависимости и тому подобное. Любая директория, в которой есть этот файл, интерпретируется как Node.js-пакет.
Пример файла package.json:
Для создания файла package.json необходимо выполнить команду:
npm init
После этого необходимо будет заполнить некоторую информацию о проекте.
В данном файле будут храниться наименования и версии всех пакетов необходимых в проекте. С помощью команды npm install можно подгрузить все пакеты, которые находятся в package.json.
Для установки некоторого пакета и автоматическим сохранением в файле package.json используется команда:
npm install<название пакета> --save-dev
Альтернативы
Yarn
https://yarnpkg.com/lang/en/ – официальный сайт
Yarn – это менеджер пакетов, совместно созданный Facebook, Google, Exponent и Tilde. Его целью является решение целого ряда проблем, с которыми столкнулись разработчики при использовании npm, а именно:
- установка пакетов не была достаточно быстрой и последовательной;
- существовали проблемы с безопасностью, так как npm позволяет пакетам запускать код при установке.
Bower
https://bower.io/ – официальный сайт
Bower – это система управления пакетами на стороне клиента. Ее работа зависит от Node.js и npm. Система Bower предназначена для управления компонентами, содержащие HTML, CSS, JavaScript, шрифты и изображения. Содержит функции поиска, загрузки и установки пакетов. Для управления пакетами в Bower служит манифестный файл bower.json.
GulpJS
Введение
Сборка является неотъемлемой частью любого frontend-проекта. Для этой задачи используются таск-менеджеры.
Таск-менеджер – приложение, которое служит для автоматизации сборки проекта и других рутинных задач, которые приходится выполнять в процессе разработки (минификация кода, конкатенация, запуск unit-тестов и многое другое). Для этого разработчик, создав task-файл, прописывает инструкцию (таск), каким образом следует выполнить ту или иную задачу. В итоге упрощается разработка проекта.
Одним из таких таск-менеджеров является GulpJS.
GulpJS – таск-менеджер для автоматического выполнения часто используемых задач, написанный на языке программирования JavaScript. Программное обеспечение использует командную строку для запуска задач, определенных в файле Gulpfile. Создан как ответвление от проекта Grunt, чтоб взять из него лучшие практики. Распространяется через менеджер пакетов NPM под MIT лицензией.
GulpJS отличается от других таск-менеджеров большей наглядностью и простотой. Также он является наиболее быстрым сборщиком проектов.
На 2017-й год насчитывается около 3000 плагинов для Gulp.
Официальный сайт
Особенности
- Создание веб-сервера и автоматическая перезагрузка страницы в браузере при сохранении кода, слежение за изменениями в файлах проекта.
- Использование различных 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
Шаг 3: Далее нужно создать файл gulpfile.js в корне вашего проекта (в этом файле будут прописываться сборочные таски).
Подгрузка дополнительных плагинов, которые могут быть использованы при сборке проекта, также осуществляется c помощью npm следующей командой:
npm install <название плагина> --save-dev
Все установленные плагины находятся в директории node_modules/.
Пример gulpfile.js
Использование
Шаг 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'));
});
Шаг 3: Далее можно выполнить данный таск в консоли:
gulp concat
Дополнительная информация
Также можно определить таск, который будет вызывать выполнение других тасков.
gulp.task('build', ['html', 'css']);
Кроме этого существует метод watch для наблюдения изменений в файлах:
gulp.watch('маска файлов для наблюдения', ['название таски, которая выполнится при изменении файлов']);
В gulpfile.js можно создать дефолтный таск:
gulp.task('default', ['task1', 'task2']);
Данный таск запускается из консоли командой:
gulp
Основные плагины
- 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
https://gruntjs.com/ – официальный сайт
GruntJS – таск-менеджер, как и GulpJS, позволяющий автоматизировать рутинные задачи для разработчика, связанные с минификацией кода, анализом качества кода, тестированием и многим другим.
Различия
В отличие от GulpJS, GruntJS не использует потоковую передачу данных. Gruntfile (файл настроек в GruntJS) менее читабелен и его сложнее воспринимать в отличие от файла настроек в GulpJS. Вдобавок GruntJS является более медленным сборщиком, чем Gulp.
Jasmine
Введение
Тестирование является составляющей частью разработки любого проекта. Данный процесс позволяет проверить правильность кода и выявить ситуации, в которых поведение программы является неправильным, нежелательным или не соответствующим спецификации. Каждый из нас, в процессе разработки, время от времени проверяет, правильно ли работает та или иная функция. Самый простой способ – это запустить и посмотреть результат. Однако такой подход – очень несовершенный способ проверки кода. В результате можно упустить какой-нибудь момент, который приведет к неправильной работе, а соответственно к ошибке. Для предупреждения таких ситуаций используется автоматизированное тестирование.
Автоматизированное тестирование – процесс написания тестов отдельно от кода, с возможностью в любой момент запустить их и проверить все важные случаи использования.
Одним из инструментов тестирования JavaScript кода является Jasmine.
Jasmine – это BDD фреймворк для тестирования JavaScript кода, позаимствовавший многие черты из RSpec.
Официальный сайт
Особенности
- Поддержка асинхронного тестирования.
- Возможность выставлять наблюдателей (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 принимает имя объекта и массив строк, являющийся списком методов объекта заглушки.
Пример теста написанного на Jasmine
Альтернативы
Mocha
https://mochajs.org/ – официальный сайт
Mocha – фреймворк для тестирования JavaScript кода, работающий на основе node.js. Поддерживает работу с браузерами, асинхронное тестирование. Предоставляет информацию о степени покрытия тестами.
Chai
http://chaijs.com/ – официальный сайт
Chai – BDD/TDD библиотека утверждений для NodeJS и браузера, которая может быть легко использована в паре с любым фреймворком тестирования JavaScript.
QUnit
http://qunitjs.com/ – официальный сайт
QUnit – библиотека от разработчиков jQuery, позволяющая писать unit-тесты для кода на javascript. Официальный инструмент для тестирования jQuery.
ZombieJS
http://zombie.js.org/ – официальный сайт
ZombieJS – легковесный фреймворк для тестирования JavaScript кода. Имитирует поведение браузера.
SinonJS
http://sinonjs.org/ – официальный сайт
SinonJS – mock-библиотека для JavaScript, с которой можно работать в любом тестовом фреймворке.
JSDoc
Введение
Необходимым этапом при создании хорошего продукта является его документирование.
Документирование кода – это процесс описания функций, классов, методов с помощью определенных комментариев в коде, которые позволят в дальнейшем упростить работу с ним, как автору, так и другим программистам.
Хорошо документированный проект поможет новым разработчикам лучше и быстрее разобраться в проекте и усилит контроль над отдельными его частями.
Одним из инструментов документирования JavaScript кода является JSDoc.
JSDoc – генератор документации из комментариев исходного кода на JavaScript. Синтаксис JSDoc похож на Javadoc, который используется для документирования Java кода. Сгенерированная документация имеет формат HTML.
Официальный сайт
Использование
Генерация документации производится из комментариев исходного кода.
Комментарии начинаются со слэша две звездочки (/**) и заканчивается звездочкой-слэшем (*/). Каждая новая строка в комментарии начинается со звездочки (*).
Текст описания документации помещается в данную конструкцию.
Внутри комментария могут быть использованы теги. Каждый тег начинается с @.
Теги
- @author – Имя разработчика;
- @constructor – Указывает, что функция используется как конструктор;
- @deprecated – Указывает на устаревшую или не рекомендуемую функцию;
- @description – Указывает описание для функции;
- @exception – Описывает исключение;
- @param – Описывает параметр функции (в фигурных скобках указывается тип);
- @private – Указывает, что метод приватный;
- @property – Указывает сведение о свойстве в объекте;
- @return – Описывает возвращаемое значение;
- @see – Описывает связь с другим объектом;
- @summary – Указывает описание для функции как и @description;
- @this – Задает тип объекта, на который указывает this внутри функции;
- @throw – Описывает исключение (в фигурных скобках указывается тип);
- @type – Указывает тип переменной (в фигурных скобках указывается тип);
- @typedef – Указывает пользовательский тип (в фигурных скобках указывается тип);
- @version – Указывает версию библиотеки.
Пример
/**
* @description Функция суммирования двух чисел.
* @param {number} a - Первое число.
* @param {number} b - Второе число.
* @return {number}
*/
function sum(a, b) {
return a + b;
}
Генерация документации
Генерацию документации можно произвести с помощью GulpJS. Для этого используется плагин gulp-jsdoc. Установка плагина:
npm install gulp-jsdoc --save-dev
Следующим шагом является подключение плагина в gulpfile.js:
var jsdoc = require('gulp-jsdoc');
Создадим таск для генерации документации:
gulp.task('jsdoc', function () {
gulp.src('source-files')
.pipe(jsdoc(<название директории, в которую будет сгенерирована документация>));
});
Альтернативы
YUIDoc
http://yui.github.io/yuidoc/ – официальный сайт
YUIDoc – NodeJS-приложение, которое используется для генерации документации из комментариев с синтаксисом похожим на Javadoc и Doxygen. Данный инструмент позволяет:
- “Живой предпросмотр” (live preview).
- Поддержка разных языковых программирования.
Docco
http://jashkenas.github.io/docco/ – официальный сайт
Docco – генератор документации написанный на Literate CoffeeScript. Документация Docco представляет из себя html страницу, в которой представлен как исходный код так и текст описания.
KarmaJS
Введение
Существует много различных инструментов, которые упрощают разработку проекта. Для упрощения процесса тестирования проекта используется такая утилита как KarmaJS.
KarmaJS – консольный инструмент, который позволяет запускать тесты в различных браузерах, отслеживает изменения исходного кода, автоматически запуская тесты, и позволяет определить процент покрытия.
Официальный сайт
https://karma-runner.github.io/1.0/index.html
Особенности
- Запуск тестов из консоли.
- Автоматический запуск тестов при каждом изменении исходного кода.
- Поддержка различных фреймворков для тестирования (jasmine, mocha, qunit и др.).
- Возможность тестирования на нескольких браузерах.
- Возможность интеграции с Jenkins.
- Отображение степени покрытия тестами.
Начало работы
Для начала работы с KarmaJS нам необходимо установить, некоторые зависимости. Установка происходит с помощью пакетного менеджера npm. Он также необходим для работы с KarmaJS.
Шаг 1: Сперва необходимо установить KarmaJS:
npm install -g karma-cli
Шаг 2: Далее нужно установить эмулятор для тестирования JavaScript кода:
npm install -g phantomjs
Шаг 3: Затем необходимо установить необходимые плагины для запуска тестов в необходимых браузерах. Существуют следующие плагины для автоматического открытия браузеров при запуске тестов:
karma-chrome-launcher – Chrome;
karma-firefox-launcher – Mozilla Firefox;
karma-safari-launcher – Safari.
Использование
Шаг 1: Для организации запуска тестов на KarmaJS, необходимо сперва создать конфигурационный файл. Для этого выполняется команда:
karma init
Данная команда попросит заполнить некоторую информацию о конфигурации KarmaJS, в том числе информацию о браузерах, в которых будет производиться тестирование, расположение тестов и другое.
Шаг 2: Далее нужно настроить файл конфигурации.
Параметры
- files() – список файлов для загрузки;
- exclude() – список исключений файлов из files();
- reporters() – список плагинов, используемых для вывода результатов тестирования;
- port() – порт веб-сервера;
- runnerPort() – порт клиента;
- colors() – включение/выключение цветов при выводе лога в консоль;
- logLevel() – формат логгирования;
- autoWatch() – включение/выключение автоматического запуска тестов при изменении исходного кода;
- browsers() – список браузеров, в которых будут запускаться тесты (Chrome, Firefox, Safari, PhantomJS);
- captureTimeout() – задание таймаута в миллисекундах;
- singleRun() – для одноразового запуска;
- preprocessors() – список обработчиков, которые будут применены к файлам, до загрузки в браузер.
Степень покрытия тестами
Для добавления отображения степени покрытия тестами в KarmaJS необходимо:
Шаг 1: В параметр preprocessors добавить маску файлов, степень которых необходимо проверить:
preprocessors: {
'js/*.js': ['coverage']
}
Шаг 2: Добавить в параметр reporters строку ‘coverage’.
Шаг 3: Добавить параметры степени покрытия тестами:
coverageReporter: {
type: 'text'
}
Проверка качества кода
Для проверки качества кода в KarmaJS необходимо:
Шаг 1: Установить зависимость jshint:
npm install jshint --save-dev
Шаг 2: В параметр preprocessors добавить маску файлов, качество кода которых необходимо проверить:
preprocessors: {
'js/*.js': ['jshint']
}
Пример файла karma.conf.js
Запуск тестов
karma start/code>
Подробная информация по запуску тестов при помощи KarmaJS и Jasmine по ссылке:
https://jazzteam.org/ru/technical-articles/karma-and-jasmine-test-running-manual/
Бизнес-визит основателя JazzTeam в Силиконовую Долину Мануал по часто используемым front-end инструментам