Gulp ile JavaScript Otomasyonuna Giriş

Web geliştiricileri olarak bazen kendimizi aynı sıkıcı görevleri tekrar tekrar yaparken buluyoruz. Bir derleme komutu çalıştırarak veya tarayıcınızda yenile'ye basarak ne kadar zaman kaybettiğinizi düşünürseniz, çok fazla zaman kazanabileceğinizi fark edeceksiniz. Ek olarak, süreçlerinizi otomatikleştirerek, geçici olarak “bölgeyi” (üretkenlik durumunuzu) terk etmek yerine eldeki göreve odaklanabilirsiniz.

Bu JavaScript otomasyon eğitiminde, tasarım ve geliştirme sürecinizi Gulp ile nasıl otomatikleştireceğinizi öğreneceksiniz. Daha tasarım odaklıysanız, sahip olduğunuz tüm korkuların üstesinden gelmenizi ve okumaya devam etmenizi öneririm. Öte yandan, eğer bir geliştiriciyseniz, arkasındaki mantığı anladıktan sonra bunu baştan sona gözden geçirebileceksiniz.

Gulp, otomasyona eşzamansız bir kaynak-hedef yaklaşımı uygulamak için Node.js'nin akışlarını kullanan bir yapı sistemidir. Her şey JavaScript'te yazılmıştır, bu nedenle orta düzeyde kodlama bilgisine sahip herkesin başlaması kolaydır. Bir Gulp oluşturma süreci, bir dizi izleyici ve görevden oluşur. Ek olarak, Gulp'un arkasındaki topluluk, npm içinde JavaScript'i birleştirmekten SVG'lerden simge yazı tipleri oluşturmaya kadar her türlü görevi gerçekleştirmeye yardımcı olan büyük bir eklenti dizini tutar.

Gulp için Alternatifler

Çoğu son birkaç yılda ortaya çıkan birçok alternatif var - en dikkate değer olanı Grunt. Gulp ve Grunt arasındaki rekabetin hiçbir zaman net bir kazananı olmayacak, çünkü ikisinin de artıları ve eksileri var, bu yüzden bu konuya derinlemesine girmekten kaçınacağım. Özetle, Grunt'un yapılandırmaya olan yoğun bağımlılığı, insanları Gulp'un JavaScript yaklaşımına yönlendiren şeydir. Bu arada, Koala gibi yerel GUI uygulamaları, çoğunlukla kodlamaya girmekten kaçınan kişilerden bir miktar zemin kazandı. Ancak paket uygulamalarla Gulp'un sunduğu özelleştirilebilirlik ve genişletilebilirlik düzeyine ulaşmak imkansız.

Proses Otomasyonu Temelleri

Eklentiler

Eklentiler, gulp'in her işlemi gerçekleştirmesi için kullanılan araçlardır. Eklentiler npm aracılığıyla kurulur ve "require" kullanılarak başlatılır.

Görevler

Gulp için görevlerin her zaman bir kaynağı ve bir hedefi vardır. Bunların arasında, her bir eklentiyi çağıran ve dönüştürülen sonuçları bir sonraki boruya veren borular bulunur.

Küreler

Küreler, dosyalara atıfta bulunan joker karakter kalıplarıdır. Glob'lar veya glob dizileri, görev kaynağında girdi olarak kullanılır.

gözlemciler

İzleyiciler, değişiklikler için kaynak dosyaları izler ve bir değişiklik algılandığında görevleri çağırır.

gulpfile.js

Bu, "gulp" komutunun işaret ettiği JavaScript dosyasıdır. Görevlerden izleyicilere veya görevler tarafından kullanılan diğer kod parçalarına kadar her şeyi içerir.

Basit Bir Görev

Başlamak için Node.js'ye ve yönetici erişimine sahip bir komut satırı kabuğuna ihtiyacınız var. Node.js'yi buradan indirebilirsiniz. Kurulduktan sonra, npm'nin güncel olduğundan emin olmak için aşağıdaki komutu çalıştırabilirsiniz.

 sudo npm install npm -g

-g bayrağı, kurulumun genel olacağını belirtir.

Artık Gulp'u kurmaya ve bazı basit görevleri çağırmaya hazırsınız. Gulp'u global olarak kurmak için aşağıdaki komutu kullanın.

 sudo npm install gulp -g

Güncellemek için aynı komutu da kullanabileceğinizi unutmayın.

İlk görevinizde size yardımcı olacak başlangıç ​​setini toptal-gulp-tutorial/step1'den indirebilirsiniz. SCSS dosyalarını CSS'ye derleyen çok basit bir görev içerir. Libsass kullanan gulp-sass eklentisini kullanıyor. Bazı işlevselliklerinden yoksun olmasına rağmen, Ruby alternatifinden çok daha hızlı olduğu için burada libsass'ı seçtim. Projenizin kök dizinine girdikten sonra, gerekli tüm eklentileri yüklemek için aşağıdaki komutu kullanabilirsiniz.

 npm install

Bu komut package.json dosyasını okur ve gereken tüm bağımlılıkları kurar. Burada aşağıdakiler için bir kısayol olarak "npm install" kullanıyoruz:

 npm install gulp --save-dev npm install gulp-sass --save-dev

“–save-dev” bayrağı, seçilen eklentileri package.json devDependencies dosyasına ekler, böylece bir sonraki her şeyi kurmak istediğinizde kullanışlı “npm kurulumunu” kullanabilirsiniz.

Bu noktada ilk görevinizi çalıştırabilirsiniz. Aşağıdaki komutu çalıştırın ve /scss klasöründeki tüm SCSS dosyalarının ilgili dizinde CSS'ye derlenmesini izleyin:

 gulp scss

Bu örnekte çalıştırılacak görevi belirlediğimizi unutmayın. Görev adını atlamış olsaydık, “varsayılan” olarak adlandırılan çalıştırılırdı.

Kod İncelemesi

Yukarıdakiler yalnızca 7 satır JavaScript kodunda gerçekleştirilir. Elbette sadeliğini kavradığınızda kendinizi evinizde hissedeceksiniz:

 var gulp = require('gulp'); var scss = require('gulp-sass');

Başlangıçta kullanacağımız tüm eklentileri başlatıyoruz. Gulp, onsuz yapamayacağımız tek şey:

 gulp.task('scss', function() {

“scss” isimli görevi tanımlıyoruz:

 return gulp.src('scss/*.scss')

Görev için kaynak dosyaları ayarlayın. Bunlar glob olarak tanımlanır. Bu örnekte, ".scss" ile biten "scss/" klasöründeki tüm dosyalardan bahsediyoruz.

 .pipe(scss())

Bu noktada daha önce tanımladığımız gulp-sass eklentisini çağırıyoruz:

 .pipe(gulp.dest('css'));

Son olarak, dosyalarımız için hedef klasörü tanımlamak için “gulp.dest” kullanıyoruz. Bu, dosyalar birleştirilmişse tek bir dosya adı da olabilir.

Bu süreç otomasyon uygulamasını daha da geliştirmek için birkaç başka Gulp eklentisi eklemeyi deneyebilirsiniz. Örneğin, gulp-minify-css kullanarak görevinizin son ürününü küçültmek ve gulp-autoprefixer ile otomatik olarak satıcı öneklerini eklemek isteyebilirsiniz.

Gözcü Çalıştırmak

Hemen kullanabileceğiniz bir izleyici başlangıç ​​seti oluşturdum. toptal-gulp-tutorial/step2 adresinden indirebilirsiniz. Önceden oluşturulmuş SCSS görevinin geliştirilmiş bir sürümünü ve kaynak dosyaları izleyen ve görevi çağıran bir izleyici içerir. Başlatmak için aşağıdaki komutu kullanın:

 gulp

Bu komut, izleyiciyi başlatan "varsayılan" görevi başlatır. Bu noktada herhangi bir SCSS dosyasını düzenleyebilir ve CSS dosyalarının yeniden derlenmesini izleyebilirsiniz. Gulp'un bildirimlerini komut satırında görebileceksiniz.

Kod İncelemesi

Sadece 3 ekstra kod satırı ile görevimiz için bir watcher kurduk. Bununla birlikte, izleyici başlangıç ​​kiti, giriş örneğinden çok farklı değildir. Bu bölümde, tüm eklemeleri ve değişiklikleri inceleyeceğiz.

 return gulp.src(['scss/**/*.scss', '!scss/**/_*'])

Bu örnekte, Gulp kaynağına bir dizi glob verilmiştir. Birincisi “.scss” ile biten tüm dosyaları alt klasörlerde de içerir, ikincisi “_” ile başlayanları hariç tutar. Bu şekilde, _page.scss dosyasını birleştirmek için SCSS'nin yerleşik @import işlevini kullanabiliriz.

 gulp.task('default', ['scss'], function() {

Burada “varsayılan” görevi tanımlıyoruz. "scss" görevi, "varsayılan"dan önce bir bağımlılık olarak çalıştırılır.

 gulp.watch('scss/**/*.scss', ['scss']);

Son olarak, “.scss” ile biten herhangi bir dosyaya işaret etmek ve bir değişiklik olayı meydana geldiğinde “scss” görevini çalıştırmak için Gulp'un izleme fonksiyonunu çağırırız.

Artık JavaScript birleştirme, kod ipuçları, CoffeeScript derlemesi veya aklınıza gelebilecek herhangi bir şey gibi diğer otomatik işlemler için yeni izleyiciler oluşturmaya hazırsınız. Bu JavaScript otomasyon uygulamasını daha derinlemesine incelemek için, bir görev çalıştırıldığında sizi bilgilendirecek olan gulp-notify eklemeyi öneriyorum. Ayrıca, ortaya çıkan CSS kodunu küçültmek ve “scss” görevinin buna bağımlı olarak çalışmasını sağlamak için ayrı bir görev oluşturabilirsiniz. Son olarak, elde edilen dosyalara “.min” son ekini eklemek için gulp-rename kullanabilirsiniz.

JavaScript Otomasyonu için Gelişmiş Gulp Eklentileri

Gulp'un eklenti tabanında, bazıları bir inşa sürecinin basit JavaScript otomasyonunun çok ötesine geçen binlerce eklenti var. İşte birkaç seçkin örnek:

BrowserSync

BrowserSync, CSS, JavaScript enjekte eder ve bir değişiklik yapıldığında tarayıcıyı otomatik olarak yeniler. Ek olarak, iş arkadaşlarınızı korkutmak veya tarayıcı testinizi büyük ölçüde hızlandırmak için kullanılabilecek bir GhostMode özelliği içerir.

tarayıcı

Browserify, uygulamanızdaki "gerekli" çağrıları analiz eder ve bunu paketlenmiş bir JavaScript dosyasına dönüştürür. Ayrıca, tarayıcı koduna dönüştürülebilen npm paketlerinin bir listesi vardır.

Web paketi

Browserify'a benzer şekilde Webpack, bağımlılıkları olan modülleri statik dosyalara dönüştürmeyi amaçlar. Bu, kullanıcıya modül bağımlılıklarının nasıl ayarlanacağı konusunda daha fazla özgürlük verir ve Node.js'nin kod stilini takip etmeyi amaçlamaz.

Karma

Gulp-karma, kötü şöhretli test ortamını Gulp'a getiriyor. Karma, Gulp'un da onayladığı en az yapılandırma yaklaşımını izler.

Çözüm

Bu süreç otomasyonu eğitiminde, Gulp'u bir yapı aracı olarak kullanmanın güzelliğini ve basitliğini gösterdim. Öğreticide açıklanan adımları izleyerek artık hem gelecekteki hem de eski projelerinizde yazılım geliştirme sürecinizi tamamen otomatikleştirmeye hazır olacaksınız. Eski projeleriniz için bir yapı sistemi kurmaya biraz zaman ayırmak, gelecekte size kesinlikle değerli zaman kazandıracaktır.

Yakında daha gelişmiş bir Gulp eğitimi için bizi izlemeye devam edin.