Работа с файлове в 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'));
}