Работа со датотеки во 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'));
}

Направете три CSS датотеки. Направете три јавни задачи. Нека секоја задача креира копија од една од нашите датотеки во зададената папка.

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

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

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

Направете три CSS датотеки. Направете задача, која ќе направи копија од нашите датотеки во наведената папка.