Работа з файламі ў Gulp

Gulp дазваляе браць групу файлаў, вырабляць з гэтай групай некаторую аперацыю, а затым змененыя файлы размяшчаць па новым адрасе.

Для гэтага прызначаны спецыяльныя функцыі src і dest. Давайце для пачатку імпартаваць іх з нашай бібліятэкі:

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

Функцыя src дазваляе атрымаць паказаны файл:

function task(cb) {
	return src('src/styles.css'); // return замест выкліку cb
}

З гэтым файлам затым па ланцужку можна выконваць розныя аперацыі з дапамогай функцыі pipe. Схематычна гэта выглядае наступным чынам:

function task(cb) {
	return src('src/styles.css')
		.pipe(аперацыя1)
		.pipe(аперацыя2)
		.pipe(аперацыя3)
}

Апошні выклік pipe у ланцужку сканчаецца функцыяй dest, якая задае папку, у якую адправіцца вынік праведзеных аперацый:

function task(cb) {
	return src('src/styles.css')
		.pipe(аперацыя1)
		.pipe(аперацыя2)
		.pipe(аперацыя3)
		.pipe(dest('dist')); // адправім у папку dist
}

Кожная аперацыя вырабляе некаторую маніпуляцыю з нашым файлам. Напрыклад, можна спачатку пераўтварыць LESS у CSS, затым дадаць прэфіксы да ўласцівасцей CSS, затым мінімізаваць атрыманы CSS і гэтак далей.

Для кожнай аперацыі прызначаны свой npm плагін для Gulp. Плагіны трэба ўсталёўваць і падключаць да нашага файла. Вывучэннем розных плагінаў мы займемся ў наступных уроках.

Пакуль для размінкі давайце возьмем наш файл і адправім яго копію ў папку dist, як быццам прадзеўшы над ім некаторыя аперацыі:

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

Зрабіце тры СSS файлы. Зрабіце тры публічных задачы. Хай кожная задача стварае копію аднаго з нашых файлаў у зададзенай папцы.

Масіў шляхоў да файлаў

Функцыя src параметрам можа прымаць не адзін файл, а адразу некалькі ў выглядзе масіву:

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

Зрабіце тры СSS файлы. Зрабіце задачу, якая зробіць копію нашых файлаў у паказанай папцы.