Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Автоматизация рабочего процесса с Grunt и Gulp

by
Difficulty:BeginnerLength:LongLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Russian (Pусский) translation by Anton Lisovsky (you can also view the original English article)

Будучи начинающим фронтенд разработчиком, овладев в достаточной мере HTML5, CSS и JavaScript, очевидным следующим шагом будет знакомство с инструментами, которые помогают вашим коллегам не потерять рассудок в этой действительно непростой сфере. Вам тоже полагается возможность писать более гибкий CSS код, используя Less. Вам полагается возможность оптимизировать скорость передачи JS файлов при помощи минификации. Вы также заслужили такую роскошь, как автоматическая валидация JS, с помощью JSHint.

Вы заслужили все эти замечательные вещи.

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

И в один прекрасный момент вы зададитесь вопросом: есть-ли способ автоматизировать все эти инструменты? Как же настроить надёжный рабочий процесс и избежать большинства ошибок?

Само собой решение существует и инструменты, которые только и ждут момента когда ваши руки доберутся до них: Grunt и Gulp.

Используя эти инструменты, вы вероятнее всего хотите знать, как они работают и какой из них стоит использовать, не правда-ли? В таком случае вы читаете подходящую статью!

1. Пример, который мы будем использовать

Я познакомлю вас с основами Grunt и Gulp, для этого нам понадобиться простой рабочий пример, который можно скачать на GitHub.

Это простой веб-сайт состоящий из трёх файлов:

list of files indexhtml mainjs and stylesless

В фале styles.less находятся наши таблицы стилей, с дополнительным функционалом, который недоступен в обычном CSS. Далее мы будем применять компилятор Less, который создаст нам файл style.css. В Less мы можем, к примеру, использовать такие вещи, как объявление переменных:

variables in the css file

Узнать больше информации о Less можно во вступительной статье документации.

В JavaScript и HTML коде нет ничего сложного. Страница должна выглядеть следующим образом.

Simple HTML web page

2. Знакомство с пакетным менеджером Node.js

Для начала вам предстоит понять, как работает пакетный менеджер Node.js.

Npm - инструмент, который идёт вместе с Node.JS. Он используется для установки фреймворков и библиотек и всех необходимых зависимостей.

К примеру, чтобы воспользоваться Less и скомпилировать его в обычный CSS, вам следует поставить Less, следующей командой:

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

После этого, можно запускать команду для компиляции .less файлов в .css:

Npm использует созданный им файл package.json, который находится в рабочей директории. В файле используется текстовый формат обмена данными (JavaScript Object Notation JSON), благодаря ему npm знает какой инструмент и какая версия данного инструмента установлена, а также какие фреймворки используются в текущем проекте project (текущая директория).

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

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

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

В данном файле могут находится два типа зависимостей:

  • зависимости, которые используются при запуске нашего веб-приложения или Node.js приложения
  • зависимости, которые мы используем на стадии разработки (к примеру Less) и которые будут применяться для компиляции и валидации нашего кода

Npm предоставляет три способа установки пакетов:

  • глобально на вашем компьютере, при помощи флага -g или -global
  • для запуска и работы приложения, локально в директории проекта, никаких флагов указывать не надо (лишь npm install [установка инструментов и фреймворков])
  • для установки пакетов, используемых на стадии разработки, флаг --save-dev

Третий способ установки создаёт секцию devDependencies с соответствующими свойствами в package.json файле

devDependencies section property inside the packagejson file

3. Grunt

Почему Grunt?

Grunt первый сборщик, появившийся на сцене автоматизации рабочего процесса для фронтенд разработки. Многие используют Grunt, к примеру Twitter, jQuery и Modernizr.

Основные принципы Grunt - предоставить нам лёгкую возможность запускать таски (tasks). Таск - набор файлов с кодом и файлов с конфигурацией, готовый к использованию и уже созданный для вас. Вы можете получить новые таски, посредством установки Grunt плагинов, которые можно поставить с помощью npm. Можно найти абсолютно любой плагин, для большинства задач, которые вы хотите выполнить, к примеру Less и JSHint.

Для запуска Grunt, вы должны создать Gruntfile в котором будут описаны таски, которые вы хотите запустить, а также конфигурация к каждой из них. После того как всё это сделано, вам остаётся лишь запустить команду grunt, после чего указать название таска (определённый таск, либо таск, который сконфигурирован для работы по умолчанию), далее они выполнят необходимую работу автоматически.

Теперь давайте шаг за шагом, разберём как нам всё это настроить.

Шаг 1. Создание файла Package.json

Воспользуйтесь npm для инициализации файла:

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

Шаг 2. Установка Grunt глобально и локально

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

Запустите:

Затем, запустите следующую команду локально:

Обратите внимание: не забывайте указать -dev, тем самым пакеты будут добавлены в качестве devDependencies в файл package.json.

Шаг 3. Cоздание GruntFile.js

Grunt работает используя gruntFile.js. Тут находится всё необходимое для работы Grunt, то есть:

  • конфигурация тасков
  • кастомные таски
  • загрузка тасков

Grunt будет экспортировать лишь одну функция, которая принимает один параметр под названием "grunt". Вы будете использовать этот объект для всех задач имеющих отношение к Grunt.

Вот как выглядит минимальное содержание gruntfile, который лишь читает package.json и создаёт таск defult, который ничего не делает.

Обратите внимание: этот файл должен находиться в корневой директории вашего проекта, рядом с package.json.

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

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

Вы должны увидеть следующий результат:

Done without errors

Шаг 4. Добавление первого таска: JSHint

Теперь когда ваш Gruntfile готов, следующим шагом будет добавление и использование плагина. Плагины можно найти, ознакомившись со списком на Grunt веб-сайте. Один из распространённых тасков Gruntfile - валидация JavaScript синтаксиса. Для этого мы обычно используем JSHint.

Давайте добавим его к нашему рабочему процессу с grunt.

Если вы будете искать JSHint на странице с grunt плагинами, вы обнаружите grunt-contrib-jshint, это как раз то что нам надо!

В директории проекта, запустите:

После того как вы это сделали, вам следует добавить плагин в ваш Gruntfile.js. Для этого выполните два простых действия:

  1. Загрузите плагин.
  2. Сконфигурируйте таск.

Для загрузки плагина, используйте функция loadNpmTasks:

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

К примеру, в нашем случае мы хотим проверить все JavaScript файлы, кроме gruntfile.js. Мы также хотим активировать набор определённых правил для проверки JavaScript файлов, к примеру eqeqeq, чтобы убедиться, что мы используем тройной знак равно.

Ниже модифицированная функция initConfig.

Code for the initConfig function modified

Вы можете запустить таск используя следующую команду (где вы указываете название таска в качестве grunt параметра):

Далее можно увидеть результат выполнения:

Done without errors

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

Поздравляю теперь у вас есть таск по автоматизации работающий благодаря grunt!

Шаг 5. Добавление второго таска: компиляция Less

Ваш JSHint таск работает замечательно, но не кажется вам что стоит добавить ещё один к вашему рабочему процессу. Обычно такой инструмент, как Grunt используется для запуска нескольких тасков, задач одновременно.

Довольно просто добавить больше тасков, для этого стоит повторить предыдущие действия. Предположим вы хотите добавить компиляцию less файлов в ваш процесс по автоматизации. Если вы поищите в списке Grunt плагинов, вы найдёте grunt-contrib-less, который следует установить в каталог нашего проекта:

Также как и JSHint таск, вам следует добавить конфигурацию для less компиляции:

code to add the configuration

Затем загрузите таск:

code to load the task

Теперь вы можете указать less таск: который будет запускать только Less. Это хорош, но вы скорее всего хотите запускать все таски за раз, не правда-ли? Для этого и существует таск default.

Когда запускается команда grunt без дополнительных параметров, название таска, grunt будет искать default таск и запустит таски указанные в этом массиве. Вы можете модифицировать его для запуска less и jshint. Обратите внимание для добавления группы тасков - defult, вы должны вызвать функцию registerTask:

code to call the registerTask function

Теперь при запуске grunt, запустится jshint, после чего less:

Running less task done without errors

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

Просто, не правда-ли?

Шаг 6. Используем Watch, чтобы не запускать команды вручную

Теперь вы счастливый разработчик. Все задачи, которые раньше вам приходилось повторять, теперь автоматизированны благодаря grunt и вам всего лишь надо запустить grunt, чтобы выполнить их. Но всё это можно упростить ещё дальше. Это можно также автоматизировать.

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

Сперва установите watch в папку вашего проекта:

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

code to specify a configuration for each task you want to cover using watch

Чтобы получить детальную информацию, прочитайте подробную документацию для этого таска.

Для активации watch, вам необходимо запустить лишь одну команду:

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

execute tasks each time a file is changed and this file is in the scope of watched files for the specific task

На этом всё! Вы узнали всё необходимое, чтобы автоматизировать рабочий процесс с grunt.

4. Gulp

Что такое Gulp?

Gulp - альтернатива grunt. Он появился позднее grunt и имеет репутацию более гибкого инструмента. Перед тем как выбрать один из этих инструментов, давайте разберёмся, как gulp работает.

Gulp - инструмент для автоматизации рабочего процесса. Также как и grunt, он использует npm и package.json файл. Все необходимые плагины будут установлены в качестве devDependencies в файл package.json, с помощью npm.

Одно из главных отличий, Gulp использует потоки (streams). Поток - набор функций, через который проходит файл и модифицируется в памяти компьютера. На жёсткий диск файл будет записан лишь в конце процесса, для большей эффективности. С другой стороны файл обрабатываемый Grunt, после каждого изменения записывается на жёсткий диск и так далее.

Давайте быстро посмотрим, как Gulp работает, выполнив несколько простых действий.

Шаг 1. Создайте файл Package.json

Подобно Grunt, сначала вы должны создать файл package.json. Сделать это можно точно также, как мы делали это в примере с grunt.

Шаг 2. Установите Gulp и Gulp-Util глобально и локально

После того как файл package.json создан, глобально и локально установите gulp:

и

Установится команда gulp и всё необходимое для рабочего процесса с gulp.

Затем вам стоит поставить gulp utils, которые содержат часто используемые другими плагинами функции:

Наконец, создайте простой gulp файл, который выглядит следующим образом:

Как вы могли заметить синтаксис немного отличается от grunt. С gulp, плагины добавляются функцией require, возможно вы встречали её, если знакомы с Node.js разработкой. Здесь также имеется таск defult, который мы указывает во время вызова функции gulp.task.

Если вы запустите команду gulp, находясь в директории проекта, вы увидите следующий результат:

result of running the gulp command line using a command prompt

Шаг 3. Использование первого таска: компиляция Less

Чтобы воспользоваться плагином с gulp, нам понадобиться такая же функция, которую мы применяли для создания таска defult. Не нужно использовать специальную функцию для создания таска. Вы вызываете gulp.task, указываете название какое захотите и передаёте JavaScript функцию в качестве второго параметра. Когда gulp выполняет таск, он также вызывает эту функцию.

Чтобы применить плагин, вы должны использовать имя, которые использовалось во время require. Обычно, вы вызываете во время потока, который чаще всего начинаете с указания необходимых файлов. Для этого нужна функция gulp.src. Будет выбран набор файлов, после чего они будут возвращены в поток и могут быть использованы другой функцией, благодаря pipe. Таким образом можно соединить несколько действий, не записывая каждый раз файлы на жёсткий диск. Вы просто передаёте поток от одного плагина другому.

Вот простой пример с Less:

basic sample for less

Сначала мы применяем require ('gulp-less') для загрузки less плагина, для gulp. (Мы должны установить его командой npm install gulp-less --save-dev).

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

Когда вы поймёте принцип работы pipe, вы сможете с лёгкостью добиться такого же результат, которого мы добились с grunt.

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

Обратите внимание: очевидно, что существует gulp-watch плагин, для автоматизации запуска рабочего процесса!

Заключение: какой из них выбрать?

Надеюсь теперь процесс автоматизации стал для вас более понятен, также как и принципы работы с Grunt или Gulp.

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

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

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

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

Больше информации

Больше информации о JavaScript

Microsoft предоставляет много уроков касательно JavaScript технологий с открытым исходным кодом. И мы планируем создать ещё больше о Microsoft Edge. Вот некоторые из них:

Также обратите внимание на некоторые бесплатные инструменты с которыми можно уже сейчас начать работать: Visual Studio Code, Azure Trial и инструменты для кросс-браузерного тестирования—доступные на Mac, Linux и Windows.

Эта статья является частью серии от Microsoft посвящённая веб-разработке. Мы хотим поделиться нашими впечатлениями о Microsoft Edge и EdgeHTML движок для рендеринга. Вы можете установить бесплатный образ виртуальной машины или воспользоваться удалённым тестированием на Mac, iOS, Android или Windows @ http://dev.modern.ie/.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.