Working with Files in Gulp

Gulp allows you to take a group of files, perform an operation on this group, and then place the modified files at a new address.

For this purpose, special functions src and dest are intended. Let's start by importing them from our library:

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

The src function allows you to get the specified file:

function task(cb) {
	return src('src/styles.css'); // return instead of calling cb
}

You can then perform various operations on this file in a chain using the pipe function. Schematically, it looks like this:

function task(cb) {
	return src('src/styles.css')
		.pipe(operation1)
		.pipe(operation2)
		.pipe(operation3)
}

The last pipe call in the chain ends with the dest function, which specifies the folder where the result of the performed operations will be sent:

function task(cb) {
	return src('src/styles.css')
		.pipe(operation1)
		.pipe(operation2)
		.pipe(operation3)
		.pipe(dest('dist')); // send to the dist folder
}

Each operation performs some manipulation on our file. For example, you can first convert LESS to CSS, then add prefixes to CSS properties, then minify the resulting CSS, and so on.

A separate npm plugin for Gulp is intended for each operation. Plugins need to be installed and connected to our file. We will study various plugins in the following lessons.

For now, as a warm-up, let's take our file and send a copy of it to the dist folder, as if we had performed some operations on it:

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

Create three CSS files. Create three public tasks. Let each task create a copy of one of our files in a specified folder.

Array of File Paths

The src function can take not one file as a parameter, but several at once in the form of an array:

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

Create three CSS files. Create a task that will make a copy of our files in the specified folder.