![30 глупых вопросов Product Manager [Карьера в IT]](https://i.ytimg.com/vi/-WCQlXIL9M4/hqdefault.jpg)
Περιεχόμενο
Οι εκτελεστές εργασιών JavaScript όπως το Grunt έχουν γίνει εξαιρετικά δημοφιλείς στους προγραμματιστές front-end. Αυτό συμβαίνει επειδή βοηθούν να κάνουν το ένα πράγμα που όλοι θέλουμε να κάνουμε στις δουλειές μας - εξοικονομήστε χρόνο!
Αλλά με περισσότερα από 5.000 (και μετρώντας) πρόσθετα Grunt τώρα διαθέσιμα, μπορεί να είναι δύσκολο για τους προγραμματιστές να βρουν αυτά τα «διαμάντια στο τραχύ». Ρίξαμε μια ματιά πίσω στο χρόνο που έχουμε κολλήσει στο Grunt για να βρούμε την τέλεια συνταγή των προσθηκών Grunt που πρέπει να χρησιμοποιείτε.
01. Αναβάθμιση
Κάθε προγραμματιστής front-end που αξίζει το αλάτι του γνωρίζει τα πλεονεκτήματα της ελαχιστοποίησης αρχείων JavaScript και αυτό ακριβώς κάνει αυτό το πρόσθετο. Αυτή είναι η δημοτικότητά της, στην πραγματικότητα περιλαμβάνεται στον Οδηγό έναρξης του Grunt. Παρά το όνομα, αυτό το πρόσθετο μπορεί επίσης να χρησιμοποιηθεί για να ομορφύνει τον κώδικα JavaScript σας - αν και αυτό δεν είναι ιδιαίτερα χρήσιμο για χρήση στην παραγωγή.
02. Sass
Μπορεί να υπάρξει κάποια συζήτηση σχετικά με το ποιος είναι ο προεπεξεργαστής CSS που κυριαρχεί πραγματικά, αλλά εδώ στο Stickyeyes, έχουμε εγκατασταθεί στο Sass παρά στον κύριο αντίπαλό του, το Less. Αυτή η προσθήκη μας επιτρέπει να γράφουμε τα αρχεία Sass και να τα συντάσσουμε αυτόματα στο CSS. Τα πλεονεκτήματα της χρήσης ενός προ-επεξεργαστή CSS εγγυάται ένα ξεχωριστό άρθρο από μόνο του, αλλά είναι ασφαλές να πούμε ότι αν δεν χρησιμοποιείτε ήδη ένα, είστε πολύ αργά στο πάρτι!
03. CSSMin
Αυτό το πρόσθετο είναι το αντίστοιχο CSS του Uglify. Παίρνει απλά συγκεκριμένα αρχεία CSS και τα ελαχιστοποιεί. Φυσικά, αν πρόκειται να το χρησιμοποιήσετε σε συνδυασμό με την προσθήκη Sass, τότε πρέπει να διασφαλίσετε ότι αυτή η εργασία εκτελείται μετά την εργασία Sass.
Υπάρχουν πολλές εναλλακτικές λύσεις για το CSSMin που μπορούν επίσης να μειώσουν το μέγεθος των αρχείων CSS χρησιμοποιώντας ελαφρώς διαφορετικές τεχνικές. CSS nano, CSS wring, CSS shrink, κ.λπ. Διαβάστε αυτό το εύχρηστο σημείο αναφοράς αν είστε σε αυτό το είδος υλικού.
04. Concat
Όπως υποδηλώνει το όνομα, αυτό το πρόσθετο παίρνει απλά πολλά αρχεία και τα συνδυάζει σε ένα. Όπως με την ελαχιστοποίηση κώδικα, η συνένωση αρχείων είναι επίσης μια παλιά πρακτική για τη μείωση των χρόνων φόρτωσης σελίδας.
Η συνένωση αρχείων πρέπει πάντα να χρησιμοποιείται στην παραγωγή τόσο για JavaScript όσο και για CSS. Αυτή είναι συνήθως η τελευταία εργασία που πρέπει να εκτελεστεί - μετά την εργασία προεπεξεργασίας CSS και την εργασία ελαχιστοποίησης. Είναι εύκολο να πείτε σε αυτό το πρόσθετο να συνενώνει όλα τα αρχεία σε έναν συγκεκριμένο κατάλογο, αλλά προσέξτε τη σειρά με την οποία θα συνενωθούν τα αρχεία - ίσως χρειαστεί να δώσετε μια συγκεκριμένη παραγγελία ή να ονομάσετε τα αρχεία, ώστε να είναι πάντα συνενωμένα με τη σειρά που θέλετε .
05. ImageMin
Στο ίδιο πνεύμα με το CSSMin και το Uglify, το ImageMin αντιμετωπίζει ένα άλλο παλιό πρόβλημα για φόρτωση σελίδας - μέγεθος αρχείου εικόνας. Η εικόνα «ελαχιστοποίηση» είναι συνήθως μια πρώτη θύρα για βελτιστοποίηση, επομένως αυτή η προσθήκη είναι απαραίτητη για τη μείωση του συνολικού μεγέθους του αρχείου σελίδας όσο το δυνατόν περισσότερο.
Εάν εργάζεστε με JPG, PNG, GIF ή SVG (μια ολοένα και πιο δημοφιλής μορφή διανυσματικής εικόνας), αυτό το πρόσθετο θα έχει ως αποτέλεσμα μείωση χωρίς απώλειες στο μέγεθος του αρχείου των εικόνων σας, χωρίς να χρειάζεται να σηκώσετε το δάχτυλό σας. Εάν έχετε πολλές εικόνες στο έργο σας, είναι καλή ιδέα να εκτελέσετε αυτήν την εργασία μόνο όταν πιέζετε για παραγωγή, αντί να εκτελέσετε αυτήν την εργασία σε ένα συμβάν παρακολούθησης (δείτε το επόμενο σημείο).
06. Παρακολουθήστε
Αυτή η προσθήκη δεν επηρεάζει πραγματικά την ιστοσελίδα σας, αλλά είναι εξαιρετικά χρήσιμη για τη δημιουργία μιας αποτελεσματικής διαδικασίας Grunt. Το ρολόι παρακολουθεί απλώς τους καταλόγους που καθορίζετε και όταν αλλάξει κάτι θα ενεργοποιήσει αυτόματα ορισμένες εργασίες Grunt.
Έτσι, μπορείτε να ορίσετε μια συνθήκη παρακολούθησης στον κατάλογο «js» για να εκτελέσετε τις εργασίες σας JavaScript και μια άλλη στον κατάλογο «css» για την εκτέλεση των εργασιών CSS. Αυτό σημαίνει ότι δεν θα χρειαστεί ποτέ να εκτελέσετε χειροκίνητα την κύρια διαδικασία Grunt! Απλώς ξεκινήστε την εργασία ρολογιού grunt προτού αρχίσετε να κάνετε αλλαγές και μπορείτε να ξεχάσετε ότι είναι ακόμη εκεί.
Λόγια: Jamie Shields
Ο Jamie Shields είναι προγραμματιστής υποστήριξης στο πρακτορείο ψηφιακού μάρκετινγκ Stickyeyes.
Σαν αυτό? Διάβασε αυτό!
- Grunt vs Gulp: Ποιο εργαλείο δημιουργίας JavaScript πρέπει να επιλέξετε;
- 8 τρόποι για να βελτιώσετε τη ρύθμιση Grunt
- Τα καλύτερα δωρεάν θέματα WordPress
