Ara.15

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.

npm install –save-dev gulp-minify-html

gulpfile.js dosyasını açın ve aşağıdaki Task’ı girip kaydedin.

var gulp = require(‘gulp’)
, minifyHTML = require(“gulp-minify-html”);
gulp.task(‘minify-html’, function () {
gulp.src(‘dev/*.html’)
.pipe(minifyHTML())
.pipe(gulp.dest(‘dist’));
});

Yazdığımız kodları inceleyelim.

İlk olarak gulp modülünü ve az önce yüklemiş olduğumuz gulp-minify-html modülünü içe aktarıyoruz ve her birini bir değişkene atıyoruz. Değişken isimlerimiz gulp ve minifyHTML. Ardından minify-html adında yeni bir Task tanımlıyoruz. Bu Task’ın kendine has yazım kuralı olacaktır. gulp.src ile parametre olarak dev/*.html ile tanımlama yaparak, dev klasördeki bütün .html formatlı dosyaları seç dedik. İkinci satırda da .pipe() metodunu çağırıp minifyHTML() ile modülümüzü çalıştırdık. Bir üst satırdaki tanımlama ile hangi dosyaları minify edeceğini görmüş oldu. Son satırda da gulp.dest() ile minify edilmiş dosyaların nereye aktarılacağını belirttik. Tanımlamamıza göre dist klasörü altına taşınacak.

Kodları yazdıktan sonra kaydedin ve tekrar Command Prompt’a dönün. Task’ımızın ismini minify-html olarak tanımladığımız için aşağıdaki komut ile Task’ı çalıştırın.

gulp minify-html

Minify edilmiş index.html dosyası aşağıdaki gibi olacaktır. Bütün TAB ve ENTER karakterleri silinmiş.

<!DOCTYPE html><html><head><meta charset=utf-8><title>Gulp Öğreniyorum</title><link rel=stylesheet href=css/index.css></head><body><div class=sayfa><h1>Gulp Öğreniyorum</h1><hr><img id=logo src=images/gulp_logo.png><p>Gulp, Node.js tabanlı bir Task Runner (Görev Çalıştırıcısı)’dır. 2015 yılından beri yaygın olarak kullanılmaktadır. Biz de aşağıdaki konularla, Gulp'u nasıl kullanacağımızı göreceğiz.</p><ul class=maddeler><li>Dosyalarını Minimize Etmek</li><li>Resimleri Optimize Etmek</li><li>JS Kodlarını Kontrol Etmek</li><li>Gulp Görevlerini Kombine Etmek</li></ul><hr><p id=tarih></p></div><script src=js/index.js></script></body></html>
İçeriği paylaş:
  • facebook
  • twitter

Leave a comment

Yorum