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

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

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

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

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

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

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

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

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

function 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, σαν να κάναμε κάποιες λειτουργίες πάνω του:

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

Δημιουργήστε τρία αρχεία CSS. Δημιουργήστε τρεις δημόσιες εργασίες. Αφήστε κάθε εργασία να δημιουργεί ένα αντίγραφο ενός από τα αρχεία μας σε έναν καθορισμένο φάκελο.

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

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

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

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