Ξεκινώντας με το Gulp.js

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

Σε αυτό το άρθρο θα εξετάσουμε τα βασικά στοιχεία της χρήσης του Gulp - από την εγκατάσταση μέχρι τη βασική σύνταξη και μερικά παραδείγματα. Μέχρι το τέλος του άρθρου θα πρέπει να είστε σε θέση να να βρείτε, να εγκαταστήσετε και να χρησιμοποιήσετε πακέτα που έχουν δημιουργήσει άλλοι για το Gulp για να μεταγλωττίσετε το SASS, να βελτιστοποιήσετε τις εικόνες, να δημιουργήσετε sprites, να ενώσετε αρχεία και πολλά άλλα!

Εγκατάσταση Gulp

Μην ανησυχείτε, η εγκατάσταση είναι πολύ εύκολη. Θα πρέπει να χρησιμοποιήσουμε το τερματικό σε OSX και Linux ή στη γραμμή εντολών για Windows. Θα το αναφέρω ως Terminal από τώρα και στο εξής.

Ανοίξτε το και πληκτρολογήστε npm -v και πατήστε enter. Εάν δείτε τον αριθμό έκδοσης που εμφανίζεται, έχετε ήδη εγκαταστήσει τον κόμβο - αυτό είναι μια εξάρτηση για το Gulp.

Αν πάρετε ένα “η εντολή δεν βρέθηκε” (ή παρόμοιο σφάλμα), κατευθυνθείτε προς τα κάτω στη σελίδα λήψεων Node.js και επιλέξτε το κατάλληλο πακέτο για το σύστημά σας. Μόλις εγκατασταθεί, η εντολή npm θα είναι διαθέσιμη στο τερματικό.

Η εγκατάσταση του Gulp είναι εξίσου εύκολη. Επικολλήστε την ακόλουθη εντολή στο τερματικό, δηλαδή:

npm install --global gulp

Αυτό θα εγκαταστήσει την εντολή Gulp που θα είναι διαθέσιμη συνολικά στο σύστημά σας.

Προσθήκη Gulp σε ένα έργο

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

npm εγκαταστήστε --save-dev gulp

Αυτό θα πρέπει να δημιουργήσει ένα φάκελο node_modules και ένα αρχείο npm-debug.log στο φάκελο του έργου σας. Αυτά χρησιμοποιούνται από τον Gulp για να κάνουν τα πράγματα στο έργο σας, δεν χρειάζεται να σκεφτείτε γι 'αυτά σε αυτό το στάδιο.

Ο λόγος που πρέπει να προσθέσουμε το Gulp σε κάθε συγκεκριμένο έργο είναι αυτό κάθε σχέδιο έχει διαφορετικές απαιτήσεις. Κάποιος μπορεί να καλέσει για SASS, άλλο για Less. Κάποιος μπορεί να χρησιμοποιήσει το Coffeescript, ο άλλος δεν μπορεί, και ούτω καθεξής.

Το Gulpfile

Το Gulpfile είναι όπου συμβαίνει η μαγεία, είναι όπου καθορίζετε τις αυτοματοποιήσεις που χρειάζεστε και όταν θέλετε να συμβούν. Ας δημιουργήσουμε μια άδειο προεπιλεγμένη εργασία δημιουργώντας ένα αρχείο που ονομάζεται gulpfile.js και επικολλήστε τον ακόλουθο κώδικα σε αυτό.

var gulp = απαιτούν ('gulp'); gulp.task ('default', λειτουργία () // Αυτό δεν κάνει τίποτα για τώρα, θα προσθέσουμε σύντομα λειτουργικότητα);

Μόλις αποθηκευτεί αυτό το αρχείο, μπορείτε να επιστρέψετε στο τερματικό σας και να εκτελέσετε μόνοι σας την εντολή gulp. Το Gulp ανιχνεύει το έργο στο οποίο βρίσκεται και εκτελεί την προεπιλεγμένη εργασία - αυτή που μόλις δημιουργήσαμε. Θα πρέπει να δείτε κάτι τέτοιο:

Τίποτα δεν συμβαίνει πραγματικά, αφού το έργο είναι άδειο, αλλά λειτουργεί ωραία. Τώρα, ας πάμε με κάποια σωστά παραδείγματα!

Αντιγραφή αρχείου

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

Στο φάκελο του έργου σας δημιουργήστε ένα αρχείο που ονομάζεται to_copy.txt , και ένα φάκελο που ονομάζεται dev. Ας πάμε στο Gulpfile μας και δημιουργούμε ένα νέο έργο που ονομάζεται αντίγραφο.

gulp.task ('αντίγραφο', λειτουργία () επιστροφή gulp.src ('to_copy.txt') .pipe (gulp.dest ('dev')));

Η πρώτη γραμμή ορίζει μια εργασία που ονομάζεται αντίγραφο. Μέσα σ 'αυτό χρησιμοποιούμε το gulp.src για να καθορίσουμε τα αρχεία που στοχεύουμε με αυτή την εργασία - στην περίπτωση αυτή πρόκειται για ένα μόνο αρχείο που ονομάζεται to_copy.txt.

Στη συνέχεια, διοχετεύουμε αυτά τα αρχεία στη λειτουργία gulp.dest, η οποία καθορίζει πού θέλουμε να βάλουμε αυτά τα αρχεία - έχω χρησιμοποιήσει τον κατάλογο dev.

Επιστρέψτε στο τερματικό σας και πληκτρολογήστε gulp αντίγραφο για να εκτελέσετε αυτήν την εργασία, πρέπει να αντιγράψετε το καθορισμένο αρχείο στον καθορισμένο κατάλογο, κάτι σαν αυτό:

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

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

gulp.task ('copy', function () επιστροφή gulp.src ('development / *') .pipe (gulp.dest ('παραγωγή')););

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

Σύνταξη SASS

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

πληκτρολογώ SASS Gulp στο Google, το πρώτο αποτέλεσμα είναι συνήθως αυτό που χρειάζομαι, θα πρέπει να βρείτε τη σελίδα για το πακέτο SASS. Σας δείχνει πώς να το εγκαταστήσετε (npm install gulp-sass). Οι πιθανότητες είναι ότι θα χρειαστεί να χρησιμοποιήσετε το sudo για να το εγκαταστήσετε ως διαχειριστής, οπότε πιθανότατα θα είναι (sudo npm install gulp-sass) .

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

$ primary: # ff9900; σώμα background: $ primary; 

Τώρα δημιουργήστε την παρακάτω εργασία Gulp στο Gulpfile.

gulp.task ('sass', λειτουργία () gulp.src ('*. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css')););

Πριν εκτελέσετε την εντολή, μην ξεχάσετε να "χρειαστείτε" το πακέτο στο πάνω μέρος του Gulpfile όπως αυτό:

var sass = απαιτούν ('gulp-sass');

Όταν τρέχετε gulp sass, όλα τα αρχεία με την προέκταση scss θα μεταφερθούν στη λειτουργία sass, η οποία θα τα μετατρέψει σε css. Στη συνέχεια, μεταφέρονται στη λειτουργία προορισμού που τις τοποθετεί στο φάκελο css.

Παρακολούθηση αρχείων και φακέλων

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

Στο Gulpfile, δημιουργήστε μια εντολή που ονομάζεται αυτοματοποίηση το οποίο θα χρησιμοποιήσει την εντολή παρακολούθησης για να παρακολουθήσει ένα σύνολο αρχείων για αλλαγές και να εκτελέσει μια συγκεκριμένη εντολή όταν αλλάζει ένα αρχείο.

gulp.task ('αυτοματοποίηση', λειτουργία () gulp.watch ('*. scss', ['sass']););

Αν πληκτρολογείτε αυτοματοποίηση γλάσου στο τερματικό, θα ξεκινήσει και θα τελειώσει η εργασία, αλλά δεν θα επιστρέψει στην προτροπή επειδή παρακολουθεί τις αλλαγές. Έχουμε διευκρινίσει ότι θέλουμε να παρακολουθήσουμε όλα τα άχρηστα αρχεία στον ριζικό κατάλογο και αν αλλάξουν, θέλουμε να τρέξουμε την εντολή sass που έχουμε δημιουργήσει προηγουμένως.

Εάν αλλάξετε τώρα το αρχείο style.scss θα πρέπει να καταρτιστεί αυτόματα στο αρχείο css μέσα στον κατάλογο css.

Εκτέλεση πολλαπλών εργασιών

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

Εάν σχετίζονται εργασίες, μου αρέσει αλυσίδα τους. Ένα καλό παράδειγμα θα ήταν η αλληλουχία και η ελαχιστοποίηση αρχείων javascript. Αρχικά διοχετεύουμε τα αρχεία μας στη συναρπαστική δράση, στη συνέχεια τα διοχετεύουμε σε γλύπτη-uglify, στη συνέχεια χρησιμοποιήστε τη λειτουργία προορισμού για να τα εξάγετε.

Εάν οι εργασίες είναι άσχετες, θα μπορούσατε κλήση πολλαπλών εργασιών. Ένα παράδειγμα θα ήταν ένα καθήκον στο οποίο θέλουμε να συνενώσουμε και να εξαλείψουμε τα σενάρια μας και επίσης να καταρτίσουμε το SASS μας. Εδώ είναι πλήρης Gulpfile για το πώς θα φαίνεται.

var gulp = απαιτούν ('gulp'); var uglify = απαιτούν ('gulp-uglify'); var concat = απαιτούν ('gulp-concat'). var sass = απαιτούν ('gulp-sass'); gulp.task ('scripts', function () gulp.src ('js / ** / *. js') .pipe (concat ('scripts.js')) .pipe ) .pipe (uglify ()) .pipe (gulp.dest ('.'))); gulp.task ('styles', function () gulp.src ('/ * .ssss') .pipe (sass ()) .pipe (gulp.dest ('./ css'));); gulp.task ('αυτοματοποίηση', λειτουργία () gulp.watch (['* .sss', 'js / ** / *. js'], ['scripts', 'styles']))); gulp.task ('προεπιλογή', ['σενάρια', 'στυλ']);

Αν πληκτρολογείτε gulp scripts στο τερματικό, όλα τα αρχεία javascript μέσα στον κατάλογο js θα συνενώνονται, θα εξέρχονται στον κύριο κατάλογο και στη συνέχεια θα διαγραφούν και θα αποθηκευτούν στον κύριο κατάλογο.

Αν πληκτρολογείτε gulp sass, όλα τα αρχεία σας scss θα συνταχθούν και θα αποθηκευτούν στον κατάλογο css.

Αν πληκτρολογείτε χαψιά (η προεπιλεγμένη εργασία) σεναρίων το έργο θα εκτελεστεί, ακολουθούμενο από το δικό σας στυλ έργο.

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

ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ

Χρησιμοποιώντας το Gulp δεν είναι δύσκολο, στην πραγματικότητα, πολλοί άνθρωποι το προτιμούν πάνω από το Grunt λόγω της απλούστερης σύνταξής του. Θυμηθείτε τα βήματα που πρέπει να ακολουθήσετε κατά τη δημιουργία μιας νέας αυτοματοποίησης:

• Αναζήτηση για plugin
• Εγκατάσταση πρόσθετου
• Απαιτήστε plugin στο Gulpfile σας
• Χρησιμοποιήστε τη σύνταξη στην τεκμηρίωση

Οι πέντε εντολές που είναι διαθέσιμες στο Gulp (task, run, watch, src, dest) είναι οι μόνοι που πρέπει να γνωρίζετε, όλα τα πρόσθετα τρίτων έχουν μεγάλη τεκμηρίωση. Ακολουθεί μια λίστα με μερικά πράγματα που χρησιμοποιώ και τα οποία θα μπορούσατε να ξεκινήσετε τώρα:

• Βελτιστοποίηση εικόνων με βελτιστοποίηση εικόνας gulp-image
• Δημιουργία εικόνων sprites με gulp-sprite
• Συγχρονισμός αρχείων με γουλιά-concat
• Μικρογράφηση αρχείων με γκράπ-uglify
• Διαγραφή αρχείων με gulp-del
• Javascript linting με gulp-jslint
• Το JSON γδάρει με gulp-jsonlint
• Autoprefix CSS με gulp-autoprefixer
• Αναζήτηση και αντικατάσταση χρησιμοποιώντας gulp-frep
• Μείωση του CSS με gulp-minify-css