Kufanya Kazi na Faili katika Gulp

Gulp inaruhusu kuchukua kundi la faili, kufanya operesheni fulani na kundi hilo, kisha kuweka faili zilizobadilishwa kwa anwani mpya.

Hii inafanywa kwa kutumia vitendo maalum src na dest. Hebu kwanza tuwaingize kutoka kwa maktaba yetu:

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

Kitendo src kinaruhusu kupata faili iliyoonyeshwa:

javascriptfunction task(cb) {
  return src('src/styles.css'); // return badala ya kuita cb
}

Kwa faili hii kisha kwa mnyororo unaweza kufanya operesheni mbalimbali kwa kutumia kitendo pipe. Kimfumo hii inaonekana kama ifuatavyo:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(operesheni1)
    .pipe(operesheni2)
    .pipe(operesheni3)
}

Kiwango cha mwisho cha pipe katika mnyororo huishia kwa kitendo dest, kinachoainisha folda, ambayo matokeo ya operesheni zilizofanywa zitapelekwa:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(operesheni1)
    .pipe(operesheni2)
    .pipe(operesheni3)
    .pipe(dest('dist')); // tutapeleka kwenye folda dist
}

Kila operesheni hufanya mabadilisho fulani kwa faili yetu. Kwa mfano, kwanza unaweza kubadilisha LESS kuwa CSS, kisha kuongeza viambishi awali kwa sifa za CSS, kisha kupunguza CSS iliyopatikana na kadhalika.

Kwa kila operesheni kuna programu-jalizi (plugin) ya npm maalum kwa Gulp. Programu-jalizi zinahitaji kusakinishwa na kuunganishwa kwa faili yetu. Tutajifunza programu-jalizi mbalimbali katika masomo yajayo.

Kwa sasa kwa ajili ya kujoea hebu tuchukue faili yetu na tupeleke nakala yake kwenye folda dist, kana kwamba tumefanya operesheni fulani juu yake:

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

Safu ya anwani za faili

Kitendo src kinaweza kukubali kigezo sio faili moja, bali faili nyingi mara moja kwa njia ya safu:

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