Travailler avec les fichiers dans Gulp

Gulp permet de prendre un groupe de fichiers, d'effectuer une opération sur ce groupe, puis de placer les fichiers modifiés à une nouvelle adresse.

Pour cela, des fonctions spéciales sont prévues : src et dest. Commençons par les importer de notre bibliothèque :

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

La fonction src permet d'obtenir le fichier spécifié :

function task(cb) {
	return src('src/styles.css'); // return au lieu d'appeler cb
}

Avec ce fichier, on peut ensuite exécuter en chaîne diverses opérations à l'aide de la fonction pipe. Schématiquement, cela ressemble à ceci :

function task(cb) {
	return src('src/styles.css')
		.pipe(opération1)
		.pipe(opération2)
		.pipe(opération3)
}

Le dernier appel de pipe dans la chaîne se termine par la fonction dest, qui spécifie le dossier dans lequel le résultat des opérations effectuées sera envoyé :

function task(cb) {
	return src('src/styles.css')
		.pipe(opération1)
		.pipe(opération2)
		.pipe(opération3)
		.pipe(dest('dist')); // envoyons dans le dossier dist
}

Chaque opération effectue une certaine manipulation de notre fichier. Par exemple, on peut d'abord transformer LESS en CSS, puis ajouter des préfixes aux propriétés CSS, puis minimiser le CSS obtenu et ainsi de suite.

Chaque opération a son propre plugin npm destiné à Gulp. Les plugins doivent être installés et connectés à notre fichier. Nous étudierons divers plugins dans les prochaines leçons.

Pour l'instant, pour s'échauffer, prenons notre fichier et envoyons-en une copie dans le dossier dist, comme si nous avions effectué quelques opérations dessus :

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

Créez trois fichiers CSS. Créez trois tâches publiques. Que chaque tâche crée une copie d'un de nos fichiers dans un dossier spécifié.

Tableau des chemins vers les fichiers

La fonction src peut prendre en paramètre non pas un seul fichier, mais plusieurs immédiatement sous forme de tableau :

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

Créez trois fichiers CSS. Créez une tâche qui fera une copie de nos fichiers dans le dossier spécifié.