< Заур Магомедов />

профессиональный верстальщик и блоггер

Мое хобби - разработка сайтов, но со временем это переросло в постоянный и стабильный источник дохода.

Заур Магомедов
Главная » Программы и сервисы » Gulp с нуля — руководство для начинающих веб-разработчиков

Gulp с нуля — руководство для начинающих веб-разработчиков

Gulp с нуля — руководство для начинающих веб-разработчиков

Приветствую вас дорогой посетитель! Данную статью я хочу посвятить очень интересной и важной теме – фронтенд-разработка при помощи пакета Gulp. Скорее всего многие из вас уже слышали о нем, даже если не слышали, то скорее всего видели его файлы проекта. Сегодня большинство расширений (плагины jQuery, различные фреймворки и т.д.) ведут именно при помощи подобных пакетов. На подобии Gulp есть и другие пакеты, например, GruntJs – это “брат-близнец” Gulp и работает по той же аналогии. Например, на GruntJs создана сборка Twitter Bootstrap. Я сам начинал изучение именно с Grunt. 

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

Что такое Gulp, чем он хорош и нужен ли он простому верстальщику?

Так что же такое Gulp?

Gulp – это инструмент фронтенд-разработчика, который автоматизирует большинство рутинных задач. 

Gulp позволяет решать такие задачи, как:

  • использование различных JS, CSS, HTML препроцессоров для ускорения верстки (CoffeeScript, SASS, LESS, Stylus, Pug (Jade) и др.);
  • объединение файлов в один – js, css, html;
  • минимизация кода файлов – js, css, html;
  • создание локального веб-сервера и перезагрузка страницы браузера при сохранении файла проекта (live reaload);
  • автоматическая простановка вендорных префиксов в CSS-файле для поддержки стилей устаревшими браузерами;
  • работа с изображениями сайта – объединение в спрайты (в том числе и SVG-спрайты), оптимизация (уменьшение веса);
  • копирование файлов проекта из одной папки в другую, создавая при это рез. копию;
  • создание иконочных шрифтов;
  • и многое другое…

Одним словом, круг задач, решаемых с помощью галп достаточно широк и грех всем этим не воспользоваться. Когда я впервые столкнулся с GruntJs мне казалось, что подобные сборки нужны только для крупных и поддерживаемых проектов. А я верстаю небольших макеты и мне это не нужно. Ох как же я ошибался. На самом деле данный инструмент нужен любому веб-разработчику, он здорово экономит время. Представьте, я раньше делал спрайты изображений вручную – это же натуральная рутина. А в Gulp, установив нужный плагин мне достаточно добавить нужное изображение в определенную папку и скрипт сделает все за меня, выдав уже готовый объединенный файл изображений.

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

Установка Gulp

Установку Gulp я буду показывать на примере ОС Windows 10 x64 последней сборки, так как я работаю именно в данной системе.

Первым делом нам необходимо установить node.js. Данный пакет превращает клиентский язык javaScript в серверный. Для тех, кто не знает язык javaScript интерпретирует браузер пользователя. Кстати, Gulp создан на языке javaScript и если вы знакомы с данным языком, то освоить его вам будет намного легче.

Для установки node.js необходимо скачать инсталлятор с официального сайта. Качаем последнюю стабильную версию. Пакет устанавливается как обычная программа и ничего сложного в этом нет.

После установки node.js можно проверить правильно ли все установилось. Открываем консольное окно (командная строка) – в ОС Windows это комбинация клавиш Win+R -> cmd -> Enter. Вводим команду:

node -v

Если все правильно установили в ответ вы увидите версию установленного пакета.

Версия установленного node.js

Все, можно приступать к установке Gulp. 

Пишем команду для установки Gulp:

npm i gulp -g

Давайте разберем, что значит данная запись:

  • npm – говорит о том, что мы запускаем пакет менеджер, который установит Gulp;
  • i – это сокращенная запись install, т.е. установить;
  • gulp – имя устанавливаемого пакета;
  • -g – данный флаг говорит о том, что мы устанавливаем Gulp глобально в систему. Без данного ключа gulp установится в ту папку, из которой запускается команда. Так что имейте это ввиду.

Установка не занимает много времени, примерно 1-2 мин. После завершения работы установщика галп можно проверить корректность установки, также, как и node.js:

gulp -v

Если все правильно, то выдаст версию установленного галп.

Версия установленного Gulp

Создание проекта

Двигаемся дальше. Теперь создайте папку проекта в удобном месте вашего компьютера. Назовем ее, например, gproject.

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

Перейдем в папку проекта и запустим консоль команд для данного каталога. Наиболее быстрый вариант сделать это зажать клавишу “Shift” и удерживая ее щелкнуть правой кнопкой мыши на пустой области окна каталога. Откроется контекстное меню, в котором выбираем “Открываем окно PowerShell здесь“. Данный пункт может называться и по другому – “Открыть окно команд“.

Открываем окно PowerShell здесь

Запускаем инициализацию проекта командой:

npm init

Все команды в дальнейшем пишутся именно в консоли, повторяться далее я не буду.

Заполняем необходимые поля проекта по шагам и желательно латиницей. После ввода названия жмем Enter и переходим с следующему шагу.

  • package-name: вводим название проекта маленькими буквами
  • version: оставляем по умолчанию – 1.0.0
  • description: вводим описание проекта, например, My first gulp project.
  • entry point: (index.js), test command:, git repository:, keywords: – данные шаги оставляем по умолчанию, жмем Enter и переходим к следующему шагу
  • author: впишите имя автора, я ввел Zaur Magomedov
  • license: оставляем по умолчанию
  • Is this ok? – вводим “yes” и жмем Enter поле чего в папке нашего проекта появится файл package.json. 

Запуск команды npm init

Файл package.json содержит в себе информацию о проекте + информацию об установленных пакетах (плагинов). Это своего рода файл манифеста. Теперь давайте установим Gulp локально в папку нашего проекта. Для этого пишем следующую команду:

npm i gulp --save-dev

флаг –save-dev как раз говорит установщику установить gulp локально в папку нашего проекта.

Внимание! Локально установится та версия галпа, что и глобальная.

При установке gulp название пакета и его версия автоматически пропишутся в файле package.json. Вообще такой подход позволяет сохранять файл package.json со всеми установленными пакетами (зависимости), а при разворачивании нового проекта достаточно скопировать данный файл и запустить команду установки в консоли проекта – npm install и все пакеты в проект установятся автоматически. Сейчас может вам будет не совсем понятно, но дальше я уверен вы поймете.

Читайте также:  Расширения для Firefox - мой стандартный набор

И так, после установки gulp в папке проекта должна появиться папка node_modules,  она содержит в себе необходимые зависимости. Также все новые установленные зависимости, прописываемые в package.json будут складываться именно в данную папку. Так что ничего не трогайте в ней и не удаляйте. Не пугайтесь если увидите в ней много файлов и папок.

Давайте откроем файл package.json реактором кода и взглянем на его содержимое.

{
 "name": "gulp-project",
 "version": "1.0.0",
 "description": "My first gulp project",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "Zaur Magomedov",
 "license": "ISC",
 "devDependencies": {
 "gulp": "^3.9.1"
 }
}

Мы видим всю ту информацию, которую вводили при инициализации проекта + ниже в блоке “devDependencies” указаны установленные зависимости и их версии. В данном случае это gulp версии 3.9.1. Как я и говорил установилась локально именно та версия, что стоит глобально.

Структура каталогов проекта Gulp

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

  • gproject
    • dist/
    • src/
      • images/
      • js/
      • sass/
      • index.html
    • node_modules/
    • gulpfile.js
    • package.json

Теперь давайте разберем предназначение каждой папки. 

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

src – здесь будут храниться исходники файлов проекта. Вообще, в дочерних папках может быть очень много файлов, зависит от размера проекта. Каждые типы файлов потом объединяются в общий файл и копируются в папку продакшена. В корне лежит файл index.html. Вообще для HTML можно создать отдельный каталог, но я здесь не стал усложнять и создал всего лишь главный файл.

image – неоптимизированные изображения и иконки проекта.

js – файлы javaScript.

sass – файлы препроцессоров SASS или SCSS.

node_modules – с этой папкой мы уже знакомы – все модули и зависимости gulp. 

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

Gulpfile.js

Это важный файл без которого Gulp проект работать не может. Здесь записываются все задачи для выполнения – это так называемые таски (task), что в переводе с английского означает – задача. В основном весь gulpfile состоит из сплошных тасков. Таски создаются для подключаемых дополнительных плагинов. Без таска плагин работать не будет. Давайте обо всем по порядку.

Создайте в корне своего проекта файл gulpfile.js и вставьте в него следующий код:

// Подключаем Gulp
var gulp = require("gulp"); 

// Создаем простой таск
gulp.task('myFirstTask', function() {
 console.log('Привет, я твой первый таск!');
});

// Запуск тасков по умолчанию
gulp.task("default", ["myFirstTask"]);

Сразу, не отходя от кассы, разберем что это за код и за что отвечает каждая строчка.

var gulp = require("gulp");

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

// Создаем простой таск 
gulp.task('myFirstTask', function() {
console.log('Привет, я твой первый таск!');
});

А это простейший таск для вывода сообщения в окне консоли. myFirstTask – это название нашего таска, оно может быть любым. 

// Запуск тасков по умолчанию
gulp.task("default", ["myFirstTask"]);

Данной строкой мы запускаем все прописанные здесь таски. Этот таск по умолчанию, который запускает одновременно все перечисленные в нем таски. В данном случае указан только один созданный нами – ["myFirstTask"]. Их может быть несколько, указываются в кавычках и через запятую. Например, если бы у нас было 2 таска, то мы бы указали так – ["myFirstTask", "mySecondTask"]. И одной командой мы бы запустили сразу 2 данных таска.

Итак, давайте же уже запустим и посмотрим на результат. Вводим команду – gulp и если ошибок нет, нам должно выдать – Привет, я твой первый таск!

Запуск таска по умолчанию gulp

В данном случае мы запустили таск по умолчанию, но можно запустить отдельно каждый таск. Например, для нашего таска будет следующая команда – gulp myFirstTask, результат будет тот же самый.

Запуск первого таск gulp

Теперь давайте установим дополнительные плагины и рассмотрим более сложные таски.

Установка плагинов Gulp

Давайте создадим небольшой проект для верстки, установив некоторые плагины, которые упростят нам работу в разы. Откроем наш gulpfile.js и cразу под строкой var gulp = require("gulp"); запишем подключение плагинов:

// Подключаем плагины Gulp
var sass = require("gulp-sass"), // переводит SASS в CSS
    cssnano = require("gulp-cssnano"), // Минимизация CSS
    autoprefixer = require('gulp-autoprefixer'), // Проставлет вендорные префиксы в CSS для поддержки старых браузеров
    imagemin = require('gulp-imagemin'), // Сжатие изображений
    concat = require("gulp-concat"), // Объединение файлов - конкатенация
    uglify = require("gulp-uglify"), // Минимизация javascript
    rename = require("gulp-rename"); // Переименование файлов

Переменные мы создали, но еще нужно установить и сами плагины. Устанавливать будем локально в папку проекта. Для установки плагина необходимо написать команду:

npm i gulp-jshint --save-dev

Здесь gulp-jshint – это название плагина. Чтобы установить несколько плагинов разом необходимо их просто прописать через пробел:

npm i gulp-sass gulp-cssnano gulp-autoprefixer gulp-imagemin gulp-concat gulp-uglify gulp-rename --save-dev

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

файл package json

Теперь нам необходимо создать таски для наших плагинов. Вот что у меня получилось в файле gulpfile.js:

// Подключаем Gulp
var gulp = require("gulp");

// Подключаем плагины Gulp
var sass = require("gulp-sass"), // переводит SASS в CSS
    cssnano = require("gulp-cssnano"), // Минимизация CSS
    autoprefixer = require('gulp-autoprefixer'), // Проставлет вендорные префиксы в CSS для поддержки старых браузеров
    imagemin = require('gulp-imagemin'), // Сжатие изображение
    concat = require("gulp-concat"), // Объединение файлов - конкатенация
    uglify = require("gulp-uglify"), // Минимизация javascript
    rename = require("gulp-rename"); // Переименование файлов

/* --------------------------------------------------------
   ----------------- Таски ---------------------------
------------------------------------------------------------ */

// Копирование файлов HTML в папку dist
gulp.task("html", function() {
    return gulp.src("src/*.html")
    .pipe(gulp.dest("dist"));
});

// Объединение, компиляция Sass в CSS, простановка венд. префиксов и дальнейшая минимизация кода
gulp.task("sass", function() {
    return gulp.src("src/sass/*.sass")
        .pipe(concat('styles.sass'))
        .pipe(sass())
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
         }))
        .pipe(cssnano())
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest("dist/css"));
});

// Объединение и сжатие JS-файлов
gulp.task("scripts", function() {
    return gulp.src("src/js/*.js") // директория откуда брать исходники
        .pipe(concat('scripts.js')) // объеденим все js-файлы в один 
        .pipe(uglify()) // вызов плагина uglify - сжатие кода
        .pipe(rename({ suffix: '.min' })) // вызов плагина rename - переименование файла с приставкой .min
        .pipe(gulp.dest("dist/js")); // директория продакшена, т.е. куда сложить готовый файл
});

// Сжимаем картинки
gulp.task('imgs', function() {
    return gulp.src("src/images/*.+(jpg|jpeg|png|gif)")
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{ removeViewBox: false }],
            interlaced: true
        }))
        .pipe(gulp.dest("dist/images"))
});

// Задача слежения за измененными файлами
gulp.task("watch", function() {
    gulp.watch("src/*.html", ["html"]);
    gulp.watch("src/js/*.js", ["scripts"]);
    gulp.watch("src/sass/*.sass", ["sass"]);
    gulp.watch("src/images/*.+(jpg|jpeg|png|gif)", ["imgs"]);
});

///// Таски ///////////////////////////////////////

// Запуск тасков по умолчанию
gulp.task("default", ["html", "sass", "scripts", "imgs", "watch"]);

Теперь давайте разберем из чего состоит отдельный таск:

gulp.task('taskname', function () {
    return gulp.src('source-files')
    .pipe(plugin-name())
    .pipe(gulp.dest('folder'))
});
  • taskname – название таска – название может произвольным;
  • source-files – директория до файлов исходников, необходимо указать полный путь и расширения файлов, например, путь до всех фалов с расширением .js будет таким – templatename/js/*.js;
  • .pipe() – метод, который позволяет работать с установленным плагином
  • plugin-name – название плагина;
  • dest(“filder-path”) – путь до папки продакшена, т.е. куда выгрузить после отработки плагина
Читайте также:  Приложение Seven - ваш личный тренер в мобильном телефоне

Теперь, например, посмотрите наглядно на таск для работы с файлами javaScript: 

// Объединение и сжатие JS
gulp.task("scripts", function() { // название таска
     return gulp.src("src/js/*.js") // директория откуда брать исходники (выбрать все файлы с расширением .js)
         .pipe(concat('scripts.js')) // объеденим все js-файлы в один
         .pipe(uglify()) // вызов плагина uglify - сжатие кода
         .pipe(rename({ suffix: '.min' })) // вызов плагина rename - переименование файла с приставкой .min
         .pipe(gulp.dest("dist/js")); // директория продакшена, т.е. куда сложить готовый файл
});

Если заметили в gulpfile.js мы в конце создали таск под названием watch. Как он работает, ведь плагина для него мы не устанавливали? Все верно, это встроенная функция gulp. Данный таск позволяет следить за файлами, в которых были сделаны изменения. Как только в определенных файлах находятся изменения запускается указанный таск.

gulp.watch("путь до файлов", ["название таска"]);

Ниже запускаем все таски по умолчанию.

// Запуск тасков по умолчанию
 gulp.task("default", ["html", "sass", "scripts", "imgs", "watch"]);

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

Запуск gulp проекта

Как видим, все наши задачи запустились, картинки сжались на 3.5%. 

Хотелось бы отметить, что когда вы вносите изменения в gulpfile.js необходимо перезапускать команду gulp, предварительно остановив его, для того, чтобы изменения вступили в силу. Для остановки просто два раза подряд вводим комбинацию клавиш Ctrl + С, когда увидим мигающий курсор, снова вводим – gulp

Разворачивание готовой сборки одной командой

Вы создали сборку, теперь хотите реально создать на ней проект. Достаточно скопировать папку сборки и запустить установку. Вообще при установке должны устанавливаться все последние версии зависимостей, включая сам gulp (при обновлении глобальной версии). Для этого нам необходимо подредактировать файл package.json. В блоке devDependencies, где перечислены установленные расширения вместо версии необходимо указать ключевое слово – latest. Вот как теперь выглядит мой файл:

package-json - последние версии плагинов

Теперь для быстрого разворачивания проекта необходимо сделать следующее – копируем все файлы проекта Gulp за исключением папки node_modules в другую папку вашего проекта. Открываем локально консоль и вводим команду npm i после чего запуститься установка gulp и всех зависимостей. Все, можно начинать работу.

Дополнительные полезные плагины для Gulp

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

Plumber – дает возможность продолжить работу gulp при ошибке в коде. На самом деле, если вы в коде (html, js, sass, css) сделаете ошибку gulp выдаст ее в консоли и прекратит свою работу. Вам необходимо будет исправить ошибку и вновь запустить gulp.

Sourcemaps – создает карту подключений файлов css и js. Обычно в подобных проектах файлы стилей и скриптов делят на несколько частей для удобства. Так вот, чтобы потом ориентироваться в каком файле и в какой строке находится та или иная запись как раз и нужна карта подключений. 

Tinypng – сжатие изображений. Работает по той же аналогии, что и imagemin, но сжимает значительно лучше.

SvgSprite – сборка svg-спрайта иконок. В последнее время я перешел с иконочных шрифтов на svg иконки. Чтобы уменьшить количество http запросов к серверу нужно собирать иконки в спрайты.

Rigger – объединяет html-файлы в один. Необходимо, когда вы разбиваете html-файлы на отдельные неизменяемые блоки, например, шапка сайта, футер и т.д.

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

Spritesmith – создание спрайтов картинок. Еще один плагин для сборки спрайтов, только в данном случае из иконок Png. Также использую его частенько, т.к. не всегда иконки в макете бывают в формате svg.

Rimraf – очистка папки dist. Бывает, что приходится очищать время от времени папку продакшена dist, т.к. в нем могут скопиться неиспользуемые файлы. Например, вы переименовали файл стилей в другое название, таким образом у вас в dist будут две копии – старая и новая.

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

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

Жду ваши комментарии ниже. Подписывайтесь на мой канал в телеграм. До встречи в следующих статьях!

Остались вопросы? Посмотрите видео...

Gulp с нуля — руководство для начинающих веб-разработчиков
Заур Магомедов
Заур Магомедов

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

У меня вы можете:

Оцените пост:

1 балл2 балла3 балла4 балла5 баллов (1 оценок, среднее: 5,00 из 5)
Загрузка...

Проверка орфографии

Система Orphus

10 комментариев к статье "Gulp с нуля — руководство для начинающих веб-разработчиков"

  • Дмитрий Авг 31, 2018 в 12:52

    Это просто обалденная статья! Всё четко, подробно и по сути. Всё сразу понятно. Спасибо большое за доступное объяснение!

    • Заур Магомедов
      Заур Магомедов Авг 31, 2018 в 18:27

      Не за что! Вам спасибо, что посетили мой скромный блог…

  • Андрей Чвалов Авг 06, 2018 в 3:57

    Нужен ли gulp и node.js после сборки проекта ?

    Чтобы из сорцов собрать у себя и клиенту уже дать готовый сайт который можно крутить на хостинге без надобности в node.js

    • Заур Магомедов
      Заур Магомедов Авг 06, 2018 в 11:53

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

      • Андрей Чвалов Авг 06, 2018 в 15:57

        С этим разобрался, спасибо большое.

        А как в случае с Angular 2+, не нужно ли держать angular-cli ?
        И еще -> при сборке с помощью gulp/webpack нормально ли сработает ‘Tree-shaking’ или ‘uglify’ если за основу взят TypeScript или он конвертируется в js ?

        • Заур Магомедов
          Заур Магомедов Авг 06, 2018 в 18:29

          uglify с Gulp работает прекрасно. В остальных вопросах не компетентен.

  • Александр Мар 18, 2018 в 9:05

    Спасибо, Заур. Для меня, как для новичка, все подробно расписано, лаконично и понятно.

    • Заур Магомедов
      Заур Магомедов Мар 18, 2018 в 10:57

      Не за что! Я старался ))

  • максим ленский Янв 29, 2018 в 7:37

    только у меня всегда выскакивает ошибка – если в в sass пишу одно правило , для примера body enter tab background-color: red то работает отлично , но если я пишу : body: enter tab background-color:red enter tab font-size:2em то gulp останавливается , не знаете почему ?

    • Заур Магомедов
      Заур Магомедов Янв 29, 2018 в 9:45

      После background-color:red -> Enter – не нужно делать tab. У обоих правил (background-color и font-size) должно быть одинаковое выравнивание.

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:

  • Код HTML - тегами [html] ваш код... [/html]
  • Код CSS - тегами [css] ваш код... [/css]
  • Код PHP - тегами [php] ваш код... [/php]
  • Код JavaScript - тегами [code lang="js"] ваш код... [/code]