Praca z plikami w Gulp

Gulp pozwala pobrać grupę plików, wykonać na tej grupie pewną operację, a następnie umieścić zmodyfikowane pliki pod nowym adresem.

Służą do tego specjalne funkcje src i dest. Najpierw zaimportujmy je z naszej biblioteki:

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

Funkcja src pozwala uzyskać określony plik:

function task(cb) {
	return src('src/styles.css'); // return zamiast wywołania cb
}

Następnie na tym pliku można wykonywać po kolei różne operacje za pomocą funkcji pipe. Schematycznie wygląda to następująco:

function task(cb) {
	return src('src/styles.css')
		.pipe(operacja1)
		.pipe(operacja2)
		.pipe(operacja3)
}

Ostatnie wywołanie pipe w łańcuchu kończy się funkcją dest, określającą folder, do którego trafi wynik przeprowadzonych operacji:

function task(cb) {
	return src('src/styles.css')
		.pipe(operacja1)
		.pipe(operacja2)
		.pipe(operacja3)
		.pipe(dest('dist')); // wyślemy do folderu dist
}

Każda operacja wykonuje pewną manipulację na naszym pliku. Na przykład, można najpierw przekształcić LESS w CSS, następnie dodać prefiksy do właściwości CSS, potem zminimalizować otrzymany CSS i tak dalej.

Dla każdej operacji przeznaczona jest własna wtyczka npm dla Gulpa. Wtyczki należy instalować i podłączać do naszego pliku. Zajmiemy się nauką różnych wtyczek w kolejnych lekcjach.

Na rozgrzewkę weźmy nasz plik i wyślijmy jego kopię do folderu dist, tak jakbyśmy wykonali na nim jakieś operacje:

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

Stwórz trzy pliki CSS. Stwórz trzy publiczne zadania. Niech każde zadanie utworzy kopię jednego z naszych plików w określonym folderze.

Tablica ścieżek do plików

Funkcja src jako parametr może przyjmować nie jeden plik, a od razu kilka w postaci tablicy:

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

Stwórz trzy pliki CSS. Stwórz zadanie, które utworzy kopię naszych plików w określonym folderze.