Чтобы ответить на этот вопрос, сначала нам нужно знать, что такое Task runner. Так,

Что такое средство выполнения задач?

При создании и развертывании интерфейсного приложения возникает множество задач. Такие задачи, как отслеживание изменений в файлах, объединение и минимизация файлов, таких как JavaScript и CSS, префикс файлов для разных браузеров и линтинг. Инструменты, используемые для автоматизации этих задач, — это Task Runners. До появления средств выполнения задач эти задачи выполнялись с помощью сценариев оболочки в терминале или командной строке. Недостатком использования сценариев оболочки в таких случаях является то, что это было бы невозможно в случае большого количества файлов или нескольких задач. Кроме того, использование сценариев оболочки потребует от программиста переключения между языками, что потребует больше времени. Итак, используются средства запуска задач, такие как Grunt и Gulp.

Зачем использовать Task Runner?

Теперь мы можем подумать, зачем нам нужно выполнять эти задачи. Возьмем пример; Веб-страница содержит 20 файлов JavaScript (см. рисунок ниже) и 20 связанных с ней файлов CSS. Для каждой ссылки веб-страница отправляет запрос на сервер. 40 запросов только для загрузки одной веб-страницы. Если одну и ту же страницу загружают тысячи людей, представьте нагрузку на сервер. В этом случае нам нужно минимизировать связанные с ним файлы JavaScript, CSS или SCSS. Проще говоря, объедините эти файлы в один файл без пробелов. В сообществе разработчиков он также известен как uglify. Если мы это сделаем, странице нужно будет отправить только один запрос на файл JavaScript вместо 20 и только 1 CSS для этих 20 файлов CSS.

Точно так же все остальные задачи выполняются таким же образом для повышения производительности и эффективности. Теперь возникает вопрос, Gulp или Grunt?

Почему глоток?

Хотя и Grunt, и Gulp могут выполнять одну и ту же задачу, между ними есть несколько существенных различий.

  • GulpПлагины могут одновременно выполнять только одну задачу, тогда как Gruntплагины могут выполнять несколько задач одновременно. то же время. Это может сбить с толку новых разработчиков при реализации плагинов. Кроме того, Gulp обеспечит большую читабельность, поскольку один плагин делает только одну вещь.
  • Gruntвыполняет задачи, преобразовывая файлы и сохраняя их как новые во временных папках. Выходные данные одной задачи используются в качестве входных данных для другой до тех пор, пока выходные данные не будут опубликованы в папке назначения. Этот подход включает множество входных и выходных вызовов и создание множества временных файлов. Принимая во внимание, что Gulp выполняет потоковую передачу через файловую систему и не требует каких-либо временных местоположений, что уменьшает количество входных и выходных вызовов, тем самым повышая производительность.
  • В Grunt файлы конфигурации необходимы для выполнения задачи. Но для gulp требуется только файл сборки.
  • Каждый плагин в Grunt должен быть настроен так, чтобы он соответствовал местоположению ввода выходных данных предыдущего плагина, которые будут использоваться в качестве входных данных для другого плагина. В Gulp подключаемые модули являются конвейерными.
  • См. следующий подход к объединению файлов в Grunt и Gulp.

Вот как в Grunt выполняется задача объединения JavaScript и CSS.

Вот как та же задача выполняется в Gulp

Как мы видим, gulp не требует предварительной настройки с указанием источника и назначения, как в grunt. Таким образом, gulp позволяет чрезвычайно легко вписать другой код в определение задачи. Например:

gulp.task('shout', function(){
    //Code from other JavaScript file
    var sum = 0
    sum = sum + 10;
    console.log(sum);
});

«shout» содержит код функции, которую мы можем определить в любой другой функции JavaScript. Пока, просто для демонстрации, я использовал демо-функцию.

Вывод

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

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



Что такое Gulp? и как его использовать?
Gulp — это набор инструментов JavaScript с открытым исходным кодом, созданный Fractal Innovations. Это средство запуска задач, построенное на Node.js и…medium.com