Gulp Nedir?
Eric Schoffstall tarafından oluşturulmuş Nodejs tabanlı javascript aracıdır. Genelde frontend developer'larını yakından ilgilendiren web geliştirmede akış oluşturmak için kullanılan javascript aracıdır. Gulp jade,sass / scss ,less gibi dosya biçimlerini düzenleyerek html,css vs. çevirebilir. Daha yapabileceğimiz seçeneklerde var fakat onları ayrı başlık altındainceliyeceğiz.
Gulp, komut satırından çalıştırılır ve projenizde kullanılmak üzere yapılandırılmış bir gulpfile.js dosyasına ihtiyaç duyar. Bu dosya, gulp tarafından çalıştırılacak görevleri tanımlar. Görevler, Node.js kodu olarak yazılır ve gulp tarafından çalıştırılır.
Gulp, projenizde yapılacak tekrarlayan görevleri otomatikleştirir ve zaman kazandırır. Bu, özellikle büyük projelerde önemli bir avantajdır ve görevleri elle yapmak yerine otomatik olarak yaptırmak daha verimli hale getirir.
Gulp, projenizde kullanılmak üzere çeşitli eklentiler (pluginler) sağlar. Bu eklentiler, çeşitli işlemleri gerçekleştirmek için kullanılır,
Gulp Kurulum / Proje İçi Kullanma
Gulp ' ı sadece bilgisayara kurup direkt başka işlem yapmadan kullanmak ne yazık ki mümkün değil. Kullanabilmemiz için bir javascript bölümünde Gulp ' ı kullanacağımızı belirtmemiz lazım. Önce bilgisayarımıza kuralım.
Üstte Nodejs tabanlı dedik , e o zaman nodejs / npm kullanarak kurulumunu yapıcaz.
Terminal veyahut komut satırı açalım ve aşağıdaki komutu yazalım.
Bu komutu yazarak bilgisayara kurduk. Şimdi proje dizinine gidip modullerini kurmamız lazım. Aşağıdaki komutu yazalım ve modulleri bir klasör altında topluyalım.
node_modules / package-lock.json adında bir klasör oluşacaktır. Komut satırında bazı hatalar verebilir. Bunları pek takmayın Şimdi ise bir javascript dosyası açarak Gulp ' ı kullanacağımızı belirtelim. İsmini gulpfile.js yapalım. Editörümüzde açalım ve içine alttaki komutu yazalım.
Bunu yazarak sadece kullanacağımız belirttik. Yani başka bir görev atamadık. Özelliklere geçelim.
Gulp Özellikler
Dosyaları işleme: Gulp, projenizdeki dosyaları tarayarak, değişiklikleri tespit eder ve bu değişiklikleri işler. Örneğin, CSS dosyalarını minify etmek ve JavaScript dosyalarını birleştirmek gibi görevleri yapabilir.
Eşzamanlı çalışma: Gulp, görevleri eşzamanlı olarak çalıştırabilir. Bu, özellikle büyük projelerde çok sayıda dosya işlemek gerektiğinde önemlidir, çünkü görevler paralel olarak çalıştırılır ve bu sayede işlem süresi kısaltılır.
Pluginler: Gulp, projenizde kullanılmak üzere çeşitli eklentiler (pluginler) sağlar. Bu eklentiler, çeşitli işlemleri gerçekleştirmek için kullanılır, örneğin dosyaları minify etmek, SASS dosyalarını derlemek ve benzeri.
Basit kullanım: Gulp, kolayca kullanılır ve projenizde kullanılmak üzere yapılandırılmış bir gulpfile.js dosyasına ihtiyaç duyar. Bu dosya, gulp tarafından çalıştırılacak görevleri tanımlar ve Node.js kodu olarak yazılır.
Kütüphane bağımsızlığı: Gulp, diğer JavaScript kütüphanelerine bağımlı değildir ve projenizde herhangi bir kütüphaneye ihtiyaç duymadan çalışabilir.
Gelişmiş özellikler: Gulp, gelişmiş özellikler de sunar, örneğin dosya izleme, dosya değişikliklerini takip etme ve bunları işleme gibi. Bu sayede, projenizdeki dosyalardaki değişiklikleri otomatik olarak tespit edebilir ve gerektiğinde işleme sokabilirsiniz.
SASS / SCSS , JADE ... Kodlarını Dönüştürebilme
Bu diller genelde projeye kolaylık sağlaması amacıyla kullanılır. Bir şirkete bağlı web sayfası kullanıyorsunuz. Sizde bu dillere aşinasınız. Ama şirket sahibi bu kodları html , css ... tarzı istiyor. O zaman gulpı kullanarak kolaylıkla çevirebiliriz.
Ben örnek olarak sass dosyasını çevirdim .
Bu çevirme özelliğini kullanabilmek için , daha doğrusu Gulp ' ın özelliklerini kullanabilmek için bu özelleri ayrı ayrı kurmamız gerekiyor. Kötü bir haberim varki bu dönüştürme opsiyonlarıda kendi başlığı altında parçalara ayrılır.
Sass / scss dönüştürme paketi kurdunuz , bu paketle jade dönüştüremezsiniz. Sass / scss kullandığım için onu göstericem.
Alttaki komutu girerek gulp-sass indirelim.
İndirdikten sonra bunu projeye dahil edelim. gulpfile.js dosyamıza gelip ilk yazdığımız komutun altına aşağıdaki komutu yazın.
Gulp ' ı sadece bilgisayara kurup direkt başka işlem yapmadan kullanmak ne yazık ki mümkün değil. Kullanabilmemiz için bir javascript bölümünde Gulp ' ı kullanacağımızı belirtmemiz lazım. Önce bilgisayarımıza kuralım.
Üstte Nodejs tabanlı dedik , e o zaman nodejs / npm kullanarak kurulumunu yapıcaz.
Terminal veyahut komut satırı açalım ve aşağıdaki komutu yazalım.
Kod:
npm install -g gulpBu komutu yazarak bilgisayara kurduk. Şimdi proje dizinine gidip modullerini kurmamız lazım. Aşağıdaki komutu yazalım ve modulleri bir klasör altında topluyalım.
Kod:
npm install gulp --save-devnode_modules / package-lock.json adında bir klasör oluşacaktır. Komut satırında bazı hatalar verebilir. Bunları pek takmayın Şimdi ise bir javascript dosyası açarak Gulp ' ı kullanacağımızı belirtelim. İsmini gulpfile.js yapalım. Editörümüzde açalım ve içine alttaki komutu yazalım.
Kod:
var gulp = require('gulp');Bunu yazarak sadece kullanacağımız belirttik. Yani başka bir görev atamadık. Özelliklere geçelim.
Gulp Özellikler
Dosyaları işleme: Gulp, projenizdeki dosyaları tarayarak, değişiklikleri tespit eder ve bu değişiklikleri işler. Örneğin, CSS dosyalarını minify etmek ve JavaScript dosyalarını birleştirmek gibi görevleri yapabilir.
Eşzamanlı çalışma: Gulp, görevleri eşzamanlı olarak çalıştırabilir. Bu, özellikle büyük projelerde çok sayıda dosya işlemek gerektiğinde önemlidir, çünkü görevler paralel olarak çalıştırılır ve bu sayede işlem süresi kısaltılır.
Pluginler: Gulp, projenizde kullanılmak üzere çeşitli eklentiler (pluginler) sağlar. Bu eklentiler, çeşitli işlemleri gerçekleştirmek için kullanılır, örneğin dosyaları minify etmek, SASS dosyalarını derlemek ve benzeri.
Basit kullanım: Gulp, kolayca kullanılır ve projenizde kullanılmak üzere yapılandırılmış bir gulpfile.js dosyasına ihtiyaç duyar. Bu dosya, gulp tarafından çalıştırılacak görevleri tanımlar ve Node.js kodu olarak yazılır.
Kütüphane bağımsızlığı: Gulp, diğer JavaScript kütüphanelerine bağımlı değildir ve projenizde herhangi bir kütüphaneye ihtiyaç duymadan çalışabilir.
Gelişmiş özellikler: Gulp, gelişmiş özellikler de sunar, örneğin dosya izleme, dosya değişikliklerini takip etme ve bunları işleme gibi. Bu sayede, projenizdeki dosyalardaki değişiklikleri otomatik olarak tespit edebilir ve gerektiğinde işleme sokabilirsiniz.
SASS / SCSS , JADE ... Kodlarını Dönüştürebilme
Bu diller genelde projeye kolaylık sağlaması amacıyla kullanılır. Bir şirkete bağlı web sayfası kullanıyorsunuz. Sizde bu dillere aşinasınız. Ama şirket sahibi bu kodları html , css ... tarzı istiyor. O zaman gulpı kullanarak kolaylıkla çevirebiliriz.
Ben örnek olarak sass dosyasını çevirdim .
Bu çevirme özelliğini kullanabilmek için , daha doğrusu Gulp ' ın özelliklerini kullanabilmek için bu özelleri ayrı ayrı kurmamız gerekiyor. Kötü bir haberim varki bu dönüştürme opsiyonlarıda kendi başlığı altında parçalara ayrılır.
Sass / scss dönüştürme paketi kurdunuz , bu paketle jade dönüştüremezsiniz. Sass / scss kullandığım için onu göstericem.
Alttaki komutu girerek gulp-sass indirelim.
Kod:
npm install node-sass gulp-sass --save-devİndirdikten sonra bunu projeye dahil edelim. gulpfile.js dosyamıza gelip ilk yazdığımız komutun altına aşağıdaki komutu yazın.
Kod:
var sass = require('gulp-sass');[/COLOR][/CENTER]
[COLOR=rgb(255, 255, 255)][CENTER]sass.compiler = require('node-sass');Şimdi geçelim kullanımına. Öncelikle aşağıdaki kodlarıda ekleyerek sass dönüştürme kullanabileceğiz.
Kod:
gulp.task('sass', function () {[/COLOR][/CENTER]
[COLOR=rgb(255, 255, 255)][CENTER] return gulp.src('./sass/*.sass')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});Burada şuraya dikakt edelim. return kısmına baktığımızda bir dosya yolu var. Bu paylaştığım kodda sass klasörü içindeki tüm sass dosyaları ' nı çevir. Siz klasör kullanmadıysanız ana proje klasörüne göre editleyin. SCSS çevirmek istiyorum dersenizde *.sass olan bölümü *.scss yapın. Kısa bir sass kodu atayım.
Sass:
body
margin: 0
padding: 0
background: #262626
nav
width: 100%
height: 75px
background-color: #424242
box-shadow: 0 1px 2px -1px black
.tyrone
position: absolute
top: 50%
left: 50%
transform: translate(-50%,-50%)Bunu kaydettikten sonra projemizin olduğu ana dizine terminalde gelerek aşağıdaki komutu yazalım ve dönüştürmeyi başlatalım
Kod:
gulp sassCSS klasörü içine çıkardı. Çünkü üstteki genel kodda ./css klasörüne çıkart demiştik. Klasörü oluşturmasanızda kendisi otomatik oluşturuyor. CSS kodlarını paylaşmama gerek yoktur herhalde. Size şimdi şurada jade & less ' i nasıl kullanabileceğinize dair kaynak vereyim. NPM kendi sitesidir.
Jade
Less
