Почему Gulp?

Как уже упоминалось, Gulp является одним из немногих инструментов сборки, доступных на JavaScript. Также есть и другие инструменты сборки, написанные не на JavaScript, тот же Rake. Почему вы должны выбрать Gulp?

Два наиболее популярных инструментов сборки на JavaScript — это Grunt и Gulp. Grunt был весьма популярен в 2013 году и полностью изменил подход к разработке сайтов. Для Grunt существует тысячи плагинов, которые делают всё — от анализа, минимизации и объединения кода до установки пакетов через Bower и запуска Express-сервера. Этот подход сильно отличается от Gulp, у него есть только плагины для выполнения мелких индивидуальных задач, которые что-то делают с файлами. Поскольку задачи это всего-лишь программы на JavaScript (в отличие от большого объекта, который использует Grunt), то вам не нужен плагин — вы можете просто запустить Express-сервер обычным путём.

Задачи Grunt, как правило, содержат больше настроек, требуют большой объект, содержащий свойства, о которых вы на самом деле не хотите заботиться. В то же время аналогичная задача Gulp может занять всего несколько строк. Давайте взглянем на простой gruntfile.js, который определяет задачу css для преобразования Less в CSS, а затем запускает для него Autoprefixer:

grunt.initConfig({
  less: {
    development: {
      files: {
        "build/tmp/app.css": "assets/app.less"
      }
    }
  },

  autoprefixer: {
    options: {
      browsers: ['last 2 version', 'ie 8', 'ie 9']
    },
    multiple_files: {
      expand: true,
      flatten: true,
      src: 'build/tmp/app.css',
      dest: 'build/'
    }
  }
});
  
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-autoprefixer');
  
grunt.registerTask('css', ['less', 'autoprefixer']);

Сравните это с файлом gulpfile.js, который делает то же самое:

var gulp = require('gulp'),
    less = require('gulp-less'),
    autoprefix = require('gulp-autoprefixer');
  
gulp.task('css', function () {
  gulp.src('assets/app.less')
    .pipe(less())
    .pipe(autoprefix('last 2 version', 'ie 8', 'ie 9'))
    .pipe(gulp.dest('build'));
});

Версия gulpfile.js гораздо более читаемая и компактная.

Поскольку Grunt обращается к файловой системе гораздо чаще, чем Gulp, который использует потоки, то Gulp почти всегда намного быстрее, чем Grunt. Для маленького Less-файла выполнение упомянутого выше gulpfile.js занимает, как правило, около 6 миллисекунд. Выполнение gruntfile.js обычно занимает около 50 миллисекунд — более чем в восемь раз дольше. Это крошечный пример, но с большими файлами количество времени значительно возрастает.