Gulp-də fayllarla iş

Gulp fayl qrupunu götürməyə, bu qrupla müəyyən əməliyyat yerinə yetirməyə və sonra dəyişdirilmiş faylları yeni ünvana yerləşdirməyə imkan verir.

Bunun üçün xüsusi src və dest funksiyaları nəzərdə tutulub. Gəlin əvvəlcə onları kitabxanamızdan idxal edək:

javascriptlet {src, dest} = require('gulp');

src funksiyası göstərilən faylı əldə etməyə imkan verir:

javascriptfunction task(cb) {
  return src('src/styles.css'); // cb çağırışı əvəzinə return
}

Sonra bu fayl ilə pipe funksiyası vasitəsilə zəncirvari müxtəlif əməliyyatlar yerinə yetirmək olar. Bunun sxematik görünüşü aşağıdakı kimidir:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(əməliyyat1)
    .pipe(əməliyyat2)
    .pipe(əməliyyat3)
}

Zəncirdəki son pipe çağırışı, həyata keçirilən əməliyyatların nəticəsinin yerləşdiriləcəyi qovluğu təyin edən dest funksiyası ilə bitir:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(əməliyyat1)
    .pipe(əməliyyat2)
    .pipe(əməliyyat3)
    .pipe(dest('dist')); // dist qovluğuna göndəririk
}

Hər bir əməliyyat faylımızla müəyyən manipulyasiya edir. Məsələn, əvvəlcə LESS-i CSS-ə çevirmək, sonra CSS xassələrinə prefiks əlavə etmək, ardınca alınan CSS-i minimuma endirmək və s.

Hər bir əməliyyat üçün Gulp-un öz npm plagini nəzərdə tutulub. Pluginlər quraşdırılmalı və faylımıza qoşulmalıdır. Müxtəlif pluginləri öyrənməklə növbəti dərslərdə məşğul olacağıq.

Hələlik isə gəlin faylımızı götürək və ona bəzi əməliyyatlar yerinə yetirdiyimiz kimi, onun surətini dist qovluğuna göndərək:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(dest('dist'));
}

Fayllara yol massivi

src funksiyası parametr kimi bir fayl deyil, bir neçə faylı massiv şəklində də qəbul edə bilər:

javascriptfunction task(cb) {
  let files = [
    'src/styles1.css',
    'src/styles2.css'
  ];
  
  return src(files)
    .pipe(dest('dist'));
}