Работа со датотеки во Gulp

Gulp овозможува да земете група на датотеки, да извршите одредена операција со таа група, а потоа променетите датотеки да ги поставите на нова адреса.

За ова се предвидени специјални функции src и dest. Ајке прво да ги импортираме од нашата библиотека:

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

Функцијата src овозможува да се добие наведената датотека:

javascriptfunction task(cb) {
  return src('src/styles.css'); // return наместо повикување на cb
}

Со оваа датотека потоа по синџир може да се извршуваат различни операции со помош на функцијата pipe. Шематски ова изгледа на следниов начин:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(операција1)
    .pipe(операција2)
    .pipe(операција3)
}

Последниот повик pipe во синџирот завршува со функцијата dest, која ја задава папката во која ќе се испрати резултатот од извршените операции:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(операција1)
    .pipe(операција2)
    .pipe(операција3)
    .pipe(dest('dist')); // ќе испратиме во папката dist
}

Секоја операција произведува одредена манипулација со нашата датотека. На пример, прво може да се трансформира LESS во CSS, потоа да се додадат префикси на својствата CSS, потоа да се минимизира добиениот CSS и така натаму.

За секоја операција е предвиден свој npm приклучок за Gulp. Приклучоците треба да се инсталираат и да се поврзат со нашата датотека. Проучувањето на различни приклучоци ќе го започнеме во следните лекции.

Засега за загревање, ајке да ја земеме нашата датотека и да испратиме нејзина копија во папката dist, како да извршивме некои операции над неа:

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

Низа од патеки до датотеки

Функцијата src како параметар може да прими не една датотека, туку веднаш неколку во вид на низа:

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