В статье рассмотрены три модуля для работы под 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).
Помимо этого, модуль 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
.
Комментарии