Gulp-autoprefixer, gulp-rename, gulp-notify

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

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

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

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

1	package.json

и наполним его таким содержимым:

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

Затем установим локально Gulp.js и укажем

npm

, чтобы он внес этот пакет в качестве зависимостей в файл

1
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 - переименование файлов

Задача модуля

1	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"
    }
  }

И создадим задачу в файле

1	gulpfile.js

для установленного модуля

1
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 “говориться” следующее: найти файл

1
style.css

1
gulp.src('css/style.css')

; переименовать его в имя

1
pretty_styles

1
.pipe(rename('pretty_styles.css'))

; переименованный файл положить в папку по пути

1
build/css/

1
.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 переименованный файл

1	pretty_styles.css

по пути

1
build/css/

$ ls build/css/
  pretty_styles.css

Да, все верно, файл

1	pretty_styles.css

находиться там, где он и должен находиться.

Рассмотренный выше пример очень прост. Более сложные и интересные возможности модуля

1	gulp-rename

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

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

Установка модуля

1	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

, которая будет отслеживать все изменения в файле

1
css/style.css

. Задача информирования об изменениях подразумевает ее использование в фоновом режиме.

Поэтому, создаю еще одну задачу для мониторинга -

watch

, которую помещаю в дефолтную задачу

1
default

. В общем случае файл

1
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

Теперь вношу в файл

1	css/style.css

изменения и сохраняю их. На Рабочем столе мгновенно появляется всплывающее окно с уведомлением о внесенных в файл

1
css/style.css

изменениях. Не знаю, как в других системах, но на Linux Mint 17 Cinnamon это окошко выглядит очень симпатично.

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

1	gulp-notify

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

Интересный модуль

1	gulp-autoprefixer

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

С помощью

1	gulp-autoprefixer

можно управлять “глубиной” версий браузеров, которые должны поддерживать работу конкретного проекта. Другими словами, можно указать модулю

1
gulp-autoprefixer

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

1
last 2 versions

(кстати, это значение по умолчанию для данного модуля).

Или же учитывать только две последние версии браузера Google Chrome -

1	last 2 Chrome versions

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

1
> 5%

(если брузер используют больше 5% населения Интернет).

Модуль

1	gulp-autoprefixer

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

Работа модуля

1	gulp-autoprefixer

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

Сервис Can I Use

Помимо этого, модуль

1	gulp-autoprefixer

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

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

За такую возможность отвечает параметр

cascade

, который включен по умолчанию в данном модуле. Вообще, по умолчанию модуль

1
gulp-autoprefixer

имеет такие параметры в виде массива (array):

1
> 1%, last 2 versions, Firefox ESR, Opera 12.1

Вступление было достаточно долгим и подробным - это потому, что модуль

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"
    }
  }

Создаю задачу

1	autoprefixer

с описанием того, что нужно отслеживать изменения в файле

1
css/style.css

и при добавлении в него CSS3-свойств преобразовывать их в свойства с браузерными префиксами. При этом учитывать только две последние версии браузеров и результат помещать по пути

1
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/'));
  });

Внесу в файл

1	css/style.css

CSS3-свойство

1
transform

, которое заведомо нужно использовать с префиксами (для этого я заранее “подглядел” его на “Can I Use”):

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

Запускаю задачу

1	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);
  }

Вывод в

1	build/css/style.css

красивый благодаря

1
cascade

, который можно и отключить, установив

1
cascade: false

Gulp-autoprefixer, gulp-rename, gulp-notify

September 27, 2014

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

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

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

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

VSC - explorer.compactFolders

Flattering operators

Оператор withLatestFrom