Trabalhando com arquivos no Gulp

O Gulp permite que você pegue um grupo de arquivos, execute uma operação com esse grupo e, em seguida, coloque os arquivos modificados em um novo local.

Para isso, existem funções especiais src e dest. Vamos primeiro importá-las da nossa biblioteca:

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

A função src permite obter o arquivo especificado:

function task(cb) {
	return src('src/styles.css'); // return em vez de chamar cb
}

Em seguida, várias operações podem ser executadas em cadeia neste arquivo usando a função pipe. Esquematicamente, fica assim:

function task(cb) {
	return src('src/styles.css')
		.pipe(operação1)
		.pipe(operação2)
		.pipe(operação3)
}

A última chamada pipe na cadeia termina com a função dest, que especifica a pasta para onde o resultado das operações realizadas será enviado:

function task(cb) {
	return src('src/styles.css')
		.pipe(operação1)
		.pipe(operação2)
		.pipe(operação3)
		.pipe(dest('dist')); // enviar para a pasta dist
}

Cada operação realiza alguma manipulação no nosso arquivo. Por exemplo, você pode primeiro converter LESS para CSS, depois adicionar prefixos às propriedades CSS, depois minificar o CSS resultante e assim por diante.

Existe um plugin npm para Gulp específico para cada operação. Os plugins precisam ser instalados e conectados ao nosso arquivo. Estudaremos vários plugins nas próximas lições.

Por enquanto, para aquecer, vamos pegar nosso arquivo e enviar uma cópia dele para a pasta dist, como se tivéssemos realizado algumas operações nele:

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

Crie três arquivos CSS. Crie três tarefas públicas. Deixe cada tarefa criar uma cópia de um dos nossos arquivos em uma pasta especificada.

Array de caminhos de arquivos

A função src pode receber como parâmetro não apenas um arquivo, mas vários de uma vez, na forma de um array:

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

Crie três arquivos CSS. Crie uma tarefa que faça uma cópia dos nossos arquivos na pasta especificada.