Основы Gulp

React 1
Bitrix 3
Dev 1
Webpack 2
WWW 3
SEO 4
Материалы 2
Ubuntu 7
Linux 19
Git 7
Windows 13
Docker 3
VSCode 6
MySQL / БД 10
JS 10
HTML 9
CSS 23
WordPress 5
Centos 14
Серверы 16
PHP 5
TYPO3 24
И т.п. 1

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

Gulp — один из самых популярных инструментов сборки в наши дни — наряду с Webpack.

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

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

В этом руководстве вы познакомитесь с основами npm (менеджер пакетов узлов) и настроите Gulp для своих интерфейсных проектов. Когда вы закончите, вы почувствуете себя намного увереннее, настроив свой рабочий процесс и используя командную строку!

Так что же такого особенного в Gulp?

Gulp значительно экономит время. Используя Gulp, вы можете позволить своему компьютеру выполнять утомительные задачи, такие как:

Компиляция файлов Sass в CSS
Объединение (объединение) нескольких файлов JavaScript
Минимизация (сжатие) файлов CSS и JavaScript
И автоматический запуск вышеуказанных задач при обнаружении изменения файла

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

Краткое описание того, что мы будем делать

Вот шаги, которые будет проходить это руководство:

Установите Node.js и npm на свой компьютер.
Установите Gulp и другие пакеты, необходимые для вашего проекта.
Настройте файл gulpfile.js для запуска нужных вам задач.
Пусть ваш компьютер сделает вашу работу за вас!

Не беспокойтесь, если вы не совсем понимаете все приведенные выше термины. Я объясню все шаг за шагом.

Теперь давайте начнем!

Настройте свою среду

Node.js

Чтобы запустить Gulp на вашем компьютере, вам необходимо установить Node.js в локальной среде.

Node.js называют «средой выполнения JavaScript», которая считается серверной частью JavaScript. Gulp работает с использованием Node, поэтому, по понятным причинам, вам необходимо установить Node перед началом работы.

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

Что такое npm, спросите вы?

Npm (менеджер пакетов узлов)

Npm — это постоянно обновляемая коллекция подключаемых модулей JavaScript (называемых пакетами), написанных разработчиками со всего мира. Gulp — один из таких плагинов. Вам также понадобятся еще несколько, о которых мы поговорим позже.

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

Вот основной синтаксис для установки пакета:

npm install [Package Name]

Примечание для пользователей Mac:
в зависимости от ваших настроек вам может потребоваться добавить ключевое слово «sudo» в начале, чтобы запустить это с правами root.

Итак, для Mac это будет выглядеть так: sudo npm install [Package Name]

Кажется довольно простым, не так ли?

Папка node_modules

Следует отметить одну вещь: когда вы устанавливаете пакет npm, npm создает папку с именем node_modules и сохраняет в ней все файлы пакета.

Если у вас когда-либо был проект с папкой node_modules, и вы осмелились посмотреть, что в ней содержится, вы, вероятно, заметили, что в ней много (я имею в виду МНОГО) вложенных папок и файлов.

Почему это происходит?

Ну, это потому, что пакеты npm, как правило, полагаются на другие пакеты npm для выполнения своей конкретной функции. Эти другие пакеты известны как зависимости.

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

Поэтому, когда вы устанавливаете плагин в свою папку node_modules, этот плагин затем устанавливает дополнительные пакеты, которые ему нужны, в свою собственную папку node_modules.

И так далее и тому подобное, пока у вас не появятся вложенные папки.

На данный момент вам не нужно слишком беспокоиться о возне с папкой node_modules — просто хотелось кратко объяснить, что происходит в этой сумасшедшей папке.

Отслеживание пакетов с помощью package.json

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

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

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

Как ему это удается?

Npm использует файл с именем package.json, чтобы отслеживать, какие пакеты и какие версии пакетов вы установили. Он также хранит другую информацию о проекте, такую как его имя, автор и репозиторий Git.

Создание вашего package.json

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

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

Затем введите следующую команду:
npm init

Затем Npm предложит вам ввести информацию о проекте. Для большинства параметров вы можете нажать Enter и использовать значение по умолчанию, указанное в скобках.

Когда вы закончите, npm сгенерирует файл package.json в папке вашего проекта! Если вы откроете его в своем редакторе, вы должны увидеть что-то вроде этого:

{
  "name": "super-simple-gulp-file",
  "version": "1.0.0",
  "description": "Super simple Gulp file",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/thecodercoder/Super-Simple-Gulp-File.git"
  },
  "keywords": [
    "gulp"
  ],
  "author": "Jessica @thecodercoder",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/thecodercoder/Super-Simple-Gulp-File/issues"
  },
  "homepage": "https://github.com/thecodercoder/Super-Simple-Gulp-File#readme"
}

Конечно, для вашего проекта у вас будет собственное имя и информация, а не то, что есть здесь у меня.

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

Теперь то, что вы поместите в свой файл package.json, — это список всех пакетов, которые вам нужны для запуска Gulp.

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

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

В предыдущем разделе выше мы говорили о вводе: npm install [Package Name]в командную строку, чтобы загрузить и установить пакет в папку node_modules.

Он установит пакет и автоматически сохранит его в файле package.json в качестве зависимости.

Примечание. До версии npm 5.0.0 вам нужно было добавить флаг «-save», чтобы npm добавил пакет в качестве зависимости. Вам больше не нужно делать это с версиями 5 и выше.

Итак, если мы хотим установить Gulp в наши пакеты, мы должны ввести: npm install gulp.

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

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

"dependencies": { "gulp": "^3.9.1" }

Этот список зависимостей будет расти по мере установки дополнительных пакетов npm.

Другие пакеты, необходимые для Gulp

Изначально мы хотели использовать Gulp для выполнения таких задач, как компиляция файлов SCSS/CSS и JavaScript. Для этого мы будем использовать следующие пакеты:

gulp-sass — компилирует ваши файлы Sass в CSS
gulp-cssnano — минимизирует файлы CSS.
gulp-concat — объединяет (объединяет) несколько файлов JavaScript в один большой файл.
gulp-uglify — минимизирует файлы JavaScript.

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

npm install gulp-sass
npm install gulp-cssnano
npm install gulp-concat
npm install gulp-uglify

Gulp-cli против глобального Gulp

В прошлом, чтобы иметь возможность запускать «gulp» из командной строки, вам нужно было установить Gulp глобально на локальном компьютере с помощью команды:

npm install –global gulp

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

Текущий консенсус рекомендует установить другой пакет Gulp-cli глобально вместо самого Gulp.

Это позволит вам по-прежнему запускать команду «gulp», но вы сможете использовать разные версии Gulp в разных проектах.

Вот код для этого:

npm install --global gulp-cli

Если вам интересно, вы можете прочитать больше контекста в этой ветке Treehouse .

Хорошо, когда все ваши пакеты установлены, у вас есть все необходимые инструменты. Давайте перейдем к настройке файлов нашего проекта!

Настройте свою файловую структуру

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

Этот базовый метод поможет вам понять основные функции всех движущихся частей. Затем вы можете построить или изменить настройку по своему вкусу в будущем!

Вот как будет выглядеть дерево проекта:

Корневая папка проекта

index.html
gulpfile.js
пакет.json
node_modules (папка)
приложение (папка)
script.js
стиль.scss
дист (папка)

Мы уже рассмотрели файл package.json и папку node_modules. А файл index.html будет, конечно же, вашим основным файлом сайта.

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

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

Папки приложений и дистрибутивов

В папке приложения у нас есть ваш основной файл JavaScript (script.js) и ваш основной файл SCSS (style.scss). В этих файлах вы будете писать весь свой код JavaScript и CSS.

Папка dist существует только для хранения окончательно скомпилированных файлов JavaScript и CSS после их обработки Gulp. Вы не должны вносить никаких изменений в файлы dist, только в файлы приложения. Но эти файлы в dist будут загружены в index.html, так как мы хотим использовать скомпилированные файлы на веб-сайте.

Опять же, существует множество способов настроить файлы и папки проекта. Главное помнить, что ваша структура имеет смысл и позволяет вам работать максимально эффективно.

Теперь давайте перейдем к сути этого руководства: настройка Gulp!

Создайте и настройте свой Gulpfile

Gulpfile содержит код для загрузки установленных пакетов и запуска различных функций. Код выполняет две основные функции:

Инициализируйте установленные пакеты как модули Node.
Создавайте и запускайте задачи Gulp.

Инициализировать пакеты

Чтобы воспользоваться всеми функциями пакетов npm, которые вы добавили в свой проект, вам необходимо экспортировать их как модули в Node — отсюда и название папки «node_modules».

В верхней части вашего Gulpfile добавьте такие модули:

var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

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

Если вы хотите узнать больше о пакетах npm и модулях Node, на сайте npm есть отличное объяснение здесь .

Создавайте свои задачи Gulp

Создание задачи Gulp выполняется с помощью следующего кода:

gulp.task('[Function Name]', function(){
   // Do stuff here
}

Это позволяет вам запускать задачу Gulp, введя в gulp [Function Name]командную строку. Это важно, потому что вы можете запускать эту именованную функцию из других задач Gulp.

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

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

.task()— Создает задачу, как указано выше
.src()— определяет, какие файлы вы будете компилировать в конкретной задаче
.pipe()— добавляет функцию в поток Node, который использует Gulp; вы можете передать несколько функций в одной задаче (прочитайте отличную статью на эту тему на florian.ec )
.dest()— записывает полученный файл в указанное место
.watch()— идентифицирует файлы для обнаружения любых изменений

Если вам интересно, вы можете прочитать больше о документации Gulp здесь .

Все готово? Теперь давайте приступим к делу (включите музыку Мулан) и напишите эти задачи!

Это следующие задачи, которые мы хотим, чтобы Gulp запускал:

Задача Sass для компиляции SCSS в файл CSS и минимизации
Задача JavaScript для объединения файлов JavaScript и минимизации/увеличения
Наблюдайте за задачей, чтобы определить, когда файлы SCSS или JavaScript были изменены, и повторно запустите задачи.
Задача по умолчанию для запуска всех необходимых задач при вводе gulpв командную строку.

Sass задача

Для задачи Sass сначала мы хотим создать задачу в Gulp, используя task(), и назовем ее «sass».

Затем мы добавляем в каждый компонент, что задача будет выполняться. Сначала мы укажем, что источником будет файл app/scss/style.scss, используя расширение src(). Затем мы добавим дополнительные функции.

Первый запускает sass()функцию — используя модуль gulp-sass, который мы назвали «sass» в верхней части Gulpfile. Он автоматически сохранит файл CSS с тем же именем, что и файл SCSS, поэтому наш файл будет называться style.css.

Второй минимизирует файл CSS с расширением cssnano(). И последний помещает полученный файл CSS в папку dist/css.

Вот код всего этого:

gulp.task('sass', function(){
    return gulp.src('app/style.scss')
        .pipe(sass())
        .pipe(cssnano())
        .pipe(gulp.dest('dist/css'));
});

Для проверки я просто добавил какой-то заполнитель SCSS в файл style.scss:

div {
    display: block;
   	&.content {
        position: relative;
    }
}
.red {
    color: red;
}

Вы можете запустить каждую отдельную задачу Gulp в командной строке, если вы наберете gulpимя задачи. Итак, чтобы протестировать задачу Sass, я набрал, gulp sassчтобы проверить, работает ли она без ошибок, и сгенерировал уменьшенный файл dist/style.css.

Если все работает правильно, вы должны увидеть сообщение в командной строке, подобное этому:

[15:04:53] Starting 'sass'... [15:04:53] Finished 'sass' after 121 ms

Проверка в папке dist показывает, что файл style.css действительно существует, и при его открытии отображается корректно минифицированный CSS:

div{display:block}div.content{position:relative}.red{color:red}

Хорошо, наша задача Sass выполнена. На JavaScript!

JS задача

Задача JS Gulp похожа на задачу Sass, но имеет несколько отличных элементов.

Сначала мы создадим задачу и назовем ее «js», затем определим исходные файлы. В этой src()функции вы можете идентифицировать несколько файлов несколькими способами.

Один из них — использовать подстановочный знак (*), чтобы указать Gulp использовать все файлы с таким *.jsрасширением:

gulp.src('app/*.js')

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

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

Функция src()может принимать массив значений в качестве параметра, используя квадратные скобки следующим образом:

gulp.src(['app/script.js', 'app/script2.js'])

Если у вас много файлов JavaScript, вы можете сначала загрузить зависимости, сохранив их в отдельной подпапке, например, «app/js/plugins». Затем сохраните другие файлы JavaScript в родительской папке «app/js».

Затем вы можете использовать нотацию с подстановочными знаками для загрузки всех скриптов lib (библиотеки), за которыми следуют обычные скрипты:

gulp.src(['app/js/lib/*.js', 'app/js/script/*.js'])

Ваш подход будет зависеть от количества и типов файлов JavaScript, которые у вас есть.

После того, как вы установили свои исходные файлы, вы добавите оставшиеся функции. Первый — объединить файлы в один большой файл JavaScript. Функция concat()требует один параметр с именем результирующего файла.

Затем вы исправите файл JavaScript и сохраните его в целевом месте.

Вот полный код задачи JS:

gulp.task('js', function(){
    return gulp.src(['app/js/plugins/*.js', 'app/js/*.js'])
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
});

Как и в случае с задачей Sass, вы можете проверить, работает ли задача JS, введя в gulp jsкомандную строку.

[14:38:31] Starting 'js'... [14:38:31] Finished 'js' after 36 ms

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

Смотреть задачу

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

Мы создадим две функции наблюдения: одну для просмотра файлов SCSS, а другую для просмотра файлов JavaScript.

Функция watch()принимает два параметра: исходное расположение, а затем задачи, которые нужно запустить при обнаружении изменения.

Функция Sass Watch будет отслеживать любые файлы SCSS в папке приложения, а затем запускать задачу Sass, если обнаружит изменения.

Функция будет выглядеть так:

gulp.watch('app/*.scss', ['sass']);

Для функции JS Watch нам придется воспользоваться действительно полезной функцией Node, которая называется «подстановка». Подстановка означает использование символов «**» в качестве своего рода подстановочного знака для папок и подпапок. Нам это нужно для файлов JavaScript, потому что у нас есть файл JavaScript в папке app/js и файл JavaScript в папке app/js/plugins.

И вот как будет выглядеть эта функция:

gulp.watch('app/js/**/*.js', ['js']);

Принцип работы glob («**») заключается в том, что он будет искать файлы JavaScript в любом месте папки app/js. Он будет выглядеть либо непосредственно в папке, либо в любых последующих дочерних папках, таких как папка плагинов. Подстановка удобна, так как вам не нужно назначать каждую подпапку в качестве отдельного источника в watch()функции.

Вот полная задача Watch:

gulp.task('watch', function(){
	gulp.watch('app/*.scss', ['sass']);
    gulp.watch('app/js/**/*.js', ['js']);
});

Теперь мы почти закончили! Последняя задача, которую нужно создать, — это задача Gulp по умолчанию.

Задача Gulp по умолчанию

Задача Gulp по умолчанию — это то, что вы хотите запустить, просто набрав в gulpкомандной строке. Когда вы создаете задачу, вы должны назвать ее «по умолчанию», чтобы Gulp понял, что это то, что вы хотите запустить.

Что мы хотели бы сделать, так это запустить задачи Sass и JS один раз, а затем запустить задачу Watch для повторного запуска задач при изменении файлов.

gulp.task('default', ['sass', 'js', 'watch']);

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

Вы можете создавать отдельные задачи Gulp для минимизации файлов CSS и JavaScript, которые называются «minifyCSS» и «minifyJS». Тогда вы не будете добавлять эти задачи в свою задачу Gulp по умолчанию, но вы можете создать новую задачу Gulp под названием «prod», в которой есть все, что есть в задаче по умолчанию, а также есть ваши минимизирующие задачи.

Ссылки в вашем index.html

После того, как ваш процесс Gulp заработает, убедитесь, что ваш файл index.html ссылается на все правильные файлы CSS и JavaScript.

Для примеров, которые я дал вам здесь, вы захотите добавить ссылку на CSS dist/style.cssв свой <head>:

<link rel="stylesheet" href="dist/style.css">

И добавьте ссылку на тег скрипта dist/all.jsв свой <body>:

<script src="dist/all.js"><;/script>

В заключение

Поздравляю с завершением! Я надеюсь, что вы нашли этот базовый учебник по Gulp полезным.

Как я уже упоминал в начале, это просто очень простое руководство по основам npm и Gulp.

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

Наконец, вы можете проверить весь код из этого руководства в моей учетной записи GitHub здесь .

Я надеюсь, что вы нашли этот пост полезным! Дайте мне знать любые ваши мысли в комментариях ниже.