Это пост №76 из серии, посвященный изучению JavaScript и его строительных компонентов. В процессе определения и описания основных элементов мы также поделимся некоторыми практическими правилами, которые мы используем при создании SessionStack, приложения JavaScript, которое должно быть надежным и высокопроизводительным, чтобы помочь компаниям оптимизировать цифровой опыт своих пользователей.
Введение
Работа веб-разработки включает в себя сочетание многих задач, таких как запуск сервера, оптимизация контента, развертывание файлов на сервере, минимизация сценариев и таблиц стилей, а также сжатие изображений среди прочего.
Чтобы сделать работу по веб-разработке быстрее и проще, веб-разработчики могут использовать средства запуска задач для автоматизации этих задач.
В этой статье мы рассмотрим средства запуска задач, преимущества их использования, а затем поговорим об инструментах запуска задач Gulp. Я также собираюсь использовать краткий пример, которому вы можете следовать, чтобы показать, как использовать инструмент Gulp.
Что такое таск-раннеры
Разработка веб-приложения включает в себя некоторые задачи и процессы разработки, такие как запуск сервера, кэширование и оптимизация контента. Большинство этих задач требуют постоянного повторения, например, каждый раз, когда вы вносите изменения в любой из файлов, присутствующих в вашем проекте, вам может потребоваться выполнить эти задачи, а это занимает довольно много времени.
Однако разработчики могут сделать выполнение задач веб-разработки более быстрым и плавным, используя средства запуска задач. Что такое таскраннеры? Исполнители задач — это простые инструменты, которые помогают веб-разработчикам автоматически запускать задачи веб-разработки, выполнение которых может потребовать дополнительных усилий и времени.
Используя средства запуска задач, вам не нужно повторять задачи веб-разработки, они помогают вам выполнять эти команды автоматически.
Исполнители задач можно использовать для таких вещей, как компиляция кодов SCSS в коды CSS и минимизация кодов CSS для производства, среди прочего.
Некоторые хорошие примеры средств запуска задач, которые у нас есть, — это Webpack, Grunt, Rollup и Gulp (о которых я собираюсь рассказать в этой статье).
Веб-разработчики также могут использовать сценарии npm для выполнения задач. NPM имеет несколько встроенных сценариев, когда дело доходит до запуска задач, и его можно использовать для запуска довольно большого количества встроенных задач для разработчиков. Например, у вас есть test script в package.json, которые используются для запуска тестов в веб-приложениях. NPM также имеет скрипт init, который используется для инициализации файла package.json, и этот список можно продолжить.
В следующем разделе я расскажу о некоторых преимуществах использования Task runners в вашем следующем проекте. Это вдохновит вас включить средство запуска задач в ваши будущие проекты или добавить его в уже существующие проекты.
Преимущества использования таск-раннеров
В этом разделе мы рассмотрим преимущества использования средств запуска задач в вашем приложении. И ниже приведены некоторые из них:
Автоматизируйте задачи веб-разработки
Первое преимущество использования средств запуска задач заключается в том, что они автоматизируют задачи и процессы, связанные с веб-разработкой. с помощью средств запуска задач разработчикам не придется беспокоиться о выполнении команд, которые будут включать утомительные процессы, поскольку эти инструменты способны выполнять их за вас.
Например, при создании проектов веб-приложений разработчикам может потребоваться вручную компилировать коды SASS в код CSS, а также минимизировать коды CSS каждый раз, когда в кодовой базе проекта происходят изменения. Но если вы используете средства запуска задач, вы можете предотвратить эти утомительные и трудоемкие задачи, используя средства запуска задач для автоматического запуска определенных задач всякий раз, когда вы вносите изменения в свою кодовую базу.
Обеспечьте более быстрый процесс веб-разработки
Использование средств запуска задач для автоматического запуска задач веб-разработки важно для того, чтобы процессы веб-разработки не занимали много времени и в конечном итоге стоили больших денег.
Поскольку вам не нужно выполнять большинство дополнительных сложных задач веб-разработки, вы получаете дополнительную скорость. Кроме того, вы можете предотвратить многократное повторение определенных видов задач. Таким образом, вы можете сосредоточиться на менее утомительных и менее повторяющихся задачах.
Большинство Task Runner просты в использовании и понимании
Использовать большинство средств запуска задач, таких как Gulp, довольно просто, потому что они используют JavaScript — популярный язык веб-разработки.
Таким образом, даже если вы раньше не использовали средства запуска задач, вы можете быстро научиться использовать эти инструменты. А также вы можете понять существующие проекты, которые их используют.
Минификация и конкатенация
Хотя процесс минификации и конкатенации может показаться большинству разработчиков простой задачей, простая ошибка в этих задачах может привести к поломке вашего проекта. А это может привести к потере времени, а может быть и к потере денег.
Но использование таск-раннеров гарантирует решение большей части этой проблемы за счет автоматического запуска задач, связанных с минификацией и конкатенацией кодов проектов.
Простые в использовании плагины
У некоторых хороших исполнителей задач также есть простые в использовании плагины, которые можно реализовать для ускорения и облегчения выполнения задач.
Возможно, вам не придется беспокоиться о том, как использовать эти плагины, поскольку большинство из них довольно удобны для пользователя и могут быть легко применены к вашему проекту веб-приложения.
Итак, это основные преимущества использования таск-раннеров. Но нам еще предстоит поближе познакомиться с некоторыми хорошими примерами средств запуска задач, которые у нас есть, и, как я упоминал ранее, у нас есть отличные инструменты для выполнения задач, такие как Gulp, Webpack, Rollup и даже Grunt.
В следующем разделе я расскажу об инструменте запуска задач Gulp и покажу, как вы можете использовать его в своих проектах. Итак, давайте начнем с изучения Gulp, а затем завершим его быстрой демонстрацией.
Что такое глоток
Gulp — это инструмент JavaScript с открытым исходным кодом, используемый разработчиками для автоматизации задач веб-разработки. Таким образом, простыми словами, вы можете сказать, что Gulp — это средство для выполнения задач.
В качестве инструмента для выполнения задач Gulp использует Nodejs в качестве своей платформы. Поэтому, чтобы использовать Gulp, вам нужно загрузить Nodejs на свой компьютер и выполнить необходимые процедуры установки для его установки.
С помощью Gulp вы можете автоматически выполнять процессы минимизации файлов CSS, HTML и JavaScript или автоматически преобразовывать файлы SCSS в файлы CSS, настроив задачи Gulp.
В следующем разделе мы рассмотрим пример, объясняющий, как работает Gulp и как вы можете использовать его в своем проекте или реализовать в своих старых проектах.
Как использовать глоток
В предыдущем разделе я объяснил, что такое инструмент Gulp и для чего он используется. Теперь в этом разделе мы подробно рассмотрим пример, объясняющий использование инструмента Gulp. Мы будем использовать Gulp для компиляции кода SASS в код CSS.
Использование SASS вместо стандартного CSS позволяет разработчикам внешнего интерфейса получить доступ ко многим замечательным функциям, таким как написание более чистого кода с меньшим количеством CSS и т. д.
Но большинство браузеров не поддерживают коды SASS, поэтому, чтобы использовать код SASS, вам сначала нужно скомпилировать свой код в файл CSS, чтобы браузер мог прочитать и применить вашу таблицу стилей к вашим веб-страницам.
В этом разделе давайте посмотрим, как Gulp может помочь нам скомпилировать наши коды SASS в файл CSS, а затем применить наши стили к нашей веб-странице.
Как я упоминал ранее, вам нужно иметь Nodejs на вашем компьютере, потому что мы будем использовать NPM — диспетчер пакетов узлов, который устанавливается вместе с Nodejs.
Поэтому, если на вашем компьютере нет Nodejs, посетите официальный сайт Node Js здесь и загрузите последнюю стабильную версию. После этого откройте файл Nodejs и запустите необходимые процессы установки.
Чтобы проверить, правильно ли вы установили Nodejs в своей системе, выполните следующую команду:
node -v
Приведенная выше команда предоставит вам версию Nodejs, установленную на вашем компьютере. Но если на вашем компьютере нет Nodejs, вы получите сообщение об ошибке.
После установки Nodejs на свой компьютер установите интерфейс командной строки Gulp.
Обратите внимание: для нас важно установить пакеты Gulp, а также запустить задачи Gulp. Итак, чтобы установить Gulp CLI, выполните следующую команду:
npm install — global gulp-cli
Вы можете проверить, правильно ли вы установили gulp-cli, выполнив следующую команду:
gulp — version
Эта команда распечатает версию gulp-cli, установленную на вашем компьютере, но для локальной версии Gulp она напечатает unknown. И это потому, что мы еще не установили это.
Следующим шагом будет создание папки для нашего проекта, а затем добавление файлов HTML и SASS.
Итак, создайте папку проекта с помощью команды ниже:
mkdir Gulp-tutorial
Папку моего проекта я решил назвать Gulp-tutorial, но вы можете называть ее как угодно.
Теперь перейдите в папку проекта с помощью команды ниже:
cd Gulp-tutorial
Внутри каталога папки проекта вы должны создать файл package.json, этот файл будет содержать все детали нашего проекта и все пакеты, которые мы собираемся установить. Чтобы создать этот файл, выполните команду ниже:
npm init
И вам будут заданы некоторые вопросы, такие как версия проекта, название проекта, описание проекта и т. д. Вы можете пропустить и оставить все по умолчанию, нажав кнопку ввода.
Теперь у вас есть файл package.json, вы можете открыть папку проекта в любом редакторе кода по вашему выбору, запустив:
code .
Вы должны увидеть файл package.json как единственный существующий файл. Теперь давайте добавим несколько файлов HTML и SASS. Поэтому создайте еще один файл в корне папки вашего проекта и назовите его index.html. Но вы можете называть это как угодно.
Этот файл будет содержать HTML для нашего проекта, и я связываю его с файлом CSS — для стилизации с помощью тега link.
Поэтому добавьте приведенный ниже код в свой файл index.html:
Далее нам нужно добавить стили для нашего проекта. Создайте папку с именем Sass и создайте в ней файл с расширением .scss. Теперь добавьте следующий код в файл .scss:.
Идите вперед и сохраните файл. Откройте приложение в браузере. Вы должны увидеть, что ваш стиль не работает. Таким образом, они не применялись.
И это потому, что SASS не распознается браузером. Таким образом, чтобы использовать коды SASS в своих проектах, вам сначала нужно скомпилировать их в коды CSS, и именно здесь вступает в дело использование Gulp.
Теперь давайте установим Gulp как dev-зависимость в нашем приложении. В терминале перейдите в каталог папки проекта, если вас там больше нет, и выполните команду ниже:
npm install — save-dev gulp
Чтобы убедиться, что у вас установлен Gulp, выполните следующую команду
gulp --version
На этот раз вы должны увидеть как версию gulp-cli, так и локальную версию самого Gulp.
В качестве альтернативы вы можете зайти в файл package.json и проверить в файле devDependencies. И вы увидите установленную версию Gulp.
Для нашего примера нам нужен пакет gulp-sass из npm. И чтобы установить этот пакет, выполните команду ниже:
npm install sass gulp-sass — save-dev
Обратите внимание, что в этом руководстве рассматриваются коды, применимые к версии 5 gulp-sass и версии 4.0.2 gulp.
Начиная с версии 5 пакета gulp-sass, для использования gulp-sass необходимо установить компилятор sass. Итак, приведенная выше команда поможет вам установить gulp-sass и компилятор sass.
Следующим шагом, который вам необходимо сделать, является создание файла gulpfile.js. И именно сюда будут добавлены все задачи, которые мы хотим запустить.
Кроме того, обратите внимание, что вы должны использовать то же имя для этого файла, потому что в противном случае Gulp не сможет найти ваш gulpfile, и это приведет к ошибкам при выполнении команд Gulp на терминале.
В файл gulpfile.js добавьте следующий код для импорта Gulp, добавьте компилятор sass, а затем добавьте свою задачу.
В строке 1 мы потребовали Gulp в нашем проекте и передали его в переменную с именем Gulp. Затем в строке 2 нам потребовался пакет gulp-sass, который мы установили с помощью NPM. Наконец, мы импортировали наш компилятор sass.
Со строк с 5 по 9 мы создали нашу задачу. В строке 5 мы создали задачу с именем sass, а в строке 6 мы попросили Gulp взять коды из нашего файла sass, который находится в папке sass. Обратите внимание, что в приведенном выше коде я использовал *, за которым следует .scss. Это просто говорит Gulp следить за каждым файлом в папке sass с расширением .scss. Вы также можете быть очень конкретным, удалив * и заменив его именем файла, который вы хотите, например, style1.scss.
Теперь в строке 7 мы просто хотим вывести из системы любую ошибку, которая может возникнуть в процессе выполнения нашей команды.
Наконец, в строке 8 мы попросили Gulp скомпилировать наши коды sass и сохранить их в файле .css внутри папки CSS, которую мы не будем создавать. Но Gulp поможет нам создать их автоматически.
Теперь сохраните файл и запустите
gulp sass
В интерфейсе командной строки вы должны увидеть такой вывод:
Если вы посмотрите на структуру папок в редакторе кода, вы должны увидеть папку CSS с двумя файлами CSS: style1.css и style2.css, как показано ниже:
Теперь я хочу, чтобы вы кое-что заметили: если вы снова откроете приложение в браузере, вы должны увидеть, что все ваши стили были применены. Отлично, вот как Gulp и другие средства запуска задач помогают нам автоматически запускать задачи веб-разработки, делая нашу работу как веб-разработчиков легкой и быстрой.
Заключение
Веб-разработка включает в себя сочетание трудоемких важных задач, которые могут разрушить весь проект, если они будут выполнены неправильно.
Исполнители задач как инструменты веб-разработки были введены с единственной целью сделать работу по выполнению задач веб-разработки более гладкой и немного менее сложной.
Современные сборщики веб-приложений, такие как Webpack, также можно настроить для автоматического запуска задач веб-разработки с использованием сценариев NPM.
В этой статье я рассказал о том, что такое таск-раннер, и о различных типах таск-раннеров. Затем я рассказал, что такое Gulp и для чего его можно использовать, а также подробно остановился на примере, показывающем, как веб-разработчик может использовать Gulp в своем следующем проекте, где мы использовали инструмент Gulp для компиляции SASS. файл в файл CSS для стилизации нашей веб-страницы.
Средства запуска задач, такие как Gulp, значительно упрощают программному обеспечению создание эффективного и высокопроизводительного кода. И поскольку нам всем нравится применять новые технологии и обновлять наш код, поэтому, даже если мы чувствуем, что все протестировали перед выпуском, всегда необходимо убедиться, что наши пользователи хорошо работают с нашим продуктом.
Такое решение, как SessionStack, позволяет нам отвечать на запросы клиентов в виде видеороликов, показывающих, как наши клиенты на самом деле работают с нашим продуктом. Мы можем быстро определить, соответствует ли наш продукт их ожиданиям или нет. Если мы видим, что что-то не так, мы можем изучить все технические детали из браузера пользователя, такие как сеть, отладочная информация и все, что касается их среды, чтобы мы могли легко понять проблему и решить ее. Мы можем совместно просматривать страницы с пользователями, сегментировать их на основе их поведения, анализировать пути пользователей и открывать новые возможности для роста наших приложений.
Существует бесплатная пробная версия, если вы хотите попробовать SessionStack.
Хотите узнать больше о JavaScript? Ознакомьтесь со всеми публикациями Как работает JavaScript здесь».
