Trabajo con archivos en Gulp

Gulp permite tomar un grupo de archivos, realizar alguna operación con este grupo y luego colocar los archivos modificados en una nueva ubicación.

Para esto están destinadas las funciones especiales src y dest. Primero vamos a importarlas desde nuestra biblioteca:

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

La función src permite obtener el archivo especificado:

function task(cb) {
	return src('src/styles.css'); // return en lugar de llamar a cb
}

Luego, con este archivo se pueden realizar en cadena varias operaciones usando la función pipe. Esquemáticamente se ve de la siguiente manera:

function task(cb) {
	return src('src/styles.css')
		.pipe(operación1)
		.pipe(operación2)
		.pipe(operación3)
}

La última llamada pipe en la cadena termina con la función dest, que especifica la carpeta a la que se enviará el resultado de las operaciones realizadas:

function task(cb) {
	return src('src/styles.css')
		.pipe(operación1)
		.pipe(operación2)
		.pipe(operación3)
		.pipe(dest('dist')); // enviaremos a la carpeta dist
}

Cada operación produce alguna manipulación de nuestro archivo. Por ejemplo, primero se puede transformar LESS a CSS, luego agregar prefijos a las propiedades CSS, luego minimizar el CSS obtenido y así sucesivamente.

Para cada operación está destinado su propio plugin de npm para Gulp. Los plugins deben instalarse y conectarse a nuestro archivo. Estudiaremos varios plugins en las siguientes lecciones.

Por ahora, para calentar, tomemos nuestro archivo y enviemos una copia a la carpeta dist, como si hubiéramos realizado algunas operaciones en él:

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

Crea tres archivos CSS. Crea tres tareas públicas. Que cada tarea cree una copia de uno de nuestros archivos en una carpeta especificada.

Array de rutas de archivos

La función src puede recibir como parámetro no un solo archivo, sino varios a la vez en forma de array:

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

Crea tres archivos CSS. Crea una tarea que haga una copia de nuestros archivos en la carpeta especificada.