Grunt vs Gulp: İnşa Araçları Savaşı

JavaScript ülkesinde işler hızla ilerliyor ve teknoloji çılgın bir hızla ilerliyor. Çoğu modern uygulama, Vue.js ve React gibi teknolojiler kullanılarak oluşturulur ve Webpack gibi modül paketleyicilerinden yararlanılır.

Webpack & React kullanarak bir WordPress eklentisinin nasıl geliştirileceğine dair eksiksiz bir serimiz var. Webpack sizin için çok şey yapar ve gruplama, küçültme ve kaynak haritalar gibi şeyleri otomatik olarak (veya eklentilerin kullanımı yoluyla) hallederek Grunt ve Gulp gibi eski usul görev yürütücülerini gereksiz kılar. Ya da öyle düşünebilirsiniz.

Ancak gerçekte, birçok proje Webpack gibi tam gelişmiş bir modül paketleyici gerektirmez, ancak yine de ön uç varlıklarını derlemek için bir yola ihtiyaç duyar. Webpack, bir görev yürütücüsü olarak tasarlanmamıştır ve bu nedenle, modülleri bir araya getirmeden varlıklar oluşturmak için onu yapılandırmak kolay değildir. Bu yüzden Grunt ve Gulp gibi görev koşucularının hala yeri var ve biz her ikisini de burada, Delicious Brains'te geliştirdiğimiz farklı ürünler için yapım araçları olarak kullanıyoruz.

Bu makalede, farklılıklarının ne olduğunu görmek için hem Grunt hem de Gulp'a göz atacağız ve her birini ön uç varlıklar için bir oluşturma aracı olarak kullanmanın artılarına ve eksilerine bakacağız.

Gulp vs Grunt: Nasıl farklılar?

Bu oluşturma araçlarının nasıl farklı olduğuna bakmadan önce, ikisinin de aynı şeyi yapmak üzere tasarlandığını belirtmekte fayda var: aksi takdirde manuel olarak yapmanız gereken görevleri otomatikleştirin. Bu görevler şunları içerebilir:

• Less/Sass'ı CSS'ye Derleme
• CSS ve JavaScript'i birleştirme ve küçültme
• Linting kodu
• Görüntüleri optimize etme
• Çalışan birim testleri
• Daha fazla…

Bu araçların her ikisi de ön uç varlıklarınızın derlenmesini otomatikleştirmenize ve özellikle topluluk tarafından sağlanan eklentilerin kullanımı yoluyla yapılarınızı daha tutarlı ve güvenilir hale getirmenize yardımcı olacaktır. Bu makaleyi yazarken, Grunt eklenti kaydı 6.250 eklenti içerirken, Gulp eklenti kaydı 4000'den fazla farklı eklenti içeriyordu. Her ne kadar Grunt burada başı çekse de, her ikisi için de hatırı sayılır bir miktar.

Grunt ve Gulp nasıl çalışır?

Grunt, görevleri JSON'a çok benzer bir şekilde yapılandırılmış Gruntfile.js adlı bir dosyada tanımlayarak çalışır. Her görev için yapılandırmayı belirtebilirsiniz ve Grunt bunları sırayla çalıştıracaktır. Bu dosyanın okunması ve anlaşılması kolaydır, bu da Grunt'u muhtemelen iki oluşturma aracından daha sezgisel hale getirir.

Gulp ise, her görev tanımını Gulpfile.js adlı bir dosyada bildirilen bir JavaScript işlevi yaparak “yapılandırma üzerinden kod” ilkesine odaklanır. Gulp kodu genellikle Grunt'unkinden çok daha kısadır çünkü önceden herhangi bir yapılandırma söz konusu değildir (ancak işlevler normalde yapılandırma değerleri alabilir). Ardından, yapı komut dosyanızı oluşturmak için paralel veya seri olarak çalışan işlevleri birbirine zincirleyebilirsiniz.

Büyük bir avantaj, Gulp'un düğüm akışlarını kullanabilmesidir, yani Gulp'un ara dosyaları diske yazması gerekmez. Bunun sonucu olarak, akışların ve vaatlerin kullanımı nedeniyle biraz daha dik bir öğrenme eğrisine sahip olabilmesine rağmen, Gulp genellikle Grunt'tan çok daha hızlıdır.

Komut Dosyalarını Oluşturma

Grunt ile Gulp'u karşılaştırmanın en kolay yolu, her aracı kullanarak aynı derleme komut dosyasını oluşturmak ve yapılandırma dosyalarını ve performansı karşılaştırmaktır. Öyleyse yapalım.

Her ikisi de aşağıdakileri yapan bir Gruntfile.js ve bir Gulpfile.js oluşturacağız:

• Sass dosyasını CSS'ye derleyin
• CSS ve JavaScript'i birleştirme ve küçültme
• Görüntüleri optimize edin

Derleme dosyalarını oluşturma adımlarına başlamadan önce, burada test ettiğimiz şeyin bir demosu olarak bir GitHub deposu oluşturduğumu belirtmeliyim, kontrol etmek isterseniz gerekli tüm dosyalar ve bazı demo içeriği ile.

Öncelikle, çalıştırabilmemiz için makinemizde hem Grunt hem de Gulp CLI'lerinin kurulu olduğundan emin olun:

 npm install -g grunt-cli gulp-cli

Ardından hem Grunt hem de Gulp'un çalışması için ihtiyacımız olan paketleri kuralım. Bunu, npm install {package} --save-dev çalıştırarak veya package.json dosyasını depodan kopyalayarak ve yalnızca npm install çalıştırarak manuel olarak yapabilirsiniz:

 { "name": "grunt-vs-gulp", "version": "1.0.1", "devDependencies": { "grunt": "^1.1.0", "grunt-contrib-concat": "^1.0.1", "grunt-contrib-cssmin": "^3.0.0", "grunt-contrib-imagemin": "^4.0.0", "grunt-contrib-uglify": "^4.0.1", "grunt-sass": "^3.1.0", "gulp": "^4.0.2", "gulp-clean-css": "^4.3.0", "gulp-concat": "^2.6.1", "gulp-imagemin": "^7.1.0", "gulp-sass": "^4.1.0", "gulp-stats": "0.0.4", "gulp-uglify": "^3.0.2", "node-sass": "^4.14.1", "time-grunt": "^2.0.0" } }

Grunt için projemizin kökünde bir Gruntfile.js oluşturmamız gerekiyor. Şuna benziyor:

 module.exports = function (grunt) { const sass = require('node-sass'); const mozjpeg = require('imagemin-mozjpeg'); require('time-grunt')(grunt); grunt.initConfig({ sass: { options: { implementation: sass }, dist: { files: { 'dist-grunt/css/style.css': 'assets/scss/style.scss' } } }, concat: { css: { files: { 'dist-grunt/css/styles.css': [ 'dist-grunt/css/style.css', 'assets/css/test.css' ], }, }, js: { files: { 'dist-grunt/js/scripts.js': [ 'assets/js/test1.js', 'assets/js/test2.js' ], }, }, }, cssmin: { dist: { files: { 'dist-grunt/css/styles.min.css': ['dist-grunt/css/styles.css'] } } }, uglify: { dist: { files: { 'dist-grunt/js/scripts.min.js': ['dist-grunt/js/scripts.js'] } } }, imagemin: { dynamic: { options: { optimizationLevel: 5, use: [mozjpeg()] }, files: [{ expand: true, cwd: 'assets/img/', src: ['**/*.{png,jpg,gif}'], dest: 'dist-grunt/img' }] } } }); grunt.loadNpmTasks('grunt-sass'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.registerTask('default', ['sass', 'concat', 'cssmin', 'uglify', 'imagemin']); };

Gördüğünüz gibi Grunt görevlerinin konfigürasyonu çok anlamlı değil ama anlaşılması oldukça kolay. Ayrıca Grunt, görevleri sırayla çalıştırdığı için, mevcut dosyalar gibi şeyler hakkında güvenli varsayımlar yapabiliriz (örn. dist-grunt/css/style.css , concat görevini çalıştırmadan önce derlenmiştir).

Şimdi Gulp için projemizin kökünde bir Gulpfile.js oluşturmamız gerekiyor. Şuna benziyor:

 const gulp = require('gulp'); const sass = require('gulp-sass'); const concat = require('gulp-concat'); const cleanCSS = require('gulp-clean-css'); const uglify = require('gulp-uglify'); const imagemin = require('gulp-imagemin'); sass.compiler = require('node-sass'); function scss() { return gulp.src('assets/scss/**/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('dist-gulp/css')); } function css() { return gulp.src([ 'dist-gulp/css/style.css', 'assets/css/test.css' ]) .pipe(concat('styles.css')) .pipe(gulp.dest('dist-gulp/css')) .pipe(concat('styles.min.css')) .pipe(cleanCSS()) .pipe(gulp.dest('dist-gulp/css')); } function js() { return gulp.src('assets/js/**/*.js') .pipe(concat('scripts.min.js')) .pipe(uglify()) .pipe(gulp.dest('dist-gulp/js')); } function img() { return gulp.src('assets/img/*') .pipe(imagemin([ imagemin.mozjpeg({optimizationLevel: 5}) ])) .pipe(gulp.dest('dist-gulp/img')); } exports.default = gulp.parallel(gulp.series(scss, css), js, img);

Gördüğünüz gibi, çok daha anlamlı ve işleri daha mantıklı bir şekilde gruplandırmamıza izin veriyor (örneğin, CSS/JS ile ilgili tüm görevleri gruplama). Ayrıca Gulp'un akış uygulaması nedeniyle, her görev Grunt'tan çok daha hızlı olmasının nedeninin bir parçası olan paralel olarak çalıştırılabilir.

Ancak, herhangi bir bağımlılık zincirini kırmadığınızdan emin olmanız gerektiğinden buna dikkat etmeniz gerekir. Bunu önlemek için scss ve css görevlerinde yaptığımız gibi seri olarak çalıştırılacak görevleri tanımlayabilirsiniz. Bunu bu şekilde yaparak, css görevi ihtiyaç duyduğunda dist-gulp/css/style.css zaten derlendiğinden emin olabiliriz.

Verim

Şimdi bu derleme komut dosyalarının her ikisi de çalışır durumda olduğuna göre, gerçekte nasıl performans gösterirler?

Homurtu

Yudum

• Grunt Görevleri: 1,6 saniye
• Gulp Görevleri: 0.84 saniye

Bu sonuçlar şaşırtıcı değil (Gulp'un daha hızlı olmasını beklediğimiz gibi) ancak Gulp'un Grunt'a göre ne kadar hızlı olduğunu gösteriyor.

Bizimki gibi küçük bir projede ~800 milisaniyelik bir fark çok önemli olmayabilir. Ancak, hız farkının arttığı ve Grunt'un toplamda çok, çok daha yavaş olduğu daha büyük projeler için.

Karar

Öyleyse Grunt mu yoksa Gulp mu kullanmalısınız? Bütün bunlarda olduğu gibi, "doğru" veya "yanlış" bir cevap yoktur – bu gerçekten kişisel tercihlere bağlıdır. Bu, bağlama ve neyle rahat olduğunuza bağlıdır. Özet olarak, her araç için bazı artıları ve eksileri burada bulabilirsiniz:

Homurtu

Artıları

• Öğrenmesi ve yapılandırması kolay
• Çok sayıda eklentiye sahip olgun topluluk

Eksileri

• Daha büyük projeler için kırılgan hale gelebilir
• Gulp'tan daha yavaş

Yudum

Artıları

• Akış kullanımı nedeniyle çok daha hızlı
• Etkileyici doğası nedeniyle daha esnek

Eksileri

• Daha dik öğrenme eğrisi

Şahsen, bu günlerde ilk uğrak limanım olarak Gulp'a gitme eğilimindeyim, ancak bu Gulp'un mutlaka daha iyi bir seçenek olduğu anlamına gelmiyor. Grunt topluluğu hala güçleniyor ve her iki araç da bir süre daha buralarda olacak gibi görünüyor.

Grunt ve Gulp gibi görev yürütücülere yeni ve gelecek bir alternatifin, komut satırı araçlarıyla npm betiklerini kullanmak olduğunu belirtmeliyim. Grunt/Gulp yöntemiyle çalışmasını sağlamak için araçları eklentilere sarmak yerine, araçları kendiniz çalıştırın ve bir yapı zinciri oluşturmak için npm komut dosyalarını kullanın.

Ön uç varlıklarınızı derlemek için Grunt veya Gulp gibi bir görev çalıştırıcı kullanıyor musunuz? Grunt/Gulp'u tercih ediyor musunuz, öyleyse neden? İyi bir derleme ipucu var mı? Yorumlarda bize bildirin.