В предыдущей статье “Gulp - знакомство и первый запуск”” мы познакомились с установкой менеджера Gulp и запуском первой задачи под него. В этой статье мы перейдем к еще более интересному материалу, в котором узнаем, как устанавливать и запускать плагины под Gulp на примере одного из них - gulp-uglify.

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

Каждый из плагинов - это код, решающий только одну задачу. Например, один плагин умеет сжимать изображения, другой сжимает js-файлы, третий сжимает css-файлы; еще один умеет компилировать scss-файлы в css-файлы. И так далее - список можно продолжать и продолжать.

Становиться понятно, что для конкретной задачи нам нужно установить нужный плагин и создать задачу (task) в файле

1
gulpfile.js
. А затем запустить Gulp на выполнение этой задачи. Конечно, задач может быть не одна, а несколько. Все зависит о того, какие именно задачи нам необходимо выполнять.

Давайте рассмотрим процесс установки плагинов и настройки задач на примере одного из них -

1
gulp-uglify
. Данный плагин служит для минификации js-файлов - он удаляет пробелы, запятые, точки с запятой. В результате js-файл получается меньшим по размеру.

Все плагины под Gulp размещены по этому адресу - Gulp Plugins. В строке поиска нужно вводить имя искомого плагина, в результате получаем (или не получаем) страницу с описанием плагина и командой для его установки.

Устанавливаем gulp-uglify под Gulp

На странице плагина gulp-uglify описана команда установки этого плагина, которую мы повторим для себя, в своем проекте:

$ npm install --save-dev gulp-uglify

Опять таки, ключ

1
--save-dev
“говорит” менеджеру
1
npm
добавить плагин
1
gulp-uglify
в качестве зависимости в файл
1
package.json
:

$ cat package.json
{
  "name": "first",
  "version": "0.0.1",
  "devDependencies": {
    "gulp": "~3.8.7",
    "gulp-uglify": "~0.3.1"
  }
}

Создаем задачу gulp-uglify под Gulp

Плагин

1
gulp-uglify
установлен и теперь самое время прописать в файле
1
gulpfile.js
именованную задачу (named task) под него. Надеюсь, уважаемый читатель помнит о двух типах задач под Gulp, описанных в предыдущей статье “Gulp - знакомство и первый запуск”.

Открываем файл

1
gulpfile.js
в редакторе кода (у меня это Sublime Text) и вносим туда следующие строки:

var gulp = require('gulp'),
    uglify = require('gulp-uglify');
...
// Gulp Uglify
gulp.task('gulp-uglify', function(){
  gulp.src('js/*.js')
  .pipe(uglify())
  .pipe(gulp.dest('build/js'))
});

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

Но это не главное. Важнее разобраться, что из себя представляет каждая из этих строк. Так вот, строка

1
uglify = require('gulp-uglify')
- это создание переменной с именем
1
uglify
, в которую помещается плагин
1
gulp-uglify
. Обратите внимание на синтаксис этой строки и ее табуляцию - оба аспекта важны и их несоблюдение приведет к тому, что Gulp не будет работать. По большому счету, можно написать и так -
1
var uglify = require('gulp-uglify');
, но предыдущая запись является более правильной.

Далее идут строки для новой именованной задачи для Gulp. Имя задачи задаем произвольно и пусть оно будет таким -

1
gulp-uglify
. В теле callback-функции пропишем директорию, содержимое которой Gulp должен отслеживать -
1
gulp.src('js/*.js')
. В данном случае указываем, что Gulp должен следить за изменениями всех файлов с расширением .js, расположенных внутри директории
1
js
.

Следующая строка

1
.pipe(uglify())
получает в виде потока содержимое директории
1
js
и обрабатывает его с помощью плагина
1
gulp-uglify
, помещенного внутрь переменной
1
uglify
. Результат обработки передается в виде потока в строку
1
.pipe(gulp.dest('build/js'))
, которая сохраняет его по пути
1
build/js
.

Вот мы и разобрали суть задачи в Gulp! Ведь ничего сложного, правда?!

Запускаем задачу gulp-uglify в Gulp

Переходим от слов к делу и запустим на выполнение только что созданную нами задачу

1
gulp-uglify
. Не забываем, что именованные задачи в Gulp запускаются с указанием их имени:

$ gulp gulp-uglify
[21:47:43] Using gulpfile ~/Projects/gulp_test/gulpfile.js
[21:47:43] Starting 'gulp-uglify'...
[21:47:43] Finished 'gulp-uglify' after 12 ms

Вуаля! Видим (по аналогии с предыдушим опытом запуска дефолтной задачи), что именованная задача

1
gulp-uglify
успешно запустилась, выполнилась за 12 миллисекунд и также успешно завершилась. По идее, теперь по пути
1
build/js
у нас должен располагаться минифицированный js-файл (в моем случае это был
1
jquery-1.11.1.js
).

Посмотрим и видим, что так оно и есть, файлик

1
jquery-1.11.1.js
помещен туда, куда мы и прописывали:

$ ls build/js/
jquery-1.11.1.js

А точно ли он минифицированный? Это легко проверить - открываем его в Sublime Text и наблюдаем такую картину:

Минифицированный с помощью gulp-uglify файл в Gulp

Полезные плагины под Gulp

Мы успешно установили и запустили плагин под Gulp - можно в очередной раз поздравить себя! В данном случае это был плагин

1
gulp-uglify
для минификации js-файлов.

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

1
gulp-uglify
.

Ниже я приведу примерный список наиболее полезных плагинов под Gulp, существующих на сегодняшний день:

  • 1
    
    gulp-minify-html
    
    // минификация HTML-файлов
  • 1
    
    gulp-minify-css
    
    // минификация CSS-файлов
  • 1
    
    gulp-csso
    
    // еще один плагин минификации CSS-файлов
  • 1
    
    gulp-uglify
    
    // минификация JS-файлов
  • 1
    
    gulp-sass
    
    // компиляция SCSS-файлов в CSS-файлы
  • 1
    
    gulp-ruby-sass
    
    // компиляции SCSS-файлов в CSS-файлы, более стабильный
  • 1
    
    gulp-concat
    
    // конкатенация (соединение нескольких файлов в один файл)
  • 1
    
    gulp-jshint
    
    // ???
  • 1
    
    gulp-livereload
    
    // запуск плагина LiveReload
  • 1
    
    gulp-watch
    
    // мониторинг файлов в фоновом режиме в Gulp
  • 1
    
    gulp-notify
    
    // вывод окна с уведомлением о событиях в Gulp
  • 1
    
    gulp-imagemin
    
    // сжатие изображений в Gulp
  • 1
    
    gulp-rename
    
    // переименование файлов в Gulp
  • 1
    
    gulp-plumber
    
    // настройка обработки ошибок в Gulp

Mangling Angular

Angular Builder поддерживает параметры среды:- NG_BUILD_MANGLE- NG_BUILD_MINIFY- NG_BUILD_BEAUTIFYМожно установить их при запуске скрипта...… Continue reading

Constructor parameter without access modifier

Published on February 04, 2024

RxJs and DestroyRef Provider

Published on January 24, 2024