Gulp - Geliştirmede Zahmetli Görevleri Otomatikleştirmeye Yönelik Bir Araç Seti

Gulp tekrarlanan görevleri otomatik hale getiren küçük bir araç setidir. Bu tekrarlanan görevler genellikle CSS, JavaScript dosyalarını derlemektir veya temel olarak standart olmayan JavaScript/CSS dosyalarıyla ilgilenen bir çerçeve kullandığınızda, bu dosyaları alan, bunları bir araya paketleyen ve tarayıcınızın kolayca anlayabilmesi için her şeyi derleyen bir otomasyon aracı kullanmak isteyeceksiniz. BT.

Gulp aşağıdaki görevleri otomatikleştirmek için kullanışlıdır:

• JS ve CSS dosyalarını derlemek
• Bir dosyayı kaydettiğinizde tarayıcı sayfasını yenileme
• Birim testi çalıştırın
• Kod analizi
• Değiştirilen dosyaları hedef dizine kopyalama

Bir gulp dosyası oluşturmak, otomasyon aracınızı geliştirmek veya görevleri otomatikleştirmek için ihtiyaç duyduğunuz tüm dosyaları takip etmek için bir package.json dosyası oluşturmanız gerekir. Dosya temel olarak projenizin içinde ne olduğuna ve projenizin çalışması için hangi bağımlılıklara ihtiyacınız olduğuna dair açıklama içerir.

Bu eğitimde Gulp'un nasıl kurulacağını ve projeleriniz için bazı temel görevlerin nasıl otomatikleştirileceğini öğreneceksiniz. Düğüm paketi yöneticisi anlamına gelen npm'yi kullanacağız. Node.js ile yüklenir ve Nodejs ve npm'yi önceden kurup kurmadığınızı aşağıdakilerle kontrol edebilirsiniz:

node --version
npm --version

Sisteminizde henüz kurulu değilse eğitime göz atmanızı tavsiye ederim: Linux Sistemlerinde En Son Nodejs ve NPM Sürümünü Kurma.

Linux'ta Gulp Nasıl Kurulur

gulp-cli kurulumu aşağıdaki komut kullanılarak npm ile tamamlanabilir.

npm install --global gulp-cli

gulp modülünü yerel olarak kurmak istiyorsanız (yalnızca mevcut proje için), aşağıdaki talimatları kullanabilirsiniz:

Bir proje dizini oluşturun ve içinde gezinin:

mkdir myproject
cd myproject

Daha sonra projenizi başlatmak için aşağıdaki komutu kullanın:

npm init

Yukarıdaki komutu çalıştırdıktan sonra projenize bir ad, sürüm açıklaması ve diğerlerini vermeniz için bir dizi soru sorulacaktır. Son olarak verdiğiniz tüm bilgileri onaylayın:

Artık projemize gulp paketini şununla yükleyebiliriz:

npm install --save-dev gulp

--save-dev seçeneği, npm'e package.json dosyasını yeni devDependeency ile güncellemesini söyler.

devDependencing'lerin geliştirme sırasında, Bağımlılıkların ise çalışma sırasında çözülmesi gerektiğini unutmayın. Gulp, geliştirmede bize yardımcı olan bir araç olduğundan, geliştirme zamanında çözülmesi gerekiyor.

Gulp Dosyası Oluştur

Şimdi bir gulpfile oluşturalım. Çalıştırmak istediğimiz görevler bu dosyada bulunacaktır. gulp komutu kullanıldığında otomatik olarak yüklenir. Bir metin düzenleyici kullanarak gulpfile.js adlı bir dosya oluşturun. Bu eğitimin amacı doğrultusunda basit bir test oluşturacağız.

Aşağıdaki kodu gulpfile.js'nize ekleyebilirsiniz:

var gulp = require('gulp');

gulp.task('hello', function(done) {
        console.log('Hello world!');
        done();
});

Dosyayı kaydedin ve şimdi şununla çalıştırmayı deneyin:

gulp hello

Aşağıdaki sonucu görmelisiniz:

Yukarıdaki kodun yaptığı şudur:

• var gulp=require('gulp'); – gulp modülünü içe aktarır.
• gulp.task('hello', function(done) { – komut satırından kullanılabilen bir görevi tanımlar.
• console.log('Merhaba dünya!'); – ekrana “Merhaba dünya!” ifadesini yazdırmanız yeterlidir.
• done(); – gulp'e görevlerimizin tamamlandığını bildirmek için bu geri çağırma işlevini kullanırız.

Elbette yukarıdakiler gulpfile.js'nin nasıl düzenlenebileceğini gösteren bir örnekti. gulpfile.js dosyanızdaki mevcut görevleri görmek istiyorsanız aşağıdaki komutu kullanabilirsiniz:

gulp --tasks

Gulp Eklentileri

Gulp'te her biri farklı işlevler sunan binlerce eklenti mevcuttur. Bunları Gulp’un eklenti sayfasından kontrol edebilirsiniz.

Aşağıda daha pratik bir örnek olarak minify-html eklentisini kullanacağız. Aşağıdaki fonksiyon ile HTML dosyalarını küçültüp yeni dizine yerleştirebilirsiniz. Ancak önce gulp-minify-html eklentisini yükleyeceğiz:

npm install --save-dev gulp-minify-html

gulpfile.js dosyanızın şu şekilde görünmesini sağlayabilirsiniz:

cat gulpfile.js

Örnek Çıktı

// including plugins
var gulp = require('gulp')
, minifyHtml = require("gulp-minify-html");

// task
gulp.task('minify-html', function (done) {
    gulp.src('./src/*.html') // path to your files
    .pipe(minifyHtml())
    .pipe(gulp.dest('./dest'));
    done()
});

Daha sonra aşağıdaki komutları kullanarak HTML dosyalarını küçültebilirsiniz.

gulp minify-html
du -sh /src dest/

Çözüm

Gulp üretkenliğinizi artırmanıza yardımcı olabilecek kullanışlı bir araç setidir. Bu araçla ilgileniyorsanız, burada bulunan dokümantasyon sayfasını kontrol etmenizi şiddetle tavsiye ederim.