Привет, дорогие подписчики TELEGRAM канала WEBONELOVE и просто юзеры пикабу.
В данной статье я бы хотел рассказать вам о технологии gulp, которая наверняка облегчит жизнь даже самого матёрого веб-разработчика.
Внимание! Автор постау предусматривает, что вы знаете хотя бы азы языка программирования JavaScript.
Погнали!
1. Давайте узнаем, что это такое.
Gulp - инструмент для выполнения рутинных задач, таких как, компиляция scss/sass, минификация файлов, сжатие изображений и многое другое.
Изначально был создан как замена grunt.
Написан gulp на языке JavaScript с использованием библиотеки node.js.
2. Зачем он нужен?
Данный инструмент способен на очень многое, от автопрефиксинга до изменения имён файлов.
Вы можете комбинировать несколько действий вместе, например:
Вы написали код на том же sass/scss, далее вам надо его скомпилировать, после расставить вендорные префиксы, затем минимизировать и в в конце выгрузить данный файл в нужный каталог. И всё это после банального сохранения файла.
Понравилось? Хочешь также? Тогда предлагаю перейти к следующему пункту.
3. Настройка рабочей среды.
Для установки gulp мы будем использовать пакетный менеджер npm. Чтобы данная штука появилась на вашем компьютере, нам нужно скачать node.js.
Для этого переходим на данный сайт: https://nodejs.org/en/
И скачиваем LTS версию. Если вы пользователь windows, то открываем его как обычный exe'шник. Там установщик сам всё расскажет.
Если вы владелец машины под управлением linux, а в частности ubuntu 18.04, то открываем терминал и выполняем следующие комманды в указанной последовательности:
1. sudo apt update - для обновление списка доступных пакетов.
2. sudo apt install nodejs - устанавливаем node js
3. sudo apt install npm - устанавливаем тот самый npm.
После этого установка node.js закончена, приступим к настройке проекта.
Давайте создадим директорию и как-нибудь назовём её (желательно без прописных букв).
Отлично, теперь давайте перейдём в эту папку. Теперь, в данной папке нужно открыть окно комманд. На windows это shift + ПКМ и в появившимся контекстном меню надо выбрать пункт "Открыть окно комманд", а на linux это просто клик правой кнопкой либо по иконке папки, либо уже в самом nautilus'e, после чего, выберете пункт "открыть в терминале".
Теперь давайте выполним комманду npm init, чтобы потом создавать различные зависимости.
Сейчас вас будут спрашивать, как вы хотите назвать проект (прописные буквы не поддерживаются), какая версия и т.д.. Сейчас нам это не важно, поэтому на все его вопросы отвечайте Enter'oм. В самом конце он спросит вас: "is this ok?", то есть "Всё верно?"
На что тоже жмем Enter.
Теперь, как вы могли заметить, в нашей папке появился файл "package.json", в котором мы будем хранить различные зависимости.
Отлично, самая скучная часть сделана, теперь приступим к установке самого gulp.
Для этого мы выполним вот такую комманду: npm i gulp (windows), sudo npm i gulp (mac, linux)
После этого немного ждём и та-да-мс! Gulp установлен!
4. Начало работы.
Чтобы начать работать с gulp, в корне папки надо создать файл с названием gulpfile.js, причём обязательно с таким названием, так как этого требует сам gulp.
Теперь можно открыть эту папку в любом текстовом редакторе. Я предпочитаю sublime text 3.
Чтобы работать с gulp, мы должны как-то обращаться к нему. Это делается через переменную.
Давайте создадим переменную с именем gulp (название может быть любое, но ведь gulp - логичнее) и присвоим ей вот такую функцию: require('gulp').
Почему require и почему gulp? -- require - стандартная функция node js, которая сообщает, что мы хотим подключить какой-то модуль. А вот про gulp расскажу по подробнее. Ты наверняка уже увидел папку "node_modules", которая появилась после установки gulp. И если в ней покопаться, то можно найти тот самый gulp.
Его то мы и подключаем. Кстати все эти файлы связаны с gulp'om и нужны для его работы, поэтому удалять ничего не надо.
Но блин, почему просто gulp, а не node_modules/gulp, скажете вы, а вот ответа я и сам не знаю)
И по этому поводу даже не парюсь.
Отлично, на данный момент у нас с вами вот такой код:
Теперь предлагаю перейти к следующему пункту.
5. Базовый синтаксис.
Концепция gulp'a состоит на том, чтобы выполнять за вас рутинные задачи, а эти самые задачи описываются в так называемых тасках. чтобы добавить таск, нам нужно обратиться к ранее созданной переменной gulp и взять у неё метод task().
В итоге у нас получается вот такой вот код: gulp.task().
А что дальше? А вот что, в эту функцию нужно передавать параметры.
Первым параметром будет имя функции, его надо писать в кавычках. Далее идёт тот код, который будет выполнен во время вызова данного таска.
Теперь наш код выглядит так: gulp.task('name', function(){
// а вот тут будет код, который выполнится при вызове таска
});
Давайте попробуем написать тут какой-нибудь код. Например так:
