Grunt vs Gulp: Bina Araçları Savaşı

JavaScript Land’de, her şey hızlı ve ileri teknolojiyi çılgın bir hızda hareket ediyor. Modern uygulamaların çoğu, webpack’ler gibi Bundler modülleri kullanılarak Vue.js ve React gibi teknolojiler kullanılarak oluşturulur. WebPack & React kullanarak WordPress eklentilerinin nasıl geliştirileceğine dair tam bir dizimiz var. Webpack’ler sizin için birçok şey yapar ve paketleme, minifikasyon ve kaynak haritaları otomatik olarak (veya eklentilerin kullanımı yoluyla) işler, Grunt ve Gulp gibi eski okul görev koşucularını savurgan hale getirir. Ya da düşünebileceğiniz şey bu.
Ancak gerçekte, birçok proje, webpack’ler gibi tam Bundler modülleri gerektirmez, ancak yine de ön uç varlıklarını derlemenin yollarına ihtiyaç duyar. WebPack bir görev koşucusu olacak şekilde tasarlanmamıştır, bu nedenle bir paketleme modülü olmadan varlıklar oluşturacak şekilde yapılandırmak kolay değildir. Bu nedenle, Grunt ve Gulp gibi görev koşucularının hala yerleri var ve her ikisini de burada lezzetli beyinlerde geliştirdiğimiz çeşitli ürünler için bir araç olarak kullanıyoruz. Bu makalede, farklılıklarının ne olduğunu görmek ve artılar ve eksilerin her birini ön uç varlıklar için bir oluşturma aracı olarak kullandığını görmek için homurdanmayı ve yudumları göreceğiz.
Gulp vs Grunt: Fark nedir ?? Bu derleme aracındaki farkı görmeden önce, her ikisinin de aynısını yapmak için tasarlandığı belirtilmelidir: manuel olarak yapmanız gereken görevleri otomatikleştirin. Bu görevler şunları içerebilir:
CSS’ye daha az/SASS derlemesi
CSS ve JavaScript’in birleştirilmesi ve daralması
Linter kodu
Görüntüleri optimize etmek
Ünite testini çalıştırın
Daha…
Bu araçların her ikisi de ön uç varlık derlemenizi otomatikleştirmenize ve özellikle topluluğun katkıda bulunan eklentilerin kullanımı yoluyla binanızı daha tutarlı ve güvenilir hale getirmenize yardımcı olacaktır. Bu makaleyi yazarken, Grunt eklenti kayıt defteri 6.250 eklenti içerirken, GULP eklenti kayıt defteri 4000’den fazla farklı eklenti içerir. Grunt buraya yol açsa bile, miktar her ikisi için de oldukça büyük. Grunt ve Gulp nasıl çalışıyor? Grunt, JSON’a çok benzeyen bir şekilde yapılandırılmış GruntFile.js adlı bir dosyada görevi tanımlayarak çalışır. Her görev için yapılandırmayı belirleyebilirsiniz ve homurdanma sırayla çalıştırır. Bu dosyanın okunması ve anlaşılması kolaydır, bir homurdanma yapmak iki yapı aracından daha sezgisel olabilir. Öte yandan Gulp, her görev tanımını gulpfile.js adlı bir dosyada bildirilen bir JavaScript işlevi olarak yaparak “yapılandırmanın üstünde kod” ilkesine odaklanır. Gulp kodu genellikle homurdanmaktan çok daha kısadır, çünkü önceden ilgili yapılandırma yoktur (işlevler genellikle yapılandırma değerini alabilir). Daha sonra bina komut dosyalarınızı yapmak için işlevleri birlikte oluşturabilir, paralel veya seri olarak yürüyebilirsiniz.
Büyük bir avantaj, Gulp’in düğüm akışını kullanabilmesidir, bu da Gulp’in diske bir aracı dosya yazmak zorunda olmadığı anlamına gelir. Bunun sonucu, akış ve vaatlerin kullanımı nedeniyle biraz daha dik bir öğrenme eğrisine sahip olmasına rağmen, yudumun genellikle homurdanmadan çok daha hızlı olmasıdır. Gulp Gulp’i karşılaştırmak için en kolay komut dosyasını oluşturmak, her aracı kullanarak aynı bina komut dosyasını oluşturmak ve yapılandırma ve performans dosyalarını karşılaştırmaktır. Öyleyse bunu yapalım. Her ikisi de aşağıdakileri yapan GruntFile.js ve Gulpfile.js yapacağız: Sass dosyalarının CSS’ye derlenmesi
CSS ve JavaScript’i birleştirin ve azaltın
Görüntüleri optimize et
Bir yapı dosyası oluşturma adımlarına başlamadan önce, burada gerekli tüm dosyalar ve kontrol etmek istiyorsanız bazı demo içeriğiyle test ettiğimiz bir demo olarak bir repo Githeb yaptığımı göstermeliyim. İlk olarak, çalıştırabilmemiz için makinemize bir CLI homurdanmamız ve yudum kurduğumuzdan emin olun: NPM Install -g Gulp-Cli Gulp-Cli Sonraki, homurdanma ve yudum çalıştırmamız gereken paketi yükleyelim. NPM Install {Package}-Save-Dev veya Copying Pack.json’u Repo’dan ve NPM yüklemesini çalıştırarak manuel olarak yapabilirsiniz:
{“name”: “Grunt-vs-gulp”, “sürüm”: “1.0.1”, “deveDependents”: {“homurdanma”: “^1.1.0”, “Grunt-contibute-cum”: “^1.0 .1 “,” Grunt-Contibute-CSSMIN “:”^3.0.0 “,” Grunt-Contibute-Imagemin “:”^4.0.0 “,” Grunt-Contribute-Uglify “:”^4.0.1 “,” Grunt-Sass “:”^3.1.0 “,” Gulp “:”^4.0.2 “,” gulp-clean-css “:”^4.3.0 “,” gulp-cum “:”^2.6.1 ” , “Gulp-imagemin”: “^7.1.0”, “Gulp-Sass”: “^4.1.0”, “Gulp-Stats”: “0.0.4”, “Gulp-Uglify”: “^3.0.2 “,” Düğüm-Sass “:”^4.14.1 “,” Time-Grunt “:”^2.0.0 “}} Grunt için, proje kökümüzde gruntfile.js yapmamız gerekiyor.Bu şuna benziyor:
Module.Exports = Function (Grunt) {const sass = requir (‘düğüm-sass’); const mozjpeg = requir (‘Imagemin-mozjpeg’); Gerektirir (‘zaman grind’) (homurdanma); Grunt.InitConfig ({Sass: {Seçenekler: {Uygulama: Sass}, Distort: ​​{Files: {‘dist-Grunt/css/style.css’: ‘Varlıklar/stil.scss’}}}, atlama : {Css: {files: {‘dist-grunt/css/style.css’: [‘dist-grunt/css/style.css’, ‘varlıklar/css/test.css’],},}, js: {dosyalar: {‘dist-grunt/js/scripts.js’: [‘varlıklar/js/test1.js’, ‘varlıklar/js/test2.js’],},},}, cssmin: {diston: { Dosyalar: {‘dist-grunt/css/styles.min.css’: [‘dist-grunt/css/styles.css’]}}}}}, {distort: ​​{dosyalar: {‘dist-grunt/ JS/Scripts. Min.js ‘: [‘ dist-grunt/js/scripts.js ‘]}}}, Imagemin: {dynamic: {optionsitionLevel: 5, kullanım: [mozjpeg ()]}, dosyalar: [{expand: true, cwd: ‘varlıklar/img/’, src: [‘**/*. {png, jpg, gif}’], dest: ‘dist-grunt/img’}}}}}) ; Grunt.LoadnpmTasks (‘Grunt-Pass’); homurtu homurtu homurtu homurtu Grunt. registettase (‘varsayılan’, [‘sass’, ‘cum’, ‘cssmin’, ‘glify’, ‘Imagemin’]); }; Gördüğünüz gibi, homurdanma görevinin yapılandırması çok etkileyici değil, anlaşılması oldukça kolay. Ayrıca, homurdanma sırayla görevleri çalıştırdığı için, mevcut dosyalar gibi şeyler hakkında güvenli bir varsayım yapabiliriz (örneğin dist-grunt/css/style.css, görevler yapılmadan önce derlenmiştir).
Şimdi gulp için proje kökünümüzde gulpfile.js yapmamız gerekiyor. Bu şuna benziyor: const gulp = requir (‘yudum’); Const sass = requir (‘gulp-sass’); const cum = requir (‘gulp-cum’); const cleanss = requir (‘gulp-clean-css’); const gunfy = requir (‘Gulp-Uglify’); const Imagemin = Reque (‘yudum-imagemin’); Sass.comPiler = Reque (‘düğüm-sass’); Scss function () {return gulp.src (‘varlıklar/scss/**/*. Scss’). Boru (sass (). ; } function css () {return rulp.src ([‘dist-gulp/css/style.css’, ‘varlıklar/css/test.css’]). boru (‘styles.css’)). boru (Gulp. Dest (‘dist-gulp/css’)). boru (cum (‘styles.min.css’)). boru (cleancss ()). boru (gulp.dest (‘dist-gulp/css’)); } Function js () {return gulp.src (‘varlıklar/js/**/*. Js’). Boru (‘scrips.min.js’)). Pipe (giclify ()). Boru (gulp. Dest (dest ( ‘dist-gulp/js’); } işlev img () {return gulp.src (‘varlıklar/img/*’). boru (Imagemin ([Imagemin.mozjpeg ({optimizasyonLevel: 5})). img ‘))); } exports.default = gulp.paralinel (gulp.series (SCSS, CSS), JS, IMG); Gördüğünüz gibi, bu çok daha etkileyici ve çeşitli şeyleri daha mantıklı bir şekilde gruplamamıza izin verir (örneğin, CSS/JS ile ilgili tüm görevleri gruplandırma). Ayrıca Gulp akışının uygulanması nedeniyle, her görev paralel olarak gerçekleştirilebilir, bu da homurdanmadan çok daha hızlı olmasının nedeninin bir parçasıdır.
Bununla birlikte, buna dikkat etmelisiniz, çünkü herhangi bir bağımlılık zincirini kırmadığınızdan emin olmanız gerekir. Bunu önlemek için, SCSS ve CSS atamalarında olduğu gibi seri olarak gerçekleştirilecek görevi belirleyebilirsiniz. Bunu bu şekilde yaparak, CSS görevlerinin ihtiyaç duyduğunda dist-gulp/css/style.css’nin derlendiğinden emin olabiliriz. Şov şimdi bu iki senaryoyu çalıştırıp çalıştırdıktan sonra, gerçek performans nasıl? homurdanmış

Grunt görevi: 1.6 DTK
Seput görevi: 0.84 saniye