Недавно познакомился с тремя способами вырезания фонового изображения на макете. До недавнего времени знал о существовании только одного способа, с которым познакомился еще на сайте htmlbook.ru.

Чтобы было яснее, рассмотрим пример psd-макета страницы:

Страница с фоновым изображением

Видим, что на странице имеются множественные фоновые изображения. И как вы думаете, каким образом нужно вырезать такое изображение? Чтоб потом замостить им фон страницы или фон блока-контейнера?

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

Если бы удалось обнаружить таковой фрагмент, то вырезал бы его с помощью инструмента “Crop”. Если бы фрагмент не обнаружил, то просто бы вырезал кусок фона размером побольше (что называется “на глазок”), опять-таки, с помощью инструмента “Crop”.

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

Ниже последовательно рассмотрим все три способа, начиная с самого простого и заканчивая самым трудоемким.

Описание выполняемых действий приведено в локализованной версии Photoshop.

Простое вырезание фона

Фон страницы на psd-макете представляет из себя растровое изображение, у которого имеется всего один слой. И при этом визуально не получается выделить повторяющиеся фрагменты в этом фоне.

В этом случае нужно поступить только одним способом.

Свести воедино все видимые слои с помощью сочетания клавиш Shift+Ctrl+E.

Инструментом “Crop” с зажатой клавишей Shift (чтобы получился квадрат) выделяем на фоне psd-макета квадрат побольше, размера 50x50px или 100x100px. Размер должен быть побольше именно для того, чтобы гарантировать бесшовность такого рисунка в фоне.

Затем экспортируем его в Web и используем в CSS для установки в качестве фонового изображения.

Вырезание фрагмента фона

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

Инструментом “Crop” вырезаем из фона обнаруженный фрагмент, сохраняем его для Web и используем по назначению в CSS.

Pattern в Photoshop

Третий способ основан на понятии pattern в Photoshop. Этот способ самый точный и надежный. В нем мы как-бы “опираемся” на силы самого Photoshop, который должен “помочь” нам обнаружить pattern в нарисованном дизайнером psd-макете.

Я не дизайнер (и никогда им не буду), поэтому могу сказать по поводу того, что такое pattern в двух словах.

Это образец узора какого-то определенного размера (который может быть любым) - 102x102px, 20x20px или же 5x5px. Этот образец узора может быть любого рисунка (завитушки, полосочки, цветочки и т. д.).

Вся задача pattern’а - служить образчиком, которым дизайнер выполняет заливку слоя. То есть, ситуация получается в точности такая, как у верстальщика. Имеется маленький кусочек рисунка, которым дизайнер “мостит” весь слой.

Задача верстальщика при нарезке psd-макета - выделить этот pattern из psd-макета в отдельное изображение. Чтобы увидеть, что в данном слое используется pattern, достаточно открыть палитру “Слои” и активировать нужный слой. В качестве примененных к слою эффектов должно стоять “Наложение узора”:

Фоновый слой с pattern

Все! Наша задача наполовину выполнена - мы знаем, что для этого слоя дизайнер применил pattern в качестве заливки каким-то там рисунком.

Осталось только найти этот pattern, что является задачей чисто технической. И нам в этом поможет сам Photoshop.

Дважды кликаем мышкой по выбранному слою с фоновым рисунком. Откроется окно “Стиль слоя”, в котором активируем пункт - “Наложение узора”. В правой части окна будет показан конкретный pattern, с помощью которого дизайнер выполнял заливку данного слоя.

То есть, Photoshop показал, какой pattern использовал дизайнер в анализируемом нами слое. Нам осталось “вычленить” этот pattern и в этом нам снова поможет Photoshop:

Pattern для выбранного слоя

В этом же окне нужно навести курсор мыши на окошко с pattern‘ом (окно “Узор”) и немного подождать, пока рядом с курсором мыши не появиться всплывающий tooltip, в котором будут показаны размеры данного pattern‘а.

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

Щелчком мыши на маленькой стрелочке справа от окна с образцом pattern‘а открываем палитру паттернов (patterns):

Палитра паттернов (patterns)

В этой палитре нам необходимо добавить выбранный нами pattern в свою коллекцию паттернов. Это нужно для того, чтобы потом использовать этот pattern в своих “коварных” целях. Для этой цели кликаем на круглой кнопочке со стрелкой - далее можно разобраться, что и как добавлять.

Закрываем окно “Стиль слоя” и создаем новый документ Ctrl+N с размерами, как у нашего pattern‘а:

Новое изображение с размерами pattern'а

Здесь самое главное - правильно указать размеры будущего документа (как правило, все pattern‘ы имеют форму квадрата), все остальное для нас неважно.

Создаем новый документ. Затем в меню Photoshop переходим по пути “Слои” - “Новый слой-заливка” - “Узор”. И в открывшемся окошке “Новый слой” просто кликаем по кнопке ОК, все остальное для нас опять неважно:

Заливка нового слоя с помощью pattern'а

Откроется еще одно окошко, в котором выбираем нужный нам pattern:

Выбор pattern'а для заливки слоя

Как результат получаем новый документ с заливкой слоя выбранным нами pattern‘ом. Это хорошо заметно чисто визуально, в основном окне. В палитре “Слои” также видно, что к слою была применена заливка узором:

Готовое изображение для фоновой заливки

Картинка для фоновой заливки готова! Осталось только экспортировать ее для Web и применить на странице силами CSS.

Например, таким образом:

background-position: 0 0;
background-repeat: repeat;
background-image: url(../images/bg_body.png);

Все - задача выполнена!

Заключение

Вот мы и познакомились с тремя способами вырезания фонового изображения из psd-макета.


Отличная тема из разряда “как повысить эффективность своей работы”.

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

Захотел написать маленький обзор этой темы, когда пересматривал видео по верстке от Adi Purdila, записанное им для Tuts Plus. В этом видео он прямо-таки волшебным образом вставлял комментарии в HTML-файл. Конечно, делать комментарии в этаких файлах - дело нужное и полезное. Но вот добавлять их - это такая нудная задача!

Решил потратить немного своего времени, чтобы разобраться, как же он мог сделать? Немного подумал и пришел к мысли, что наверняка он делал это с помощью макросов (macros). Точнее - он создал макрос (macros), который вставляет комментарий в файл. А потом только применял этот макрос (macros) - просто и быстро!

Ну что же, давайте и мы разберемся, каким образом можно записать свой собственный макрос (macros) в Sublime Text. Чем мы хуже Adi Purdila?

Что такое macros?

Для начала неплохо было бы вспомнить, что такое макрос (macros)? В любой программе, будь то MS Excel, Adobe Photoshop, Notepad++ или же Sublime Text макрос (macros) - это записанная этой программой последовательность действий, выполненная пользователем. Образно говоря, пользователь говорит программе - “смотри, запоминай и повторяй за мной”.

Запись macros в Sublime Text

Запись и воспроизведение макросов (macros) в Sublime Text можно выполнить двумя способами.

Первый - через панель инструментов по пути “Tools” - “Record Macro”, “Tools” - “Playback Macro”.

Или же более правильным способом (ведь мы с вами настоящие кодеры?) - через сочетание клавиш. Запуск записи макроса (macros) - через Ctrl+Q. Остановка записи макроса (macros) - тоже через Ctrl+Q. Воспроизведение записанного макроса (macros) - через Shift+Ctrl+Q.

Я создам макрос (macros) для вставки начального комментария для блока. После остановки записи макроса (macros) он сохраняется в буфере обмена и при закрытии программы Sublime Text он пропадет. Поэтому его нужно сохранить через меню “Tools” - “Save Macro”.

Все пользовательские макросы (macros) сохраняются в директорию “Packages” - “User”. Показанный на видео макрос я сохранил под именем comment.sublime-macro в этой директории.

В меню редактора Sublime Text сохраненный макрос (macro) можно найти по пути “Tools” - “Macros”. Там уже имеются дефолтные макросы (macros) самого редактора и плагинов, установленных в нем. В моем случае там есть макросы (macros) под плагин “MarkdownEditing”:

Sublime Text User Macros

Ради любопытства можно посмотреть на содержимое сохраненного мною макроса (macros) comment.sublime-macro. Ничего сложного в нем нет - это простая запись последовательности выполненных мною действий, в формате JSON.

Ниже привожу начальный отрывок этого файла - все мои действия легко читаются:

[
{
  "args": null,
  "command": "find_under_expand"
},
{
  "args": null,
  "command": "upper_case"
},
{
  "args":
  {
    "extend": false,
    "to": "bol"
  },
  "command": "move_to"
},
{
  "args":
  {
    "characters": "<!"
  },
  "command": "insert"
},
{
  "args":
  {
    "characters": "--"
  },
  "command": "insert"
},
...

Создание key binding для macros

Теперь неплохо было бы “повесить” на этот макрос (macros) сочетание горячих клавиш (“забиндить”), чтобы почти мгновенно вызывать его на исполнение. Для этого понадобятся вкладки “Key Bindings - Default” и “Key Bindings - User”. Обе они располагаются в меню “Preferences”.

Во вкладке “Key Bindings - Default” помещен список всех сочетаний клавиш по умолчанию, на которые повешены какие-либо действия в редакторе Sublime Text.

Во вкладке “Key Bindings - User” можно задать свои собственные сочетания клавиш и повесить на них нужное действие.

Мне захотелось повесить выполнение макроса comment.sublime-macro на сочетание клавиш Shift+Ctrl+C. Для этого я подстраховываю себя и проверяю, нет ли во вкладке “Key Bindings - Default” такого сочетания клавиш, чтобы не переопределить какое-либо действие.

Такого не оказалось, поэтому во вкладке “Key Bindings - User” добавляю такую строку:

[
  { "keys": ["alt+shift+c"], "command": "run_macro_file", "args": {"file": "Packages/User/comment.sublime-macro"} }
]

Эта строка легко читается.

Здесь:

  • "keys": ["alt+shift+c"] - это записанное мною сочетание клавиш;
  • "command": "run_macro_file" - говорит Sublime, что необходимо запустить выполнение именно макроса, а не какого-либо другого действия;
  • "args": {"file": "Packages/User/comment.sublime-macro"} - указывает, какой именно макрос (macro) нужно выполнить.

Аналогично предыдущему макросу, создам еще один macros, который будет вставлять конечный комментарий для блока. На него во вкладке “Key Bindings - User” я повешу сочетание клавиш Shift+Ctrl+E:

{ "keys": ["alt+shift+e"], "command": "run_macro_file", "args": {"file": "Packages/User/end_comment.sublime-macro"} }

Запуск макроса (macros) в Sublime Text

Теперь настало время проверить, как работают записанные мною макросы. Для этого в коде я воспользуюсь сочетаниями клавиш Shift+Ctrl+C и Shift+Ctrl+E:

Отлично! Быстрота и легкость вставки комментариев впечатляет. А сколько времени и сил при этом экономится! Конечно, одними комментариями для макросов (macros) можно не ограничиваться - тут уж насколько хватит фантазии.

Главное - что инструмент нужный и полезный, макросы (macros) в Sublime Text.


Вопрос настройки орфографии (spellcheck) в редакторе Sublime Text 3.

Сам вопрос подразумевает настройку проверки орфографии (spellcheck русского текста в Sublime Text, ибо орфография английского языка включена в этом редакторе по умолчанию (точнее - есть встроенный словарь английского языка).

Установка русского словаря

Чтобы включить возможность проверки (spellcheck) русскаго текста в редакторе Sublime Text, необходимо подключить словарь русского языка. Готовый к использованию под Sublime Text словарь русского языка можно скачать по ссылке - sublime_russian_english_dictonary.zip.

После скачивания архива его нужно распаковать. В итоге получиться два файла:

$ ls
  russian_english.aff
  russian_english.dic

Затем нужно переместить (или скопировать) оба файла в директорию с плагинами Sublime Text. Это можно сделать тремя способами.

Первый способ - быстрый и простой, основан на использовании консоли Linux (я не забыл сказать, что пример приведен под Linux Mint 17 Cinnamon?). Для этого в текущей директории со словарями открываем терминал и выполняем всего одну команду:

$ cp * ~/.config/sublime-text-3/Packages/

… которая произведет копирование всех файлов (в данном случае - двух) в директорию с плагинами под Sublime Text.

Второй способ - более медленный. Для этого в окне Nemo (в Linux Mint Cinnamon - это аналог Finder под Mac OS X или Проводник под Windows) в контекстном меню выбираем “Показать скрытые файлы”.

Отобразятся все скрытые (системные) файлы\директории системы Linux Mint и среди них нужная нам директория - “.config”:

Директория плагинов редактора Sublime Text

Переходим по пути .config - sublime-text-3 - Packages и с помощью клавиш Ctrl+C + Ctrl+V производим вставку файлов русского словаря.

Третий способ - с помощью редактора Sublime Text. Для этого в самом редакторе переходим по пути “Preferences” - “Browse Packages…”. Откроется окно с плагинами Sublime Text. Далее - действовать, как во втором примере.

Spellcheck в Sublime Text

После помещения файлов словаря в директорию “Packages” желательно перезапустить редактор Sublime Text. Если все прошло успешно, то в меню “View” - “Dictionary” под пунктом “Language - English” появиться пункт “russian-english” - это и есть подключенный нами словарь русского языка.

Чтобы осуществить проверку (spellcheck) на ошибки в русско-язычном тексте в редакторе Sublime Text, нужно выбрать в меню вышеназванный пункт - “View” - “Dictionary” - “russian-english”, тем самым указав редактору, какой словарь использовать для проверки. А затем запустить проверку орфографии (spellcheck), нажав клавишу F6. Повторное нажатие клавиши отключает проверку орфографии.

Настройка spellcheck в Sublime Text

Рассмотренный выше способ проверки орфографии (spellcheck) в Sublime Text можно назвать ручным. Однако, для этого способа требуется много времени и телодвижений, чтобы включить его.

Если в Sublime Text пишется в основном русско-язычный текст, то можно включить автоматическую проверку орфографии (spellcheck) в этом редакторе.

Для этого в пользовательских настройках “Preferences” - “Settings - User” достаточно прописать две строки:

// Word list to use for spellchecking
"dictionary": "Packages/russian_english.dic",

// Set to true to turn spellchecking on by default
"spell_check": true

Первая строка указывает редактору Sublime Text месторасположение русского словаря, тем самым говоря ему, что для проверки орфографии (spellcheck) нужно использовать этот словарь, а не какой-нибудь другой.

Вторая строка включает автоматическую проверку орфографии (spellcheck) в Sublime Text. Если в тексте много англоязычных слов, или если необходимо на время отключить проверку, то достаточно нажать клавишу F6. Чтобы снова вернуть назад проверку, опять нажимаем F6.

Заключение

Очень полезная штучка оказалась для меня, возможность проверки орфографии (spellcheck) в Sublime Text. Открыл для себя с удивлением, сколько же много я ошибок и опечаток делаю в тексте!

Один вопрос в данной теме остался для меня открытым - как самому вносить правки в русский словарь? Как самому добавлять в него слова? К примеру, чтобы он не “ругался” на незнакомое ему слово “фреймворк” или “плагин”?


Совсем короткий пост. Думал даже, нужно ли его публиковать вообще? Но потом решил, что раз уже “накропал” статью, то стоит ее разместить на своем бложике.

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

Так вот, мною был взят “premium”-макет из одного из видеокурсов по верстке (не буду говорить, какой - это неважно). Открыл его, посмотрел и впечатлился - красивый такой макет! Да и автор курса его нахваливал. Это потом стало ясно, что в данном случае psd-макет не мог быть реально хорошим, по определению.

Начал я верстать этот макет, с обязательным применением Susy, ибо даже при первоначальном открытии макета на нем осталась сетка из guidelines, по которой дизайнер рисовал макет. Капитан Очевидность говорил о том, что данный макет нужно верстать по сетке.

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

Немного поостыл и решил внимательно разобраться, в чем дело. И … е-мое! Вы только посмотрите на это “чудо” дизайнерской мысли!

Макет вписан точно в 960px! Не в 940px, как это можно было ожидать, а именно в 960px!

Ширина psd-макета на всю сетку

Левый край psd-макета

Правый край psd-макета

Ну ладно, можно поправить ширину навигации и слайдера силами CSS, чтобы вписать ширину обоих в 940px. Но это было бы еще пол-беды! Ведь, если на главной странице сетка еще выдержана, то на остальных страницах - просто тихий ужас:

Неравная ширина колонок psd-макета

Более того, абсолютно непонятно, зачем этому “дизайнеру” сетка вообще понадобилась в данном случае:

Смещение контента внутри psd-макета

Чтобы макет “профессионально” выглядел?

Становится ясно, что изначально этот макет делался (и должен был делаться) по сетке. Но дизайнер “закосячил” с самого начала. Или не знал о предназначении сетки вообще?

Вывод

Такой макет нужно или отсылать на доработку; или верстать на “ванильном” CSS, без использования любой из grid system.

Мораль сей басни такова: нужно внимательно анализировать макет перед тем, как приступать к верстке. Чтобы не потерять время даром (а время - деньги, как хорошо известно).


В статье рассмотрены три модуля для работы под Gulp - gulp-rename, gulp-notify, gulp-autoprefixer.

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

Подготовка проекта

Подготовим проект, создав его базовую основу. Первым файлом создадим файл package.json и наполним его таким содержимым:

$ touch package.json
  $ cat package.json
  {
    "name" : "three_modules",
    "version" : "0.0.1"
  }

Затем установим локально Gulp.js и укажем npm, чтобы он внес этот пакет в качестве зависимостей в файл package.json:

$ sudo npm install --save-dev gulp
  $ cat package.json
  {
    "name": "four_modules",
    "version": "0.0.1",
    "devDependencies": {
      "gulp": "~3.8.8"
    }
  }

Создаем js-файл, в котором будем прописывать задачи для Gulp:

$ touch gulpfile.js
  $ cat gulpfile.js
  var gulp = require(gulp);

  // Default Task
  gulp.task(default, function(){
    // body...
  });

Основа для тестирования отдельных модулей готова.

Gulp-rename - переименование файлов

Задача модуля gulp-rename предназначена для одной маленькой цели - переименования файлов. Установим модуль с указанием зависимостей:

$ sudo npm install --save-dev gulp-rename
  $ cat package.json
  {
    "name": "four_modules",
    "version": "0.0.1",
    "devDependencies": {
      "gulp": "~3.8.8",
      "gulp-rename": "~1.2.0"
    }
  }

И создадим задачу в файле gulpfile.js для установленного модуля gulp-rename:

$ cat gulpfile.js
  var gulp = require(gulp),
      rename = require(gulp-rename);

  // Rename Task
  gulp.task(rename, function(){
    gulp.src(css/style.css)
    .pipe(rename(pretty_styles.css))
    .pipe(gulp.dest(build/css/));
  });

В задаче под именем rename для Gulp “говориться” следующее: найти файл style.css - gulp.src('css/style.css'); переименовать его в имя pretty_styles - .pipe(rename('pretty_styles.css')); переименованный файл положить в папку по пути build/css/ - .pipe(gulp.dest('build/css/')).

Запускаю задачу rename в консоли и вижу, что процесс прошел успешно:

$ gulp rename
  Using gulpfile /media/aaron/application/develop/training/gulp_connect/gulpfile.js
  Starting rename...
  Finished rename after 11 ms

Проверяю, “положил” ли Gulp переименованный файл pretty_styles.css по пути build/css/:

$ ls build/css/
  pretty_styles.css

Да, все верно, файл pretty_styles.css находиться там, где он и должен находиться.

Рассмотренный выше пример очень прост. Более сложные и интересные возможности модуля gulp-rename показаны на его официальной странице - gulp-rename. А именно - возможности переименования с помощью функций или с помощью префиксов\суффиксов.

Gulp-notify - уведомление о событиях

Установка модуля gulp-notify выполняется как обычно:

$ sudo npm install --save-dev gulp-notify
  $ cat package.json
  {
    "name": "four_modules",
    "version": "0.0.1",
    "devDependencies": {
      "gulp": "~3.8.8",
      "gulp-rename": "~1.2.0",
      "gulp-notify": "~1.6.0"
    }
  }

Затем создаю задачу notify, которая будет отслеживать все изменения в файле css/style.css. Задача информирования об изменениях подразумевает ее использование в фоновом режиме.

Поэтому, создаю еще одну задачу для мониторинга - watch, которую помещаю в дефолтную задачу default. В общем случае файл gulpgile.js будет выглядеть следующим образом:

var gulp = require(gulp),
  rename = require(gulp-rename),
  notify = require(gulp-notify);

  // Default Task
  gulp.task(default, [watch]);

  // Notify Task
  gulp.task(notify, function(){
    gulp.src(css/style.css)
    .pipe(notify(File style.css was changed!));
  });

  // Watch Task
  gulp.task(watch, function(){
    gulp.watch(css/style.css, [notify]);
  });

В консоли запускаю Gulp с дефолтной задачей default:

$ gulp
  Using gulpfile /media/aaron/application/develop/training/gulp_connect/gulpfile.js
  Starting watch...
  Finished watch after 8.79 ms
  Starting default...
  Finished default after 7.97 μs

Теперь вношу в файл css/style.css изменения и сохраняю их. На Рабочем столе мгновенно появляется всплывающее окно с уведомлением о внесенных в файл css/style.css изменениях. Не знаю, как в других системах, но на Linux Mint 17 Cinnamon это окошко выглядит очень симпатично.

На странице GitHub автора модуля представлены более интересные примеры создания и использования gulp-notify.

Gulp-autoprefixer - браузерные префиксы

Интересный модуль gulp-autoprefixer для управления браузерными префиксами в проекте. Задача у него - не просто устанавливать префиксы для тех CSS3-свойств, которые нуждаюся в этом на данный момент (другими словами - для включения их поддержки в браузерах).

С помощью gulp-autoprefixer можно управлять “глубиной” версий браузеров, которые должны поддерживать работу конкретного проекта. Другими словами, можно указать модулю gulp-autoprefixer, что необходимо отслеживать поддержку префиксов только в двух последних версиях каждого (из всех существующих) браузера - last 2 versions (кстати, это значение по умолчанию для данного модуля).

Или же учитывать только две последние версии браузера Google Chrome - last 2 Chrome versions. При задании префиксов можно учитывать глобальную статистику использования браузера - > 5% (если брузер используют больше 5% населения Интернет).

Модуль gulp-autoprefixer использует собственные имена для браузеров при задании параматров работы своей работы. С полным списком еще более интересных возможностей для задания выборки браузеров можно (и нужно) ознакомиться на странице GitHub.

Работа модуля gulp-autoprefixer основана на известном ресурсе Can I Use. Именно оттуда он берет инормацию о поддержке браузерами того или иного CSS3-свойства на данный момент. Кстати, известный фреймворк Compass также основывается на Can I Use при работе со своими миксинами (mixin).

Сервис Can I Use

Помимо этого, модуль gulp-autoprefixer умеет красиво форматировать CSS-свойства с браузерными префиксами в виде визульного каскада:

a {
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
}

За такую возможность отвечает параметр cascade, который включен по умолчанию в данном модуле. Вообще, по умолчанию модуль gulp-autoprefixer имеет такие параметры в виде массива (array): > 1%, last 2 versions, Firefox ESR, Opera 12.1.

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

$ sudo npm install --save-dev gulp-autoprefixer
  $ cat package.json
  {
    "name": "four_modules",
    "version": "0.0.1",
    "devDependencies": {
      "gulp": "~3.8.8",
      "gulp-rename": "~1.2.0",
      "gulp-notify": "~1.6.0",
      "gulp-autoprefixer": "~1.0.0"
    }
  }

Создаю задачу autoprefixer с описанием того, что нужно отслеживать изменения в файле css/style.css и при добавлении в него CSS3-свойств преобразовывать их в свойства с браузерными префиксами. При этом учитывать только две последние версии браузеров и результат помещать по пути build/css/.

var gulp = require(gulp),
  autoprefixer = require(gulp-autoprefixer);

  // Autoprefixer Task
  gulp.task(autoprefixer, function(){
    gulp.src(css/style.css)
    .pipe(autoprefixer({
      browsers: [last 2 versions]
    }))
    .pipe(gulp.dest(build/css/));
  });

Внесу в файл css/style.css CSS3-свойство transform, которое заведомо нужно использовать с префиксами (для этого я заранее “подглядел” его на “Can I Use”):

.block {
  width: 100px;
  height: 100px;
  background-color: #778899;
  transform: rotate(7deg);
  }

Запускаю задачу autoprefixer и смотрю результат:

.block {
  width: 100px;
  height: 100px;
  background-color: #778899;
  -webkit-transform: rotate(7deg);
          transform: rotate(7deg);
  }

Все четко - под условие “не ниже второй версии” попали только браузеры на движке Webkit - можно свериться здесь.

Можно немного “углубить” условие и “опуститься” до третьей версии всех браузеров:

// Autoprefixer Task
  gulp.task(autoprefixer, function(){
    gulp.src(css/style.css)
    .pipe(autoprefixer({
      browsers: [last 3 versions]
    }))
    .pipe(gulp.dest(build/css/));
  });

… и посмотреть результат:

.block {
  width: 100px;
  height: 100px;
  background-color: #778899;
  -webkit-transform: rotate(7deg);
      -ms-transform: rotate(7deg);
          transform: rotate(7deg);
  }

Вывод в build/css/style.css красивый благодаря cascade, который можно и отключить, установив cascade: false.