Мануал по часто используемым front-end инструментам

July 21, 2017 Jazz Team Полезное

Вступление

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

NPM

Введение

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

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

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

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

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

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

https://www.npmjs.com/

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

Для установки 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.

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

http://gulpjs.com/

Особенности

• Создание веб-сервера и автоматическая перезагрузка страницы в браузере при сохранении кода, слежение за изменениями в файлах проекта.
• Использование различных 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.

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

https://jasmine.github.io/

Особенности

• Поддержка асинхронного тестирования.
• Возможность выставлять наблюдателей (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.

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

http://usejsdoc.org/

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

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

Комментарии начинаются со слэша две звездочки (/**) и заканчивается звездочкой-слэшем (*/). Каждая новая строка в комментарии начинается со звездочки (*).

Текст описания документации помещается в данную конструкцию.

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

Теги

• @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/

front-end, GruntJS, GulpJS, Jasmine, JavaScript, jQuery, JS, Karma, KarmaJS, NPM, мануал, технические статьи

Бизнес-визит основателя JazzTeam в Силиконовую Долину Мануал по часто используемым front-end инструментам