Παρακολούθηση αλλαγών εγγράφων στο Gulp

Δεν είναι πολύ βολικό να καλείτε κάθε φορά μια εντολή στο terminal όταν χρειάζεται να εκτελέσετε κάποιο μετασχηματισμό - καθώς κατά τη σύνταξη κώδικα αυτό πρέπει να γίνεται πολύ συχνά.

Για αυτόν το λόγο, το Gulp έχει μια ενσωματωμένη ειδική λειτουργία watch για την παρακολούθηση αλλαγών αρχείων. Όταν αλλάξει οποιοδήποτε από τα παρακολουθούμενα αρχεία, το αντίστοιχο task θα εκκινηθεί αυτόματα.

Ας δούμε ένα παράδειγμα μετατροπής LESS σε CSS. Αρχικά, ας εισάγουμε ό,τι είναι απαραίτητο:

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

Τώρα ας φτιάξουμε ένα task για τη μετατροπή:

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

Τώρα ας εκτελέσουμε export μιας ανώνυμης συνάρτησης, μέσα στην οποία θα παρακολουθούμε τις αλλαγές των αρχείων μας, καλώντας σε αυτήν την περίπτωση το task μας:

exports.default = function() {
	watch('src/*.less', task);
};

Μετά την εκκίνηση, στο command line θα εκτελείται συνεχώς ένα "αιώνιο" task. Αυτό σημαίνει ότι σε αυτό το terminal δεν θα μπορείτε να εισάγετε άλλες εντολές. Μπορείτε να διακόψετε την εκτέλεση ενός τέτοιου task πατώντας στο terminal το συνδυασμό Ctrl + C.

Μπορείτε να παρακολουθείτε διάφορες ομάδες αρχείων, συνδέοντας με αυτές διάφορα tasks:

exports.default = function() {
	watch('src/*.less', task1);
	watch('src/*.sass', task1);
};

Ή μπορείτε για μια ομάδα να εκτελέσετε μια σειρά από tasks:

exports.default = function() {
	watch('src/*.less', series(task1, task2));
};

Ας υποθέσουμε ότι έχετε μια ομάδα από αρχεία JavaScript. Φροντίστε ώστε αυτά τα αρχεία να συγχωνεύονται σε ένα αρχείο, και στη συνέχεια να εκτελείται minimization αυτού του αρχείου. Φροντίστε ώστε το task να εκτελείται όταν αλλάξει οποιοδήποτε από τα αρχεία μας.