Немного про Gulp

Вы когда нибудь замечали, что работая по части front-end (верстка, JavaScript-программирование, стили, препроцессинг css и т.д.), а особенно с ростом проектов и опыта, вам иногда приходится совершать очень много повторяющихся, рутинных действии? Например, как минимум:

  • Каждый раз обновлять страницу, когда вы изменяете какой-нибудь файл, причем если тестирование идет во многих вкладках и нескольких браузерах (лично для меня становится очень утомительно)
  • Вручную запускать препроцессоры стилей, например sass. Вообще можно использовать решения на основе каких нибудь популярных библиотек для этого, которые есть как самостоятельный модуль во многих CMS и сами по себе, пример. Но ведь для таких задач опять таки можно использовать gulp
  • Сжимать (делать мин. версии) файлов js, css
  • Конкатенировать (объединять) несколько сжатых файлов js в один и подключать в определенном месте
  • Сжимать картинки, jpg, png и т.д
  • Удалять временные файлы из директории, переименовывать файлы и т.д.

Этот список можно продолжать и для gulp (сравнительно молодым инструментом, у которого есть только единственный конкурент, grunt) уже наверное нет таких пакетов, которые бы можно было придумать. Под любую задачу, под любой чих, есть свой пакет, все они тут. На момент написания статьи, их находилось почти 8800! Просмотрите их хотя бы бегло и вы удивитесь, сколько всего интересного можно реализовать в своих повседневных задачах.

Gulp — это система сборки. Что это значит? Это понятие подразумевает здесь, то что вы, составив один раз файл gulpfile.js (файл, который описывает все те задачи, которые вы индивидуально придумали для своего проекта) больше не ломаете голову над тем, что вы забыли сделать и как минимум тот список рутинных действии выше, автоматически будет выполняться сам. Вам остается только дальше работать над версткой или программированием, или над всем этим вместе! Для того чтобы установить gulp, необходимо перед этим установить важный компонент для его работы — node.js и npm (менеджер пакетов для nodejs, обычно идет в его составе), как установить я рассказывать не буду здесь, вот ссылка здесь и для линуксов здесь, ну и гугл, как говорится в помощь. Потом после установки для проверки вводим в консоли node -v и смотрим версию, если все установилось.

Установка Gulp

Установим gulp глобально: npm install --global gulp, затем пойдем в директорию проекта, выполним npm init создастся файл package.json и скопируем локальную копию сюда:

npm install --save-dev gulp

В папке с проектом появится новая папка node_modules. Затем создаем на этом же уровне файл gulpfile.js и описываем в нем задачи. Но перед этим gulp системе нужны будут дополнительные инструменты в виде пакетов, которые есть в npm (см. ссылку выше)

Создание задач

Допустим требуется использовать sass. Нет проблем, набираем команду npm install gulp-sass --save-dev в папке проекта. Но перед этим желательно сделать npm update и если уже был установлен gulp-sass, то перестроить его бинарник во избежание ошибок: npm rebuild node-sass. Далее идем в gulpfile.js и набираем:

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var themeDirectory = 'ishop';
var paths = {
    source: './views/' + themeDirectory + '/sass/*.scss',
    dest: './views/' + themeDirectory + '/css'
};

gulp.task('sass', function () {
    return gulp.src(paths.source)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(paths.dest));
});

Поясню что здесь происходит. Допустим у нас есть структура проекта следующая:

structura_g

Сперва подключаем сам gulp var gulp = require('gulp');, затем модуль gulp-sass. Я дополнительно, для удобства завел переменную paths, содержащую пути, которые мне необходимы. Из структуры папок демо-проекта видно что у меня есть директория views и папка темы внутри нее ishop. С учетом этого выстраиваю путь до папки с исходными файлами .scss и путь до папки, куда будут складываться скомпилированные css. После этого идет метод task, он указывает уже что делать, — дословно «возьми все, что находится там-то, сделай компиляцию sass, при этом, если будут ошибки, покажи их в консоли и положи готовые файлы туда-то, верни результат». Вот и все. Все что остается сделать дать команду:

gulp sass

И в папке css появится наш файл style.css! Его уже можно подключать в стили. А что если я теперь хочу сжать его? Набираем:

npm install gulp-clean-css --save-dev

Модернизируем наш gulpfile.js:

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCSS = require('gulp-clean-css');
var themeDirectory = 'ishop';
var paths = {
    source: './views/' + themeDirectory + '/sass/*.scss',
    dest: './views/' + themeDirectory + '/css',
    sourceFullCss: './views/' + themeDirectory + '/css/style.css',
    destMinCss: './views/' + themeDirectory + '/css/compress'
};

gulp.task('sass', function () {
    return gulp.src(paths.source)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(paths.dest));
});

gulp.task('mincss', function () {
    return gulp.src(paths.sourceFullCss)
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(gulp.dest(paths.destMinCss));
});
gulp mincss

В папке compress появится минифицированная версия ранее скомпилированного файла стилей. Его то уже и подключим в шапке сайта. Точно таким же образом можно сжимать и js. Пакет для min js называется gulp-minify. Принцип аналогичный, все остальное можно почерпнуть из документации. Можно делать сколько угодно задач, которые вы считаете необходимыми делать в своей работе, но все таки это было бы не очень эффективно без отслеживания файлов и автоматической перезагрузки браузера!

Отслеживание файлов и автоматическая перезагрузка браузера

Ранее в этой статье я показывал как можно установить независимый модуль browser-sync, но сегодня настало время показать всю силу gulp в связке с этим инструментом. Допустим я хочу, чтобы браузер автоматом перезагружался при изменении в файлах стилей, html и php (ну и js тоже, но здесь рассматривать не буду, все по аналогии, создаем таск для js просто дополнительно). И чтобы одновременно с этим, а точнее за мгновение до этого происходила компиляция sass и сжатие css. Нет проблем. Во первых в gulp есть метод watch(), который мы можем использовать и сказать gulp следить за какой-нибудь задачей, а также установить все задачи по дефолту и запускать одной командой gulp веб-сервер для работы browser-sync по отдельному для этих задач порту. Устанавливаем browser-sync:

npm install --save-dev browser-sync

Потом следом пакет для корректной работы веб-сервера при изменении в файлах .php:

npm install --save-dev gulp-connect-php

Окончательный gulpfile.js:

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCSS = require('gulp-clean-css');
var browserSync = require('browser-sync');
var connectPHP = require('gulp-connect-php');
var themeDirectory = 'ishop';
var paths = {
    html: './views/**/*.html',
    php: './views/**/*.php',
    source: './views/' + themeDirectory + '/sass/*.scss',
    dest: './views/' + themeDirectory + '/css',
    sourceFullCss: './views/' + themeDirectory + '/css/style.css',
    destMinCss: './views/' + themeDirectory + '/css/compress'

};

gulp.task('sass', function () {
    return gulp.src(paths.source)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(paths.dest));
});

gulp.task('mincss', function () {
    return gulp.src(paths.sourceFullCss)
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(gulp.dest(paths.destMinCss))
        .pipe(browserSync.reload({stream: true})); // перезагружаем после компиляции и сжатия
});

gulp.task('onhtml', function () {
    gulp.src(paths.html)
        .pipe(browserSync.reload({stream: true})); // перезагружаем после изменения в файлах html
});

gulp.task('onphp', function () {
    gulp.src(paths.php)
        .pipe(browserSync.reload({stream: true})); // перезагружаем после изменения в файлах php
});

gulp.task('browserSync', function () {
    browserSync({
        proxy: 'example.com'
    });
});

gulp.task('php', function () {
    connectPHP.server({
        base: './',
        keepalive: true,
        hostname: 'example.com',
        open: false
    });
});

// следим за изменениями в файлах
gulp.task('watcher', function () {
    gulp.watch(paths.source, ['sass']);
    gulp.watch(paths.sourceFullCss, ['mincss']);
    gulp.watch(paths.html, ['onhtml']);
    gulp.watch(paths.php, ['onphp']);
});

// команда по дефолту - gulp
gulp.task('default', ['watcher', 'browserSync', 'php']);

Вызываем на исполнение в консоли одну лишь команду gulp и после того как запустится веб-сервер, (по умолчанию порт :3000) спокойно работаем на автопилоте. Вместо example.com проставляете ваш рабочий адрес сервера. В заключение хотелось бы отметить что статья не описывает полный спектр возможностей gulp, а лишь дает начальное представление о работе с этой системой сборки. В репозитории содержится громадное количество пакетов, с помощью которых можно сделать что угодно!



Похожие заметки:

Скрипт динамической ширины

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

  • Нарезать блоки на одинаковую ширину в зависимости от заданного количества колонок
  • Генерировать нужное количество колонок
  • Проставлять clearfix после оканчивающей ряд колонки, чтобы вовремя отменить обтекание
  • Удалять лишние clearfix

Открыть здесь

Верстка

Услуги » верстка страниц сайта

Открыть здесь

Удобная разработка с livereload, установка browser-sync

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

Открыть здесь


Перед тем как писать комментарии, рекомендую ознакомиться:

Markdown синтаксис »

Оформление кода »

Нужна аватарка »

Комментарии