Gulp - Bir Uygulama Geliştirme

Önceki bölümlerde Gulp kurulumu ve Gulp'in yapı sistemi, paket yöneticisi, görev koşucusu, Gulp yapısı vb. İçeren Gulp temelleri hakkında çalıştınız .

Bu bölümde, aşağıdakileri içeren bir uygulama geliştirmenin temellerini göreceğiz -

• Gerekli bağımlılıkları bildirme
• Bağımlılıklar için görev oluşturma
• Görevi çalıştırma
• Görevi izlemek

Bağımlılıklar Bildirimi

Uygulama için eklenti yüklerken, eklentiler için bağımlılıklar belirlemeniz gerekir. Bağımlılıklar, bower ve npm gibi paket yöneticisi tarafından ele alınır.

Adlı bir eklenti alalım gulp-imageminyapılandırma dosyasında bağımlılıkları tanımlamak için. Bu eklenti, görüntü dosyasını sıkıştırmak için kullanılabilir ve aşağıdaki komut satırı kullanılarak yüklenebilir -

npm install gulp-imagemin --save-dev

Aşağıdaki kodda gösterildiği gibi yapılandırma dosyanıza bağımlılıklar ekleyebilirsiniz.

var imagemin = require('gulp-imagemin');

Yukarıdaki satır eklentiyi içerir ve adı verilen bir nesne olarak dahil edilmiştir. imagemin.

Bağımlılıklar için Görev Oluşturma

Task, Gulp'i yapılandırmak için modüler bir yaklaşım sağlar. Her bağımlılık için, diğer eklentileri bulup yükledikçe ekleyeceğimiz bir görev oluşturmamız gerekir. Gulp görevi aşağıdaki yapıya sahip olacaktır -

gulp.task('task-name', function() {
   //do stuff here
});

Burada 'görev adı' bir dize adıdır ve 'işlev ()' görevinizi gerçekleştirir. 'Gulp.task', işlevi isim içinde bir görev olarak kaydeder ve diğer görevlere bağımlılıkları belirtir.

Aşağıdaki kodda gösterildiği gibi yukarıda tanımlanan bağımlılık için görevi oluşturabilirsiniz.

gulp.task('imagemin', function() {
   var img_src = 'src/images/**/*', img_dest = 'build/images';

   gulp.src(img_src)
   .pipe(changed(img_dest))
   .pipe(imagemin())
   .pipe(gulp.dest(img_dest));
});

Görüntüler şurada bulunur: src/images/**/*img_srcobject'e kaydedilir. Imagemin yapıcısı tarafından oluşturulan başka bir işleve taşınır. Görüntüleri src klasöründen sıkıştırır ve çağırarak derleme klasörüne kopyalar.dest hedef dizini temsil eden bir bağımsız değişken ile yöntem.

Görevi Çalıştırma

Gulp dosyası kuruldu ve çalışmaya hazır. Görevi çalıştırmak için proje dizininizde aşağıdaki komutu kullanın -

gulp imagemin

Yukarıdaki komutu kullanarak görevi çalıştırdığınızda, komut isteminde aşağıdaki sonucu göreceksiniz -

C:\work>gulp imagemin
[16:59:09] Using gulpfile C:\work\gulpfile.js
[16:59:09] Starting 'imagemin'...
[16:59:09] Finished 'imagemin' after 19 ms
[16:59:09] gulp-imagemin: Minified 2 images (saved 80.81 kB - 16.9%)