Συγχώνευση αρχείων στο Gulp

Κατά τη σύνταξη κώδικα CSS είναι βολικό να τον χωρίζουμε σε πολλά αρχεία. Ωστόσο, όσα περισσότερα αρχεία υπάρχουν, τόσο πιο αργή θα φορτώνεται η ιστοσελίδα. Αποδεικνύεται ότι κατά τη σύνταξη κώδικα είναι βολικό να δουλεύουμε σε πολλά αρχεία, αλλά κατά τη σύνδεση στο HTML να συγχωνεύουμε αυτά τα αρχεία σε ένα.

Σε αυτό θα μας βοηθήσει ένα ειδικό plugin gulp-concat. Ας το εγκαταστήσουμε στο project μας: στο project μας:

npm install gulp-concat --save-dev

Μετά από αυτό, εισάγουμε το εγκατεστημένο plugin:

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

Ας χρησιμοποιήσουμε το gulp-concat για να συνδέσουμε πολλά αρχεία CSS σε ένα:

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

Συγχωνεύστε πολλά αρχεία JavaScript σε ένα.

Λειτουργίες με το συγχωνευμένο αρχείο

Μετά τη συγχώνευση, κατά μήκος της αλυσίδας θα προχωρήσει ένα συγχωνευμένο αρχείο και πάνω του μπορούν να εκτελεστούν διάφορες λειτουργίες.

Για παράδειγμα, ας εκτελέσουμε minification του CSS:

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

Συγχωνεύστε πολλά αρχεία LESS σε ένα, μετατρέψτε μετά αυτό το αρχείο σε CSS και εκτελέστε minification του CSS που προέκυψε.