Gulp - Μια εργαλειοθήκη για την αυτοματοποίηση επώδυνων εργασιών στην ανάπτυξη

Το Gulp είναι μια μικρή εργαλειοθήκη που αυτοματοποιεί επαναλαμβανόμενες εργασίες. Αυτές οι επαναλαμβανόμενες εργασίες είναι συνήθως η μεταγλώττιση αρχείων CSS, JavaScript ή βασικά όταν χρησιμοποιείτε ένα πλαίσιο που ασχολείται με μη τυποποιημένα αρχεία JavaScript/CSS, θα θέλετε να χρησιμοποιήσετε ένα εργαλείο αυτοματισμού που αρπάζει αυτά τα αρχεία, τα συσκευάζει μαζί και μεταγλωττίζει τα πάντα, ώστε το πρόγραμμα περιήγησής σας να μπορεί να κατανοήσει εύκολα το.

Το Gulp είναι χρήσιμο για την αυτοματοποίηση των ακόλουθων εργασιών:

Σύνταξη αρχείων JS και CSS
Ανανέωση της σελίδας του προγράμματος περιήγησης όταν αποθηκεύετε ένα αρχείο
Εκτελέστε μια δοκιμή μονάδας
Ανάλυση κώδικα
Αντιγραφή τροποποιημένων αρχείων σε έναν κατάλογο προορισμού

Για να παρακολουθείτε όλα τα αρχεία που χρειάζεστε για να δημιουργήσετε ένα αρχείο gulp, να αναπτύξετε το εργαλείο αυτοματοποίησης ή να αυτοματοποιήσετε εργασίες, πρέπει να δημιουργήσετε ένα αρχείο package.json. Το αρχείο περιέχει βασικά επεξήγηση του τι υπάρχει μέσα στο έργο σας, ποιες εξαρτήσεις χρειάζεστε για να λειτουργήσει το έργο σας.

Σε αυτό το σεμινάριο, θα μάθετε πώς να εγκαταστήσετε το Gulp και πώς να αυτοματοποιήσετε ορισμένες βασικές εργασίες για τα έργα σας. Θα χρησιμοποιήσουμε το npm – το οποίο σημαίνει διαχειριστής πακέτων κόμβου. Είναι εγκατεστημένο με το Node.js και μπορείτε να ελέγξετε αν έχετε ήδη εγκαταστήσει τα Nodej και npm με:

# node --version
# npm --version

Εάν δεν το έχετε ήδη εγκαταστήσει στο σύστημά σας, σας συνιστώ να ελέγξετε το σεμινάριο: Εγκατάσταση της τελευταίας έκδοσης Nodejs και NPM σε συστήματα Linux.

Πώς να εγκαταστήσετε το Gulp στο Linux

Η εγκατάσταση του gulp-cli μπορεί να ολοκληρωθεί με npm χρησιμοποιώντας την ακόλουθη εντολή.

# npm install --global gulp-cli

Εάν θέλετε να εγκαταστήσετε τη μονάδα gulp τοπικά (μόνο για το τρέχον έργο), μπορείτε να χρησιμοποιήσετε τις παρακάτω οδηγίες:

Δημιουργήστε έναν κατάλογο έργου και πλοηγηθείτε σε αυτόν:

# mkdir myproject
# cd myproject

Στη συνέχεια, χρησιμοποιήστε την ακόλουθη εντολή για να αρχικοποιήσετε το έργο σας:

# npm init

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

Τώρα μπορούμε να εγκαταστήσουμε το πακέτο gulp στο έργο μας με:

# npm install --save-dev gulp

Η επιλογή --save-dev λέει στο npm να ενημερώσει το αρχείο package.json με τις νέες devDependencies.

Λάβετε υπόψη ότι οι devDependencies πρέπει να επιλυθούν κατά την ανάπτυξη, ενώ οι εξαρτήσεις κατά τη διάρκεια του χρόνου εκτέλεσης. Δεδομένου ότι το gulp είναι ένα εργαλείο που μας βοηθά στην ανάπτυξη, πρέπει να επιλυθεί κατά το χρόνο ανάπτυξης.

Δημιουργία αρχείου Gulp

Τώρα ας δημιουργήσουμε ένα gulpfile. Οι εργασίες που θέλουμε να εκτελέσουμε θα βρεθούν σε αυτό το αρχείο. Φορτώνεται αυτόματα όταν χρησιμοποιείται η εντολή gulp. Χρησιμοποιώντας ένα πρόγραμμα επεξεργασίας κειμένου, δημιουργήστε ένα αρχείο με το όνομα gulpfile.js. Για τους σκοπούς αυτού του σεμιναρίου, θα δημιουργήσουμε ένα απλό τεστ.

Μπορείτε να εισαγάγετε τον ακόλουθο κώδικα στο gulpfile.js σας:

var gulp = require('gulp');

gulp.task('hello', function(done) {
        console.log('Hello world!');
        done();
});

Αποθηκεύστε το αρχείο και δοκιμάστε τώρα να το εκτελέσετε με:

# gulp hello

Θα πρέπει να δείτε το ακόλουθο αποτέλεσμα:

Να τι κάνει ο παραπάνω κώδικας:

var gulp=require('gulp'); – εισάγει τη μονάδα gulp.
gulp.task('hello', function(done) { – ορίζει μια εργασία που θα είναι διαθέσιμη από τη γραμμή εντολών.
console.log('Hello world!'); – απλώς εκτυπώνει το \Hellow world! στην οθόνη.
done(); – χρησιμοποιούμε αυτήν τη συνάρτηση επανάκλησης για να υποδείξουμε στο gulp ότι οι εργασίες μας έχουν ολοκληρωθεί.

Φυσικά τα παραπάνω ήταν απλώς ένα δείγμα για να δείξουμε πώς μπορεί να οργανωθεί το gulpfile.js. Εάν θέλετε να δείτε τις διαθέσιμες εργασίες από το gulpfile.js, μπορείτε να χρησιμοποιήσετε την ακόλουθη εντολή:

# gulp --tasks

Gulp Plugins

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

Παρακάτω θα χρησιμοποιήσουμε την προσθήκη minify-html σε ένα πιο πρακτικό παράδειγμα. Με την παρακάτω λειτουργία, μπορείτε να ελαχιστοποιήσετε τα αρχεία HTML και να τα τοποθετήσετε σε νέο κατάλογο. Αλλά πρώτα, θα εγκαταστήσουμε την προσθήκη gulp-minify-html:

# npm install --save-dev gulp-minify-html

Μπορείτε να κάνετε το gulpfile.js σας να μοιάζει με αυτό:

# cat gulpfile.js

Δείγμα εξόδου

// including plugins
var gulp = require('gulp')
, minifyHtml = require("gulp-minify-html");

// task
gulp.task('minify-html', function (done) {
    gulp.src('./src/*.html') // path to your files
    .pipe(minifyHtml())
    .pipe(gulp.dest('./dest'));
    done()
});

Στη συνέχεια, μπορείτε να ελαχιστοποιήσετε τα αρχεία HTML χρησιμοποιώντας τις ακόλουθες εντολές.

# gulp minify-html
# du -sh /src dest/

συμπέρασμα

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