Чому 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:

<code data-language="javascript">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, який робить те саме:

<code data-language="javascript">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 набагато більш читається і компактна. до файлової системи набагато частіше, ніж Gulp, який використовує потоки, Gulp майже завжди набагато швидше, ніж Grunt. Для маленького Less-файлу виконання вищезгаданого gulpfile.js займає, як правило, близько 6 мілісекунд. Виконання gruntfile.js зазвичай займає близько 50 мілісекунд — більш ніж у вісім разів довше. Це крихітний приклад, але з великими файлами кількість часу значно зростає.