Πώς να χρησιμοποιήσετε το Grunt για την αυτοματοποίηση της ροής εργασίας σας [Tutorials]

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

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

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

Περισσότερα για το Hongkiat.com:

• Το CSSMatic καθιστά το CSS εύκολο για τους σχεδιαστές ιστοσελίδων
• Αυτοματοποίηση εργασιών σε Mac με Ενέργειες φακέλου
• Αυτοματοποιήστε τα αρχεία Dropbox με τις Ενέργειες
• 10 εφαρμογές που θα σας βοηθήσουν να αυτοματοποιήσετε τις Εργασίες στη συσκευή σας Android
• Πώς να (αυτομάτως) δημιουργήσετε αντίγραφα ασφαλείας στον ιστότοπό σας στο Dropbox

Εγκατάσταση του Grunt

Η εγκατάσταση του Grunt είναι πολύ εύκολη επειδή χρησιμοποιεί τον διαχειριστή πακέτων κόμβων. Αυτό σημαίνει ότι ίσως χρειαστεί να εγκαταστήσετε και τον ίδιο τον κόμβο. Ανοίξτε ένα τερματικό ή μια γραμμή εντολών (θα καλώ από εδώ και στο εξής το τερματικό) και εισάγετε nmp -v.

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

Μόλις εγκατασταθεί ο κόμβος, η λήψη του Grunt είναι θέμα μίας μόνο εντολής που εκδίδεται στο τερματικό:

npm εγκατάσταση -g grunt-cli

Βασική χρήση

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

Δύο αρχεία αποτελούν την καρδιά του Grunt: package.json και Gruntfile.js. Το πακέτο πακέτων καθορίζει όλες τις εξαρτήσεις τρίτου μέρους που θα χρησιμοποιήσει η αυτοματοποίηση, το Gruntfile σάς επιτρέπει να ελέγχετε πως ακριβώς αυτά χρησιμοποιούνται. Ας δημιουργήσουμε τώρα ένα πακέτο πακέτων γυμνών οστών με το ακόλουθο περιεχόμενο:

"όνομα": "test-project", "έκδοση": "1.0", "devDependencies": "grunt": "~ 0.4.5",

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

Μπορεί να αναρωτιέστε τι κάνει εκείνη η απατηλή γραμμή (~) που ονομάζεται tilda.

Οι εκδόσεις μπορούν να απαιτηθούν χρησιμοποιώντας τους κανόνες από τη σημασιολογική έκδοση για npm. Με λίγα λόγια:

• Μπορείτε να ορίσετε μια ακριβή έκδοση όπως 4.5.2
• Μπορείτε να χρησιμοποιήσετε μεγαλύτερη από / μικρότερη από την ένδειξη ελάχιστης ή μέγιστης έκδοσης, όπως > 4.0.3
• Η χρήση του tilde καθορίζει ένα μπλοκ έκδοσης. Χρησιμοποιώντας ~ 1.2 θεωρείται ότι είναι 1.2.x, οποιαδήποτε έκδοση πάνω από 1.2.0 αλλά κάτω από 1.3

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

 module.exports = λειτουργία (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('προεπιλογή', []); , 

Αυτό είναι βασικά ο σκελετός για ένα Gruntfile. υπάρχουν δύο σημεία ενδιαφέροντος. Μια θέση βρίσκεται μέσα στο initConfig () λειτουργία. Εδώ πηγαίνει όλη η διαμόρφωση του έργου σας. Αυτό θα περιλαμβάνει πράγματα όπως το χειρισμό της σύνταξης LESS / SASS, γραφήματα μικρογράφησης κ.ο.κ..

Η δεύτερη θέση βρίσκεται κάτω από τη συνάρτηση όπου καθορίζετε εργασίες. Μπορείτε να δείτε μια συγκεκριμένη εργασία που ονομάζεται “Προκαθορισμένο”. Είναι άδειο προς το παρόν, επομένως δεν κάνει τίποτα, αλλά θα το επεκτείνουμε αργότερα. Οι εργασίες ουσιαστικά αναστέλλουν τα κομμάτια από τη διαμόρφωση του έργου και τα εκτελούν.

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

Η πρώτη μας εργασία

Ας δημιουργήσουμε μια εργασία η οποία μικροσκοπεί ένα αρχείο javascript για εμάς.

Υπάρχουν τέσσερα πράγματα που πρέπει να κάνουμε οποιαδήποτε στιγμή θέλουμε να προσθέσουμε ένα νέο καθήκον:

• Εγκαταστήστε μια προσθήκη εάν είναι απαραίτητο
• Απαιτήστε το στο Gruntfile
• Γράψτε μια εργασία
• Προσθέστε το σε μια ομάδα εργασιών, εάν χρειάζεται

(1) Εύρεση και εγκατάσταση Plugin

Ο ευκολότερος τρόπος για να βρείτε το plugin που χρειάζεστε είναι να πληκτρολογήσετε κάτι τέτοιο στο Google: “minify javascript grunt plugin”. Το πρώτο αποτέλεσμα θα σας οδηγήσει στο plugin grunt-contrib-uglify που είναι ακριβώς αυτό που χρειαζόμαστε.

Η σελίδα Github σας λέει όλα όσα πρέπει να γνωρίζετε. Η εγκατάσταση είναι μια γραμμή στο τερματικό, εδώ πρέπει να χρησιμοποιήσετε:

 npm εγκατάσταση grunt-contrib-uglify -save-dev 

Ενδέχεται να χρειαστεί να εκτελέσετε αυτήν την ενέργεια με δικαιώματα διαχειριστή. Αν πάρετε κάτι σαν npm ERR! Δοκιμάστε να εκτελέσετε ξανά αυτήν την εντολή ως root / Administrator. κατά μήκος του τρόπου απλά πληκτρολογήστε sudo πριν από την εντολή και πληκτρολογήστε τον κωδικό πρόσβασής σας όταν σας ζητηθεί:

 sudo npm εγκαταστήστε grunt-contrib-uglify - save-dev 

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

(2) Απαιτείται στο Gruntfile

Το επόμενο βήμα είναι να προσθέσετε το Gruntfile ως απαίτηση. Μου αρέσει να προσθέσω plugins στην κορυφή του αρχείου, εδώ είναι το πλήρες Gruntfile μου μετά την προσθήκη grunt.loadNpmTasks ('grunt-contrib-uglify');.

 module.exports = λειτουργία (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('προεπιλογή', []); , 

(3) Δημιουργήστε μια εργασία για τη μικρογραφία των σεναρίων

Όπως συζητήσαμε, αυτό πρέπει να γίνει στο πλαίσιο του initConfig () λειτουργία. Η σελίδα Github για το plugin (και τα περισσότερα άλλα plugins) σας δίνει πολλές πληροφορίες και παραδείγματα. Εδώ χρησιμοποιήσαμε το δοκιμαστικό μου έργο.

 uglify: build: src: 'js / scripts.js', dest: 'js / scripts.min.js' 

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

Προς το παρόν, ας ρίξουμε μια ματιά στο πλήρες Gruntfile αφού αυτό έχει προστεθεί, για να βεβαιωθείτε ότι γνωρίζετε πώς τα πράγματα ταιριάζουν.

 module.exports = λειτουργία (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), uglify: build: src: 'scripts.js', dest: 'scripts.min.js'); grunt.registerTask ('προεπιλογή', []); , 

(4) Προσθέστε αυτήν τη διαμόρφωση σε μια ομάδα εργασιών

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

 grunt.registerTask ('default', 'uglify')). 

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

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

Συγχώνευση αρχείων

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

Η συνένωση είναι η διαδικασία συνδυασμού των περιεχομένων πολλών αρχείων σε ένα μόνο αρχείο. Θα χρειαστούμε το plugin grunt-contrib-concat. Ας δούμε τα βήματα:

Για να εγκαταστήσετε τη χρήση του plugin npm Εγκατάσταση grunt-contrib-concat -save-dev στο τερματικό. Αφού γίνει, βεβαιωθείτε ότι το προσθέσατε στο Gruntfile σας όπως ακριβώς πριν χρησιμοποιήσετε grunt.loadNpmTasks ('grunt-contrib-concat');.

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

 concat: dist: src: ['dev / js / header.js', 'dev / js / myplugin.js', 'dev / js / footer.js'], dest: 'js / scripts.js' ,, 

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

Αυτό είναι ήδη πολύ ισχυρό αλλά τι γίνεται αν προστεθεί ένα νέο αρχείο; Πρέπει να επιστρέψουμε εδώ όλη την ώρα; Φυσικά όχι, μπορούμε να καθορίσουμε ένα ολόκληρο φάκελο των αρχείων για να συγκολλήσουμε.

 concat: dist: src: 'dev / js / * .js'], dest: 'js / scripts.js',,, 

Τώρα, οποιοδήποτε αρχείο javascript στο φάκελο dev / js θα συγχωνευθεί σε ένα μεγάλο αρχείο: js / scripts.js, πολύ καλύτερα!

Τώρα είναι καιρός να δημιουργήσουμε μια εργασία, ώστε να μπορέσουμε να συνενώσουμε κάποια αρχεία.

 grunt.registerTask ('mergjs', ['concat']). 

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

 grunt mergejs 

Αυτοματοποίηση του αυτοματισμού μας

Έχουμε ήδη σημειώσει μεγάλη πρόοδο, αλλά υπάρχουν περισσότερα! Προς το παρόν, όταν θέλετε να συγκολλήσετε ή να μειώσετε, πρέπει να μεταβείτε στο τερματικό και να πληκτρολογήσετε την κατάλληλη εντολή. Είναι καιρός να ρίξουμε μια ματιά στο ρολόι εντολή που θα το κάνει αυτό για εμάς. Θα μάθουμε επίσης πώς να εκτελούμε πολλαπλές εργασίες ταυτόχρονα, κατά μήκος του δρόμου.

Για να προχωρήσουμε, θα χρειαστεί να τραβήξουμε το watch-contrib-watch. Είμαι σίγουρος ότι μπορείτε να το εγκαταστήσετε και να το προσθέσετε στο Gruntfile on yuor own από τώρα, οπότε θα ξεκινήσω παρουσιάζοντάς σας τι χρησιμοποιώ στο δοκιμαστικό μου έργο.

 Παρακολουθήστε: scripts: αρχεία: ['dev / js / *. js'], εργασίες: ['concat', 'uglify'],, 

Ονομάσαμε ένα σύνολο αρχείων για παρακολούθηση “σεναρίων”, ακριβώς έτσι ξέρω τι κάνει. Μέσα σε αυτό το αντικείμενο έχω καθορίσει αρχεία για παρακολούθηση και εργασίες για εκτέλεση. Στο προηγούμενο παράδειγμα αλληλοσυμπλήρωσης τραβήξαμε μαζί όλα τα αρχεία στον κατάλογο dev / js.

Στο παράδειγμα minification ορίσαμε αυτό το αρχείο. Είναι λογικό να παρακολουθήσετε το φάκελο dev / js για αλλαγές και να εκτελέσετε αυτές τις εργασίες όποτε υπάρχουν.

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

Τώρα μπορούμε να τροποποιήσουμε την προεπιλεγμένη εργασία μας:

 grunt.registerTask ('default', 'concat', 'uglify')). 

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

Θα καθίσει εκεί, σας περιμένει να τροποποιήσετε αυτά τα αρχεία. Μόλις το κάνετε, θα εκτελέσει όλα τα καθήκοντα που του έχουν ανατεθεί, προχωρήστε, δοκιμάστε το.

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

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

Με αυτές τις στοιχειώδεις γνώσεις σχετικά με το πώς μπορούν να εγκατασταθούν και να χρησιμοποιηθούν τα plugins και πώς λειτουργεί η εντολή παρακολούθησης, όλοι εσείς θα θέσετε τον εαυτό σας να γίνει αυτοματοποιημένος. Υπάρχουν πολλά περισσότερα για την Grunt από αυτά που συζητήσαμε, αλλά τίποτα που δεν θα μπορούσατε να χειριστείτε μόνοι σας.

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

Εάν γνωρίζετε κάποιες ιδιαίτερα χρήσιμες χρήσεις για το Grunt παρακαλούμε να μας ενημερώσετε στα σχόλια, είμαστε πάντα ενδιαφερόμενοι να ακούσουμε πώς χρησιμοποιείτε εργαλεία όπως το Grunt!