Gulpでのファイル操作

Gulpを使用すると、ファイルのグループを取得し、そのグループに対して何らかの操作を実行し、変更されたファイルを新しい場所に配置することができます。

このために、特別な関数srcとdestが用意されています。まずは、これらをライブラリからインポートしましょう：

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

関数srcは、指定されたファイルを取得することができます：

function task(cb) {
	return src('src/styles.css'); // コールバック呼び出しの代わりにreturn
}

このファイルに対しては、その後、関数pipeを使用してチェーンでさまざまな操作を実行できます。これを模式的に示すと次のようになります：

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

チェーン内の最後のpipe呼び出しは、実行された操作の結果が送られるフォルダを指定する関数destで終了します：

function task(cb) {
	return src('src/styles.css')
		.pipe(operation1)
		.pipe(operation2)
		.pipe(operation3)
		.pipe(dest('dist')); // distフォルダに送る
}

各操作は、ファイルに対して何らかの操作を実行します。たとえば、最初にLESSをCSSに変換し、次にCSSプロパティにプレフィックスを追加し、その後、得られたCSSを最小化する、などができます。

各操作には、Gulp用の専用のnpmプラグインがあります。プラグインはインストールし、ファイルに接続する必要があります。さまざまなプラグインの学習は、次のレッスンで取り組みます。

準備運動として、ファイルを取得し、あたかもいくつかの操作を行ったかのように、そのコピーをフォルダdistに送ってみましょう：

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

3つのCSSファイルを作成してください。 3つのパブリックタスクを作成してください。各タスクが、ファイルの1つを指定されたフォルダにコピーするようにします。

ファイルパスの配列

関数srcは、パラメータとして1つのファイルだけでなく、配列として複数のファイルを一度に受け取ることができます：

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

3つのCSSファイルを作成してください。タスクを作成し、指定されたフォルダにファイルのコピーを作成するようにします。