Gulpでのファイル結合

CSSコードを書く際には、複数のファイルに分割すると便利です。しかし、ファイルが多ければ多いほど、サイトのページの読み込みは遅くなります。つまり、コードを書く際には複数のファイルで作業するのが便利ですが、HTMLに接続する際にはこれらのファイルを1つにまとめる必要があるのです。

これを実現するのに、特別なプラグインgulp-concatが役立ちます。私たちのプロジェクトにインストールしましょう：私たちのプロジェクトにインストールしましょう：

npm install gulp-concat --save-dev

その後、インストールしたプラグインをインポートします：

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

これを使って、複数のCSSファイルを1つにまとめてみましょう：

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

複数のJavaScriptファイルを1つに結合してください。

結合後のファイルに対する操作

結合後、チェーンをさらに進むのは1つの結合されたファイルであり、そのファイルに対してさまざまな操作を実行することができます。

例として、CSSの最小化を実行してみましょう：

function task(cb) {
	return src('src/*.css')
		.pipe(concat('bundle.css'))
		.pipe(cleanCSS())
		.pipe(dest('dist'));
}

複数のLESSファイルを1つに結合し、次にそのファイルをCSSに変換し、その後、得られたCSSの最小化を実行してください。