Работа з файламі ў 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'));
}