Eki.27

Eki.27

Gulp Dersleri – Part 11 – JavaScript Kodlarının Doğruluğunu Kontrol Etmek (gulp-jshint)

JavaScript kodlarımızda hatalı bir yerin olup olmadığını geliştirme aşamasında Google Chrome Tools ile de görebiliriz. Ancak çok fazla JavaScript dosyanız varsa ve bazıları sadece tetiklendiğinde çalışıyorsa, her seferinde hepsini kontrol etmeniz zor olacaktır. Gerçi bir JavaScript dosyasının sadece syntax (sözdizimi) olarak test edilmesi tam bir test değildir. Gerçek test EndToEnd veya UnitTest diye adlandırdığımız test sistemleri ile olmaktadır. Kitabımızın konusu olmadığı için onlara girmiyoruz. Şimdilik Gulp ile sadece syntax kontrolünü yapacağız. Bu sefer iki farklı modülü aynı anda yüklememiz gerekiyor. Kullanacağımız modüllerimiz jshint ve gulp-jshint’dir.
Gulp

Eki.27

Gulp Dersleri – Part 10 – Resimleri Optimize Etmek (gulp-smushit)

Resimleri görüntü kalitesi kaybına uğratmadan biraz da olsa küçültebiliriz. Eğer dosya boyutu olarak çok daha fazla küçültülme gereksinimi varsa, mutlaka grafiker tarafından hazırlanması gerekmektedir. Gerçi Gulp’ta bunun için de bir modül var ve bu modül ile Quality değerleri düşürülerek resim optimize edilir, ancak tavsiye etmem.
Gulp

Eki.27

Eki.27

Eki.27

Gulp Dersleri – Part 7 – HTML Dosyalarını Minimize Etmek (gulp-minify)

Hazırladığımız örneğimizde sadece bir adet index.html dosyamız var, ancak HTML dosyalarının sayısı bir de olsa yüzlerce de olsa hepsini tek bir komut ile minify edebiliriz. HTML dosyalarını minify edebilmek için yeni bir modül eklememiz gerekecek. Ekleyeceğimiz modülün ismi gulp-minify-html. Aşağıdaki komutu proje klasörü içindeyken Command Prompt’a girin ve Enter ile onaylayın.
Gulp

Eki.27

Gulp Dersleri – Part 6 – Örnek Gulp Komutları ve Otomatikleştirme

Yazacağımız görevlerde basitten karmaşığa doğru ilerleyeceğiz. Şu an projemizin klasör yapısı hazır ancak hiçbir içerik yok. Öncelikle basitçe birkaç içerik oluşturalım. Aşağıdaki gibi basitçe bir web sayfamız olsun. Web sayfamızda birkaç resim, bir JavaScript dosyası, bir CSS dosyası ve bir de HTML dosyası olsun. Kodları yazarken özellikle bol TAB’lı, bol SPACE karakterli ve bol satır aralıklı yazmaya çalıştım. Böylece minify işlemini daha etkili bir şekilde görebileceğiz.
Gulp

Eki.27

Gulp Dersleri – Part 5 – İlk Gulp Komutlarının Yazımı

Bir önceki aşamada gulpfile.js dosyamızı oluşturmuştuk. Bu dosyayı oluştururken ANSII değil de UTF-8 olarak oluşturmaya dikkat edin! gulpfile.js dosyamızı açın. İlk olarak gulp modüllerini import edeceğiz. Bunun için aşağıdaki kodu başlangıçta yazalım. var gulp = require(‘gulp’); Daha sonra da ilk görevimizi oluşturuyoruz. Görev tanımlaması yaparken aşağıdaki kalıbı kullanabiliriz.
Gulp

Eki.27

Gulp Dersleri – Part 3 – Web Projesi Oluşturmak

Command Prompt’tayken Masaüstü’ne geçelim ( cd Desktop ). webprojesi ismi ile bir klasör oluşturalı ( mkdir webprojesi ). Veya bu işlemleri yapmadan kendiniz de Masaüstü’nde webprojesi isminde bir klasör oluşturup içinde Command Prompt’u açabilirsiniz. Aşağıdaki komutu girin ve bir proje oluşturmak için package.json dosyamızı oluşturalım. Bu dosya, proje hakkında bazı bilgiler taşıyacak. Komutu girdiğinizde, sırası ile sizden proje ile ilgili bilgiler istenecek. İstenilen bilgileri Command Prompt’tan sırası ile girin ve her seferinde Enter tuşuna basıp ilerleyin. Eğer istenilen bilgiyi girmek istemezseniz, yine Enter ile es geçebilirsiniz.
Gulp

Eki.27

Gulp Dersleri – Part 2 – Kurulum

Gulp’un kurulumunu gerçekleştirmek için ilk olarak sistemimizde Node.js’in kurulu olması gerekiyor. Node.js kurulu ise Command Prompt’u açın (Komut Satır). CTRL + R ile komut satırını açın ve cmd yazıp Enter’a basın. Eğer Windows 8 üzeri kullanıyorsanız, projenizin bulunduğu klasörde sağ tıklayıp açılan menüden veya üst menüden de açabilirsiniz.
Gulp