Gulp - начало работы
Всем привет, недавно изучил такую технологию как gulp, но у меня возникли некоторые сложности из-за незнания того, что вышла 4 версия. В этом посте я хотел рассказать, как работать с gulp и что поменялось в четвёртой версии.
Важно! Для нормальной работы вас должны быть хоть какие-то знания языка JavaScript!
Также, у вас должен быть установлен node js.
Начало работы:
Я думаю что вы все уже знаете что такое gulp, поэтому начинать с предыстории я не буду.
Ну что же, для начала давайте создадим папку с любым названием. Я например, из-за отсутствия фантазии назвал её pikabupost.
Отлично, теперь откроем коммандную строку в этой же папке (shift + ПКМ и выберете пункт "Открыть окно комманд"). Если вы умеете работать с ней, то + вам, если нет, то я думаю ничего страшного. После чего выполняем комманду "npm init", позже я расскажу зачем.
Если в названии папки у вас нет прописных символов, то можно смело жать Enter пока не кончатся вопросы. В самом конце вас спросят "is this ok?", то есть "Все правильно?"
Тут тоже смело жмём Enter.
Отлично, теперь по поводу этого файлика можно не париться.
Ну, а теперь давайте установим сам gulp!
Для этого выполним комманду npm i gulp --save-dev
Где npm - node package manager (появится после установки node js), i - install, gulp - имя желаемого пакета, а вот про флаг --save-dev, я расскажу после установки самого пакета.
Примечание: если вы пользуетесь Mac или linux, то советую написать sudo в самое начало комманды, чтобы всё установилось без ошибок.
Жмём Enter и ждём.
Поздравляю, gulp установлен! Теперь открываем ваш любимый текстовый редактор и в корне папки создаём файл gulpfile.js (обязательно с таким именем, так как этого требует сам gulp).
Вы уже наверняка заметили, что в проекте появилась папка node_modules, с огромной кучей файлов. Среди них есть и gulp, который мы и будем подключать.
Кстати, я обещал рассказать про флаг --save-dev. Данный флаг добавляет информацию о скачанном пакете в файл package.json
Для чего это надо, я тоже расскажу потом)
И так, давайте займёмся gulp'ом.
В уже ранее созданном файле gulpfile.js добавим переменную gulp, в принципе, у переменной может быть любое название, но gulp как-то логичнее.
Этой переменной мы присваиваем require('gulp').
Возникает 2 вопроса: что такое require и почему просто gulp, а не node_modules/gulp.
require - стандартная функция nodejs, с помощью неё мы можем подключать различные модули себе в проект.
А просто gulp потому... Да я и сам не знаю почему, по этому я просто забил на эту хрень!
Отлично! Теперь давайте создадим task. Task - это небольшое, а может быть большое действие, которое будет выполнять gulp. Для прошаренных это просто функция, которая выполняется когда мы её вызовем.
Синтаксис такой: gulp.task("Имя таска", function() {
код.которыйБудет.выполняться();
});
Где gulp - имя переменной, к которой мы подключали gulp, объект, а task - функция данного объекта, в которой указывается имя таска и код, который выполнится при вызове.
Давайте напишем такой код:
Для особо ленивых я вставил его сюда.
gulp.task('jopa', function () {
console.log('Hello, world');
});
Теперь заходим в терминал и находясь в данной папке пишем gulp jopa
Где jopa - имя таска, который мы хотим выполнить.
Поздравляю, таск выполнен!
Вот и вся задумка gulp'a. Разумеется, это не весь его функционал. Ведь он раскрывается в устанавливаемых пакетах.
А вот о них мы поговорим в следующем посту. Там мы рассмотрим каждую строчку, которую gulp выводит в терминал, рассмотрим каждую функцию gulp'a.
Поэтому сейчас я прощаюсь с вами, но не на долго, так как после прогулки я напишу следующий пост про gulp.
Псс... ты ещё не ушёл? Тогда подпишись на мой телеграмм канал)