Dateien zusammenführen in Gulp

Beim Schreiben von CSS-Code ist es praktisch, ihn in mehrere Dateien aufzuteilen. Je mehr Dateien es jedoch gibt, desto langsamer lädt die Website-Seite. Es stellt sich heraus, dass es beim Schreiben von Code praktisch ist, in mehreren Dateien zu arbeiten, aber beim Einbinden in HTML diese Dateien in einer einzigen Datei zusammenzuführen.

Dabei hilft uns das spezielle Plugin gulp-concat. Lassen Sie es uns in unser Projekt installieren: in unser Projekt:

npm install gulp-concat --save-dev

Danach importieren wir das installierte Plugin:

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

Lassen Sie uns damit mehrere CSS-Dateien in einer Datei zusammenfassen:

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

Führen Sie mehrere JavaScript-Dateien zu einer zusammen.

Operationen mit der zusammengeführten Datei

Nach dem Zusammenführen bewegt sich weiter in der Kette nur eine einzige zusammengeführte Datei, und an ihr können verschiedene Operationen durchgeführt werden.

Lassen Sie uns als Beispiel die Minimierung von CSS durchführen:

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

Führen Sie mehrere LESS-Dateien zu einer zusammen, wandeln Sie dann diese Datei in CSS um und führen Sie anschließend die Minimierung des erhaltenen CSS durch.