Gulp основы. Руководство для самых маленьких

gulp для самых маленьких
Вы можете использовать уже готовую сборку gulp pack перейдя по ссылке: Optimize_Html_gulp-pack

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

Некоторые возможности gulp:
-Минификация и объединение css, js в один файл
-Компиляция из sass в css
-Сжатие изображений без потери качества
-Автоматическая перезагрузка браузера
-Deploy проекта на хостинг

Gulp является модулем для работы которого требуется наличие платформы node.js скачать который вы можете здесь. Чтобы проверить установлен ли он у вас в системе достаточно запустить командную строку и выполнить команду node -v. Если в ответ вы получили версию node.js значит установка прошла успешно.

Обратите внимание, что для работы мы будем использовать стандартный node.js менеджер - npm. Вы также можете перейти на более надежный, быстрый и безопасный менеджер - YARN.

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

В поисковой выдаче вы увидите официальный пакет gulp (the streaming build system) именуемый как: потоковая система сборки. Перейдите в него и ознакомьтесь с ним. Там вы найдете структуру gulpfile.js с кучей сторонних модулей. Взгляните как выглядит из себя gulp файл - это и есть gulp. На сайте в блоке справа вы найдете команду npm install gulp - эта команда отвечает за установку gulp в наш проект. Нам необходимо создать похожую структуру в файле gulpfile.js, но для начала нам нужно установить его.

Инициализация

Создайте папку с вашим будущим сайтом/проектом. Я назову ее frwork.
В корне проекта я создам папку app -> в которой будут лежать еще две папки (css и sass) пока с пустым содержимым. Также в папке app я создам файл index.html.
Кроме того нам необходим главный файл для работы с gulp. Поэтому я создам в корне проекта (помимо папки app) файл gulpfile.js (пока с пустым содержимым).

Структура проекта:

gulp для самых маленьких

Итак настало время инициализировать наш проект т.е сказать node.js чтобы он подготовил для нас json файл package.json куда в будущем будут прописываться все наши установленные gulp пакеты. Для этого необходимо в корне проекта зажать shift и кликнуть правой кнопкой мыши по пустой области рабочей папки. Нам нужна команда 'Открыть окно команд' чтобы вызвать командную строку прямо из рабочей папки.

Вводим в консоль команду:

npm init

Вводим в ответ любые данные и подтверждаем создание package.json.

Установка Gulp

Шаг 1-й -> Чтобы установить gulp глобально пропишем команду:

npm i gulp -g

Шаг 2-й -> Чтобы установить gulp локально пропишем команду:

npm i gulp -D

Если установка gulp прошла успешно в файле package.json появится зависимость gulp с текущей версией.

Установка дополнительных gulp модулей

Помимо gulp модуля, нам необходимо установить:
- gulp-sass - Отвечает за компиляцию sass файлов в css
- gulp-plumber - Модуль защиты от 'падения' в случае ошибки
- browser-sync - Нужен нам для автоматической перезагрузки браузера
- gulp-autoprefixer - Необходим для вставки префиксов css свойств
- gulp-cssmin - Минифицируем css для оптимизации скорости сайта
- gulp-rename - Переименовываем файлы
- gulp-concat-css - Объединение всех css в один

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

Настало время установить локально в проект все эти gulp пакеты. Для этого мы перечислим название gulp модулей в консоли для ускоренной установки.

npm i -D gulp-sass gulp-plumber browser-sync gulp-autoprefixer gulp-cssmin gulp-rename gulp-concat-css

Основы работы с Gulp: подключение модулей

Теперь когда все нужные gulp модули установлены нам необходимо подключить их. Для этого в файле gulpfile.js необходимо прописать следующее:

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    plumber = require('gulp-plumber'),
    browserSync = require('browser-sync'),
    autoprefixer = require('gulp-autoprefixer'),
    cssmin = require('gulp-cssmin'),
    rename = require('gulp-rename'),
    concatCss = require('gulp-concat-css');

Основы работы с Gulp: создание задач

В коде ниже мы именуем нашу задачу(task) как 'sass'(вы можете задавать любые имена) и создаем функцию которая успешно возвратит нам результат работы.

gulp.task('sass', function () {
    return gulp.src('app/sass/**/*.sass') /*Указываем путь до главного sass файла*/
        .pipe(plumber())  /*Продолжаем отслеживание в случае ошибки компиляции*/
        .pipe(sass())  /*Запускаем компиляцию из sass в css*/
        .pipe(autoprefixer(['last 15 versions']))  /*Говорим что нужно использовать префиксы для поддержки браузерами*/
        .pipe(cssmin()) /*Минифицируем css*/
        .pipe(rename({suffix: '.min'})) /*Переименовываем минифицированный css чтобы добавить суффикс .min*/
        .pipe(gulp.dest('app/css'))  /*Выгружаем минифицированный и не сжатый css файлы*/
        .pipe(browserSync.reload({stream: true}))  /*Обновляем браузер в случае отработки данной задачи*/
});

Следующая задача будет брать все css файлы из папки app/css и сливать их в один минифицированный css файл. Эта задача будет выполняться если нам необходимо объединить стили сторонних плагинов/библиотек.

gulp.task('concatCss', function () {
    return gulp.src(['app/css/**/*.css', '!app/css/style.min.css', '!app/css/style.css']) /*Указываем пути до css игнорируя родные стили*/
        .pipe(concatCss("concat.css")) /*Объединяем все css в новый css с названием concat.css*/
        .pipe(cssmin()) /*Минифицируем*/
        .pipe(rename({suffix: '.min'})) /*Переименовываем*/
        .pipe(gulp.dest('app/css/allStylesInOne')) /*выбрасываем в новую папку allStylesInOne*/
});

Отлично. Со стилями мы разобрались. Теперь необходимо создать gulp task для модуля browser-sync, чтобы инициализировать главную директорию на отслеживание файлов и дальнейшую автоматическую перезагрузку браузера.

gulp.task('liveReload', function () {
    browserSync({
        server: {
            baseDir: 'app' /*Указываем главную папку со скриптами*/
        },
        notify: false /*Отключаем уведомления в браузере для комфортной работы*/
    })
});

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

gulp.task('watch', ['liveReload', 'sass', 'concatCss'], function () {
    gulp.watch('app/sass/**/*.sass', ['sass']); /*Указываем путь на отслеживание sass файлов и собственно саму задачу*/
    gulp.watch('app/**/*.html', browserSync.reload); /*Указываем путь на отслеживание всех html файлов и команду на перезагрузку браузера*/
    gulp.watch('app/css/**/*.css', ['concatCss']) /*Указываем путь на отслеживание всех css файлов и собственно саму задачу*/
});

Пришло время немного изменить структуру нашего проекта, а точнее добавить sass стили и подключить в index.html будущие скомпилированные css стили.

В папке sass я создаю два файла: _var.sass и style.sass.

Файл _var.sass не будет компилироваться по одной простой причине. У него перед именем стоит нижнее подчеркивание. Это означает, что данный файл будет исключен из компиляции. Это то , что нам нужно! Т.к компилироваться будет только основной файл style.sass , а _var.sass мы просто подключим внутрь style.sass

Вот что находиться в файле _var.sass:

$bg_orange: orange /*Создаем переменную bg_orange с цветом orange. Как только мы подключим этот sass файл в style.sass мы сможем по имени переменной обращаться к данному свойству*/

Вот что находиться в файле style.sass:

@import "var" /*Импортируем _var.sass*/

body
  background: $bg_orange /*Подключаем переменную*/

  display: flex /*Прописываем свойство которое поддерживается не всеми браузерами, чтобы проверить работу autoprefixer*/

Вот что находиться в файле index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/allStylesInOne/concat.min.css">  /*Подключаем стили будущих библиотек/плагинов*/
    <link rel="stylesheet" href="css/style.min.css"> /*Подключаем основные, минифицированные стили*/
</head>
<body>

</body>
</html>

Итак, давайте еще раз, но более наглядно посмотрим на нашу структуру файлов.

gulp для самых маленьких

Нам осталось только запустить в командной строке команду gulp watch и если все сделано правильно, то фон нашей странички измениться в оранжевый цвет.

По ссылке ниже вы можете скачать готовый gulp проект. Но прежде чем вы его запустите вам придется установить заново все gulp модули. Сделать это очень просто. Поскольку в проекте вы найдете файл package.json, то вы без проблем сможете установить все gulp модули написав в командной строке команду npm i. После успешного скачивания gulp модулей у вас появиться папка node_modules. После чего в консоли вам необходимо будет ввести команду gulp watch.

Читайте также:

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

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