Εργασία με αρχεία στο Gulp

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

Για αυτό προορίζονται οι ειδικές συναρτήσεις src και dest. Ας εισάγουμε πρώτα αυτές από τη βιβλιοθήκη μας:

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

Η συνάρτηση src επιτρέπει την απόκτηση του καθορισμένου αρχείου:

javascriptfunction task(cb) {
  return src('src/styles.css'); // return αντί για κλήση cb
}

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

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(λειτουργία1)
    .pipe(λειτουργία2)
    .pipe(λειτουργία3)
}

Η τελευταία κλήση pipe στην αλυσίδα ολοκληρώνεται με τη συνάρτηση dest, που ορίζει το φάκελο στον οποίο θα σταλεί το αποτέλεσμα των πραγματοποιημένων λειτουργιών:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(λειτουργία1)
    .pipe(λειτουργία2)
    .pipe(λειτουργία3)
    .pipe(dest('dist')); // θα σταλεί στο φάκελο dist
}

Κάθε λειτουργία παράγει κάποια χειρισμό με το αρχείο μας. Για παράδειγμα, μπορείτε πρώτα να μετατρέψετε το LESS σε CSS, στη συνέχεια να προσθέσετε προθέματα στις ιδιότητες CSS, μετά να ελαχιστοποιήσετε το προκύπτον CSS και ούτω καθεξής.

Για κάθε λειτουργία προορίζεται το δικό του npm plugin για το Gulp. Τα plugins πρέπει να εγκαθίστανται και να συνδέονται με το αρχείο μας. Η μελέτη διαφόρων plugins θα ασχοληθούμε στα επόμενα μαθήματα.

Προς το παρόν για ζέσταμα ας πάρουμε το αρχείο μας και ας στείλουμε ένα αντίγραφό του στο φάκελο dist, σαν να κάναμε κάποιες λειτουργίες πάνω του:

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

Πίνακας με διαδρομές προς αρχεία

Η συνάρτηση src μπορεί να δεχτεί ως παράμετρο όχι ένα αρχείο, αλλά πολλά ταυτόχρονα σε μορφή πίνακα:

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