Объединяем Pattern Lab c Gulp

() translation by (you can also view the original English article)

Работаете-ли вы, или ваша команда со стайлгайдами (styleguides, руководства стилей)? Есть-ли у вас документация к вашим модулям? Если нет, не переживайте. В данном туториале я покажу одну из возможностей, как улучшить продуктивность работы в команде. Мы рассмотрим концепции предложенные Brad Frost и Dave Olsen, используя Pattern Lab для создания стайлгайдов и настроим Gulp для обработки ресурсов. Давайте начнём!

Что такое Gulp?

Gulp.js - система сборки, в своей основе использующая стримы. Важная концепция данного инструмента - у вас есть стримы, для которых вы указываете различные действия, которые необходимо совершить над файлами. Это быстрее чем делать все действия вручную, сохраняет уйму времени и нервов. К примеру, в этом туториале мы пропустим все наши Sass файлы через так называемый pipe (процесс, поток, программный канал):

скомпилируем Sass в CSS,
объединим CSS файлы,
минифицируем результат,
и перенесём его в другое место

Чтобы узнать больше об основах Gulp, взгляните на путеводитель для начинающих от Kezz Bracey's - Командная строка в веб-дизайне: автоматизация с Gulp.

Что такое Pattern Lab?

Pattern Lab - концепция о создании систем атомного дизайна (atomic design systems); создание модулей вместо создания непосредственно страниц. Данная концепция определяет несколько составных частей:

атомы
молекулы
организмы
шаблоны
страницы

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

Атомы

Атомы не могут быть разбиты на более мелкие составляющие.

Это самые простые блоки, включая фундаментальные теги (к примеру списки), цвета, шрифты, анимации и так далее.

Молекулы

Молекулы - группы различных элементов (атомов), которые функционируют вместе подобно единому модулю.

К примеру, тизер с заголовком, изображение, параграф, а также ссылка "Читать полностью". Одиночные элементы объединённые вместе представляют из себя молекулу; часть более сложной и крупной системы.

Организмы

Организмы - группы элементов (атомов и молекул) и работают подобно разделам, секциям вашего веб-сайта.

Представьте, к примеру, шапку сайта. Это более крупная система, построенная из молекул, таких как форма поиска и навигация, обе из которых были созданы из более мелких атомов.

patternlab header organism — Организм - шапка Pattern Lab, показан на маленьком экране

Изучите примеры интерфейса и почувствуйте что представляет из себя вся система.

Приступим к магии!

Теперь пришло время соединить обе этих системы и настроить рабочий процесс для вашей команды. Pattern Lab предоставит нам HTML и простые элементы интерфейса, Gulp же в свою очередь будет обрабатывать необходимые нам ресурсы.

Ключевые особенности:

Компиляция Sass (с помощью Libsass)
Сервер (Browser-Sync)
Livereload
Минификация (Javascript, CSS и изображений)
Развёртывание на удалённом сервере
- Обновление номера версии
- Теги
- Отправка файлов и тегов в конечное место назначения (endpoint)
- Отправка файлов с помощью rsync на сервер

Введение

Перед тем как использовать Gulp у вас должен быть установлен node.js, на компьютере. Если его нет, взгляните на статью Kezz Bracey - Командная строка для веб-дизайна: работа со сторонними библиотеками, там вы найдёте инструкции по установке.

Давайте начнём установив глобально Gulp.js. В терминале введите:

1	npm install gulp -g

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

1	git clone git@github.com:pattern-lab/patternlab-php.git

Далее нам нужно настроить задачи (tasks) в gulp файле. Создайте gulpfile.js в корне нашего проекта. После этого нам нужен конфигурационный файл, где мы указываем все пути, так что создайте в этой папке также build.config.json.

Помимо этого нам понадобятся следующие файлы:

.bowerrc
package.json
bower.json

После всех начальных шагов, мы будем обладать основной структурой нашего проекта. Теперь давайте начнём описывать необходимые нашему рабочему процессу задачи.

Начнём с Gulpfile

На верху файла gulpfile.js мы запрашиваем (require) каждую зависимость. После установки плагина, вам нужно "запросить" его и дать ему имя.

Начнём с gulp и нашего файла конфигурации, в котором указаны все пути и настройки.

1	var gulp = require('gulp'),
2	config = require('./build.config.json');

Во время процесса разработки нам не нужно минифицировать код (это пустая трата времени до тех пор, пока мы не будем готовы отправлять проект на сервер). Благодаря переменной production мы можем включать и выключать определённые задачи. Позже вы увидите это в действии.

1	// Production Handling
2	// Description: Use 'production' variable with 'gulpif'
3	// Toggle minifing and optimization for assets
4	var production;

Теперь когда всё настроено, мы можем начать описывать задачи, которые помогут нам во время разработки!

Задача 1: отчистка всех ресурсов

// Install needed dependency
npm install gulp-clean

// Require dependency
var clean = require('gulp-clean');

Если удалить изображение из папки "source/", можно заметить что в папке "public/" также есть копия данного изображения. По причине подобного дублирования, нам нужно выполнить небольшие шаги, чтобы убрать изображение из "public/".

// Task: Clean:before
// Description: Removing assets files before running other tasks
gulp.task('clean:before', function () {
  return gulp.src(
    config.assets.dest
  )
    .pipe(clean({
      force: true
    }))
});

Задача 2: обработка скриптов

// Install needed dependencies
npm install gulp-concat gulp-uglify gulp-rename

// Require dependencies
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

При переносе проекта на сервер, важно иметь лишь один файл со всеми скриптами. Для этого мы используем плагин под названием gulp-concat и объединим все скрипты в application.js файл. Если переменная production равна true, тогда application.js будет минифицирован и получит новое имя: application.min.js.

gulp.task('scripts', function () {
  return gulp.src(config.scripts.files)
    .pipe(concat(
      'application.js'
    ))
    .pipe(gulpif(production, uglify()))
    .pipe(gulpif(production, rename({
      suffix: '.min'
    })))
    .pipe(gulp.dest(
      config.scripts.dest
    ))
    .pipe(browserSync.reload({stream:true}));
});

Задача 3: шрифты

Эта задача отправит все шрифты в папку public. И ничего больше.

// Task: Handle fonts
gulp.task('fonts', function () {
  return gulp.src(config.fonts.files)
    .pipe(gulp.dest(
      config.fonts.dest
    ))
    .pipe(browserSync.reload({stream:true}));
});

Задача 4: изображения

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

// Install imagemin
npm install gulp-imagemin

// Require dependencies
var imagemin = require('gulp-imagemin');

Если переменная production равна true, в этом случае все изображения будут сжаты. После того как это будет сделано, мы перенесём их в конечную папку.

// Task: Handle images
gulp.task('images', function () {
  return gulp.src(config.images.files)
    .pipe(gulpif(production, imagemin()))
    .pipe(gulp.dest(
      config.images.dest
    ))
    .pipe(browserSync.reload({stream:true}));
});

Задача 5: обработка Sass

Давайте установим и добавим зависимости gulp-sass и gulp-cssmin.

// Install needed dependencies
npm install gulp-sass gulp-cssmin

// Require dependencies
var sass = require('gulp-sass');
var cssmin = require('gulp-cssmin');

Теперь мы возьмём все файлы, используем плагин Sass для компиляции их в CSS, после чего, если переменная production равна true, cssmin выполнит свою работу.

// Task: Handle Sass and CSS
gulp.task('sass', function () {
  return gulp.src(config.scss.files)
    .pipe(sass())
    .pipe(gulpif(production, cssmin()))
    .pipe(gulpif(production, rename({
      suffix: '.min'
    })))
    .pipe(gulp.dest(
      config.scss.dest
    ))
    .pipe(browserSync.reload({stream:true}));
});

Задача 6: сервер Pattern Lab

У Pattern Lab есть собственный сервер, который можно запустить простой командой. Для запуска данной команды нам понадобится плагин gulp-shell.

// Install needed dependencies
npm install gulp-shell

// Require dependencies
var shell = require('gulp-shell');

На этом этапе мы скопируем папку styleguide из core в public. Теперь вы сможете увидеть в браузере целостный фронтенд.

// Task: patternlab
// Description: Build static Pattern Lab files via PHP script
gulp.task('patternlab', function () {
  return gulp.src('', {read: false})
    .pipe(shell([
      'php core/builder.php -gpn'
    ]))
    .pipe(browserSync.reload({stream:true}));
});

// Task: styleguide
// Description: Copy Styleguide-Folder from core/ to public
gulp.task('styleguide', function() {
  return gulp.src(config.patternlab.styleguide.files)
    .pipe(gulp.dest(config.patternlab.styleguide.dest));
});

Задача 7: запуск сервера и отслеживание файлов

Pattern Lab имеет встроенный сервер, но Browser-Sync меняет CSS без перезагрузки страницы.

// Install needed dependencies
npm install browser-sync gulp-watch

// Require dependencies
var browser-sync = require('browser-sync');
var watch = require('gulp-watch');

Watch позаботится об отслеживании изменений и будет запускать определённые задачи. После этого browser-sync обновит страницу в браузере.

// task: BrowserSync
// Description: Run BrowserSync server with disabled ghost mode
gulp.task('browser-sync', function() {
  browserSync({
    server: {
        baseDir: config.root
    },
    ghostMode: true,
    open: "external"
  });
});

Мы указали файлы для watch и указали необходимые задачи, которые сработают во время события изменения файлов.

// Task: Watch files
gulp.task('watch', function () {

  // Watch Pattern Lab files
  gulp.watch(
    config.patternlab.files,
    ['patternlab']
  );

  // Watch scripts
  gulp.watch(
    config.scripts.files,
    ['scripts']
  );
  
  // Watch images
  gulp.watch(
    config.images.files,
    ['images']
  );

  // Watch Sass
  gulp.watch(
    config.scss.files,
    ['sass']
  );

  // Watch fonts
  gulp.watch(
    config.fonts.files,
    ['fonts']
  );
});

Задача 8: задача по умолчанию

После запуска команды gulp в командной строке будет запущена задача по умолчанию. Но перед тем как Gulp запустит её, будет произведена отчистка (clean:before), тем самым будет удалены файлы в папке public.

// Task: Default
// Description: Build all stuff of the project once
gulp.task('default', ['clean:before'], function () {
  production = false;

  gulp.start(
    'patternlab',
    'styleguide',
    'fonts',
    'sass',
    'images',
    'scripts'
  );
});

Задача 9: начальный процесс

Давайте создадим задачу для создания стайлгайда, без минификации ресурсов. Будет запущен browser-sync, обработаны все ресурсы, после чего запустится отслеживание изменений файлов.

// Task: Start your production-process
// Description: Typ 'gulp' in the terminal
gulp.task('serve', function () {
  production = false;

  gulp.start(
    'browser-sync',
    'default',
    'watch'
  );
});

Задача 10: публикация и теги

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

Плагин gulp-bump для обновления номера версии.
gulp-filter позволит вам получить определённый файл из стрима
gulp-git позволяет использовать git команды в gulp
И gulp-tag-version для генерации тега.

// Install needed dependencies
npm install gulp-bump gulp-filter gulp-git gulp-tag-version

// Require dependencies
var bump = require('gulp-bump');
var filter = require('gulp-filter');
var git = require('gulp-git');
var tagversion = require('gulp-tag-version');

Теперь мы опишем gulp-task под названием release, зададим переменную production равную true (в данном случае потребуется минификация) и откроем стрим. Необходимо взять все файлы с номером версии, использовать плагин bump, также указать тип версии (patch, minor или major) с помощью параметра командной строки.

Если выполнить release-task без типа версии, тогда gulp-bump выдаст - x.x.1. После этого мы перенесём файлы в корень проекта и закоммитим изменения. Теперь пришло время сгенерировать новый тег проекта. В этом случае потребуется файл package.json, чтобы получить текущую версию для нового тега.

Ну и наконец, мы отправим все файлы и теги в репозиторий origin, используя какую захочется ветку.

// Function: Releasing (Bump & Tagging)
// Description: Bump npm versions, create Git tag and push to origin
gulp.task('release', function () {
  production = true;

  return gulp.src(config.versioning.files)
    .pipe(bump({
      type: gulp.env.type || 'patch'
    }))
    .pipe(gulp.dest('./'))
    .pipe(git.commit('Release a ' + gulp.env.type + '-update'))

    // read only one file to get version number
    .pipe(filter('package.json'))

    // Tag it
    .pipe(tagversion())

    // Publish files and tags to endpoint
    .pipe(shell([
      'git push origin develop',
      'git push origin --tags'
    ]));
});

Задача 11: развёртывание на сервере

Мы можем отправить все файлы на сервер с помощью rsync; данный подход очень быстр и удобен. Введите gulp deploy в терминале и после нескольких секунд, ваш локальный проект окажется на сервере. Не нужно вручную перетаскивать файлы и папки. Следует всё что можно автоматизировать. Хост и путь к папке, которую хотите отправить на сервер в build.config.js.

// Task: Deploy static content
// Description: Deploy static content using rsync shell command
gulp.task('deploy', function () {
  return gulp.src(config.deployment.local.path, {read: false})
    .pipe(shell([
      'rsync '+ config.deployment.rsync.options +' '+ config.deployment.local.path +'/ '+ config.deployment.remote.host
    ]))
});

Конечный Gulpfile

Вы написали так много кода и вот вам финальный результат! Если захотите можно поместить каждую задачу в отдельный файл. Чтобы не усложнять, в данном туториале мы описали все задачи в одном gulp файле:

var gulp        = require('gulp'),
    bump        = require('gulp-bump'),
    clean       = require('gulp-clean'), 
    concat      = require('gulp-concat'),
    browserSync = require('browser-sync'),
    cssmin      = require('gulp-cssmin'),
    filter      = require('gulp-filter'),
    git         = require('gulp-git'),
    gulpif      = require('gulp-if'),
    imagemin    = require('gulp-imagemin'),
    rename      = require('gulp-rename'),
    sass        = require('gulp-sass'),
    shell       = require('gulp-shell'),
    tagversion  = require('gulp-tag-version'),
    uglify      = require('gulp-uglify'),
    config      = require('./build.config.json');

// Trigger
var production;

// Task: Clean:before
// Description: Removing assets files before running other tasks
gulp.task('clean:before', function () {
  return gulp.src(
    config.assets.dest
  )
    .pipe(clean({
      force: true
    }))
});

// Task: Handle scripts
gulp.task('scripts', function () {
  return gulp.src(config.scripts.files)
    .pipe(concat(
      'application.js'
    ))
    .pipe(gulpif(production, uglify()))
    .pipe(gulpif(production, rename({
      suffix: '.min'
    })))
    .pipe(gulp.dest(
      config.scripts.dest
    ))
    .pipe(browserSync.reload({stream:true}));
});

// Task: Handle fonts
gulp.task('fonts', function () {
  return gulp.src(config.fonts.files)
    .pipe(gulp.dest(
      config.fonts.dest
    ))
    .pipe(browserSync.reload({stream:true}));
});

// Task: Handle images
gulp.task('images', function () {
  return gulp.src(config.images.files)
    .pipe(gulpif(production, imagemin()))
    .pipe(gulp.dest(
      config.images.dest
    ))
    .pipe(browserSync.reload({stream:true}));
});

// Task: Handle Sass and CSS
gulp.task('sass', function () {
  return gulp.src(config.scss.files)
    .pipe(sass())
    .pipe(gulpif(production, cssmin()))
    .pipe(gulpif(production, rename({
      suffix: '.min'
    })))
    .pipe(gulp.dest(
      config.scss.dest
    ))
    .pipe(browserSync.reload({stream:true}));
});

// Task: patternlab
// Description: Build static Pattern Lab files via PHP script
gulp.task('patternlab', function () {
  return gulp.src('', {read: false})
    .pipe(shell([
      'php core/builder.php -gpn'
    ]))
    .pipe(browserSync.reload({stream:true}));
});

// Task: styleguide
// Description: Copy Styleguide-Folder from core/ to public
gulp.task('styleguide', function() {
  return gulp.src(config.patternlab.styleguide.files)
    .pipe(gulp.dest(config.patternlab.styleguide.dest));
});

// task: BrowserSync
// Description: Run BrowserSync server with disabled ghost mode
gulp.task('browser-sync', function() {
  browserSync({
    server: {
        baseDir: config.root
    },
    ghostMode: true,
    open: "external"
  });
});

// Task: Watch files
gulp.task('watch', function () {

  // Watch Pattern Lab files
  gulp.watch(
    config.patternlab.files,
    ['patternlab']
  );

  // Watch scripts
  gulp.watch(
    config.scripts.files,
    ['scripts']
  );

  // Watch images
  gulp.watch(
    config.images.files,
    ['images']
  );

  // Watch Sass
  gulp.watch(
    config.scss.files,
    ['sass']
  );

  // Watch fonts
  gulp.watch(
    config.fonts.files,
    ['fonts']
  );
});

// Task: Default
// Description: Build all stuff of the project once
gulp.task('default', ['clean:before'], function () {
  production = false;

  gulp.start(
    'patternlab',
    'styleguide',
    'fonts',
    'sass',
    'images',
    'scripts'
  );
});

// Task: Start your production-process
// Description: Typ 'gulp' in the terminal
gulp.task('serve', function () {
  production = false;

  gulp.start(
    'browser-sync',
    'default',
    'watch'
  );
});

// Task: Deploy static content
// Description: Deploy static content using rsync shell command
gulp.task('deploy', function () {
  return gulp.src(config.deployment.local.path, {read: false})
    .pipe(shell([
      'rsync '+ config.deployment.rsync.options +' '+ config.deployment.local.path +'/ '+ config.deployment.remote.host
    ]))
});

// Function: Releasing (Bump & Tagging)
// Description: Bump npm versions, create Git tag and push to origin
gulp.task('release', function () {
  production = true;

  return gulp.src(config.versioning.files)
    .pipe(bump({
      type: gulp.env.type || 'patch'
    }))
    .pipe(gulp.dest('./'))
    .pipe(git.commit('Release a ' + gulp.env.type + '-update'))

    // read only one file to get version number
    .pipe(filter('package.json'))

    // Tag it
    .pipe(tagversion())

    // Publish files and tags to endpoint
    .pipe(shell([
      'git push origin develop',
      'git push origin --tags'
    ]));
});

Файл конфигурации

Теперь укажем необходимые пути в файле с конфигурацией. Данный файл служит в качестве указателя путей и различных настроек проекта:

{
  "root": "./public",
  "deployment": {
    "local": {
      "path": "public"
    },
    "remote": {
      "host": "YOUR HOST"
    },
    "rsync": {
      "options": "-avzh --delete -e ssh"
    }
  },
  "assets": {
    "base": "source/assets/",
    "dest": "public/assets/"
  },
  "versioning": {
    "files": [
      "./package.json",
      "./bower.json"
    ]
  },
  "scripts": {
    "base"  : "source/assets/javascripts/",
    "files" : [
      "source/assets/javascripts/**/*.js"
    ],
    "dest"  : "public/assets/javascripts/"
  },
  "components": {
    "base": "source/assets/components/"
  },
  "scss": {
    "base" : "source/assets/scss/",
    "files": [
      "source/assets/scss/**/*.scss"
    ],
    "dest" : "public/assets/stylesheets/"
  },
  "fonts": {
    "base" : "source/assets/fonts/",
    "files": [
      "source/assets/fonts/**/*"
    ],
    "dest" : "public/assets/fonts/"
  },
  "images": {
    "base" : "source/assets/images/",
    "files": [
      "source/assets/images/**/*"
    ],
    "dest" : "public/assets/images/"
  },
  "patternlab": {
    "styleguide": {
      "files": [
        "core/styleguide/**"
      ],
      "dest": "public/styleguide/"
    },
    "files": [
      "source/_patterns/**/*.mustache",
      "source/_patterns/**/*.json",
      "source/_data/*.json"
    ]
  }
}

Заключение

Я люблю работать с комбинацией Gulp и Pattern Lab. Мне довелось работать в различных командах и создавать подобную основу для каждого проекта. Отзывы от других членов команды всегда были положительны в связи с простотой данного процесса. Каждый может воспользоваться цельной основой проекта, выбрать необходимый модуль и использовать его. Для отзывов и вопросов используйте форму для комментариев ниже.