Автор статті: Анатолій Макаров

Grunt vs Gulp

Grunt і Gulp — це таск-ранери, які дозволяють фронтенд-розробникам швидко створювати веб-застосунки та автоматизувати повторювані процеси, такі як об'єднання файлів, стиснення зображень, CSS і JavaScript. Давайте розглянемо, в чому різниця між цими двома популярними інструментами.

Gulp є наймолодшим з цих двох таск-ранерів, і його розробники намагалися усунути недоліки Grunt:

  1. У Grunt завдання працюють з файлами, а не з потоками даних. Щоб розпочати нове завдання, старе повинно записати свої результати у файл. На відміну від цього, Gulp працює з потоками даних і звертається до файлової системи лише на початку або в кінці завдань.
  2. Gulp не потребує плагіна watch, оскільки має вбудовані функції для відстеження змін у файлах. Це основні функції, які повинні бути доступні в будь-якому таск-ранері без додавання додаткових плагінів.
  3. Конфігураційні файли Grunt подібні до об'єктів JSON. Але Gulp використовує код JavaScript, який є відносно простим і легшим для розуміння при роботі над великими проектами.

Тим не менш, давайте спробуємо знайти переваги та недоліки обох таск-ранерів, порівнюючи їх поріг навчання, швидкість, продуктивність та плагіни.

Grunt vs Gulp: поріг навчання

Порівнюючи ці таск-ранери за їхньою складністю навчання, очевидно, що Grunt легший у використанні для початківців. Але це двосічний меч — конфігурації Grunt важче читати на великих проектах. Gulp є більш збалансованим у цьому відношенні: як тільки ви освоїте основи, легко як писати, так і читати завдання. З іншого боку, якщо ви достатньо практикувалися з Grunt, ви не помітите великої різниці між роботою над великими та малими проектами.

Ось приклад файлу Grunt для мінімізації HTML:

require('load-grunt-tasks')(grunt);// npm install --save-dev load-grunt-tasks 
 
grunt.initConfig({
    minifyHtml:{
        options:{
            cdata:true},
        dist:{
            files:{'dist/index.html':'src/index.html'}}}});
 
grunt.registerTask('default',['minifyHtml']);

Ось приклад файлу Gulp для мінімізації HTML:

// включення плагінівvar gulp = require('gulp'), minifyHtml = require("gulp-minify-html");
 
// завдання
gulp.task('minify-html',function(){
    gulp.src('./Html/*.html')// шлях до ваших файлів
    .pipe(minifyHtml())
    .pipe(gulp.dest('path/to/destination'));});

У Grunt завдання налаштовуються в об'єкті конфігурації всередині файлу Grunt, тоді як у Gulp вони пишуться з використанням синтаксису, подібного до Node.

Grunt vs Gulp: продуктивність

Gulp використовує концепцію потоків. Файли проходять через "трубопровід". У різних його частинах виконуються різні дії:

Gulp flow

Наприклад, використовуючи цю концепцію, ви можете вставити всі JavaScript-файли в трубопровід скриптів, які:

  1. Об'єднує всі файли разом.
  2. Видаляє console та debugger.
  3. Мінімізує код.
  4. Зберігає отриманий код у заздалегідь визначеній директорії.

Для виконання цих дій Grunt використовує обгорткову функцію. Для багатопотоковості та кешування файлів вам потрібно встановити додаткові плагіни під назвою grunt-concurrent та grunt-newer:

npm install grunt-concurrent --save-dev
npm install grunt-newer --save-dev

У Grunt файли обробляються наступним чином: запускається задача, створюється тимчасовий файл, виконується задача з цим тимчасовим файлом. Для виконання тієї ж роботи Gulp не створює непотрібних проміжних файлів і використовує один потік для операцій введення/виведення. Крім того, Gulp дозволяє запускати кілька синхронних задач, використовуючи один з наступних способів (але слід пам'ятати про залежності задач):

  1. Передача callback.
  2. Повернення потоку.
  3. Повернення promise.

Іншими словами, якщо ви працюєте з великою кількістю файлів, Gulp допоможе покращити загальну продуктивність, оскільки не буде витрачено час на читання/запис файлів між збірками задач.

Плагіни

Gulp має менше плагінів, ніж Grunt (1886 та 5246 відповідно). Але ця різниця, ймовірно, викликана тим, що Gulp молодший. Ось кілька плагінів Grunt, які допомагають фронтенд-розробникам оптимізувати їхній робочий процес:

grunt-contrib-watch — запускає задачі, коли змінюються спостережувані файли.

grunt-contrib-jshint — перевіряє файли JavaScript.

grunt-mocha — використовується для тестування з фреймворком Mocha.

grunt-notify — автоматично показує повідомлення у разі помилки задачі.

grunt-contrib-uglify — мінімізує файли за допомогою UglifyJS.

Усі вони також доступні для Gulp. Gulp також має плагін gulp-grunt для запуску Grunt-файлів. Замість створення потоку він викликається як аргумент:

var gulp = require('gulp');
require('gulp-grunt')(gulp);// додає всі задачі з gruntfile до gulp 
 
// продовжуйте визначати задачі... 
gulp.task('do-this',function(){
  ...
});
 
// запускайте їх як будь-яку іншу задачу 
gulp.task('default',[// запускайте повні задачі grunt 'grunt-minify','grunt-test',// або запускайте конкретні цілі 'grunt-sass:dist','grunt-browserify:dev']);

Отже, враховуючи вище згадані відмінності, який таск-раннер обрати: Grunt чи Gulp? По-перше, ми не рекомендуємо вам переходити на Gulp з Grunt або навпаки лише тому, що хтось намагається переконати вас, що один з них має великі переваги над іншим. Різниця між Grunt та Gulp не така вже й велика.

По-друге, при виборі між Grunt JS та Gulp JS вам слід врахувати ваші власні потреби. Grunt простий у використанні, і з ним вам не потрібно занурюватися в складну систему конвеєрів. Простим задачам також легко зрозуміти. З іншого боку, Grunt є повноцінним продуктом з великою кількістю плагінів. У той же час, він має свої недоліки, наприклад, занадто складні конфігураційні файли, які важко читати. Він також сповільнюється при роботі з великою кількістю файлів через постійні операції введення/виведення.

Gulp дуже гнучкий і вже має всі основні плагіни, які доступні для Grunt. Ви можете запускати синхронні задачі з ним — це дуже зручно при роботі з великою кількістю файлів. Але якщо ви новачок у NodeJS, ви можете зіткнутися з деякими труднощами під час використання потоків.

Як ви можете бачити, вибір між Grunt і Gulp — це питання особистих вподобань. Але якщо ви ніколи раніше не працювали з JavaScript task runners, подивіться на наведене вище порівняння ще раз — це допоможе вам обрати ваш інструмент.

Потрібна розробка MVP, iOS і Android застосунків або прототипування? Ознайомтеся з нашим портфоліо та замовте сьогодні!