Gulp-autoprefixer, gulp-rename, gulp-notify

Reading time ~10 minutes

В статье рассмотрены три модуля для работы под 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 и укажем

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

В задаче под именем

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

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

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

Затем создаю задачу

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

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

1
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 с дефолтной задачей

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

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

1
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
.


MongoDB - создание документа

![MongoDB]({{site.url}}/images/uploads/2017/05/mongodb-logo.jpg "MongoDB")Приступили к самому основному - операциям создания, чтения, изм...… Continue reading

MongoDB - документы

Published on May 23, 2017