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

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

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

terminalnpm install gulp-concat --save-dev 

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

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

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

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

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

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

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

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