Πώς να αυτοματοποιήσετε τις εργασίες στον κώδικα του Visual Studio

Χρησιμοποιώντας ένα εργαλείο δημιουργίας όπως το Grunt ή το Gulp μπορεί να σας εξοικονομήσει πολύ χρόνο από το στάδιο ανάπτυξης αυτοματοποιώντας μερικές επαναλαμβανόμενες “Καθήκοντα”. Εάν επιλέγετε τον κώδικα του Visual Studio ως τον επεξεργαστή κωδικών πρόσβασης, η ροή εργασίας σας θα μπορούσε να είναι ακόμα πιο εξορθολογισμένη και, τελικά, θα ήταν πιο παραγωγική.

Χτισμένο με το Node.js στον πυρήνα του, ο Visual Studio Code σας επιτρέπει να εκτελέστε τις εργασίες χωρίς να αφήσετε το παράθυρο του προγράμματος επεξεργασίας. Και θα σας δείξουμε πώς να το κάνετε σε αυτή τη θέση.

Ας ξεκινήσουμε.

Προϋποθέσεις

Αρχικά, θα πρέπει να έχετε εγκατεστημένο στο σύστημά σας τον κόμβο, το NPM (Διαχειριστής πακέτων κόμβων) και το CLI (Interface Line Command) του αντίστοιχου εργαλείου δημιουργίας. Εάν δεν είστε σίγουροι αν έχετε εγκαταστήσει όλα αυτά, επαληθεύοντας ότι είναι τόσο εύκολο όσο πληκτρολογείτε τις γραμμές εντολών.

Θα υποθέσω επίσης ότι τα αρχεία και οι κατάλογοι του έργου σας βρίσκονται στην κατάλληλη θέση τους, συμπεριλαμβανομένου του config αρχείου, όπως το αρχείο gulpfile.js ή Gruntfile.js αν χρησιμοποιείτε το Grunt αντί. Και οι εξαρτήσεις έργων καταχωρήθηκαν στο package.json θα πρέπει επίσης να εγκατασταθεί σε αυτό το σημείο.

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

. ├──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

Χρησιμοποιούμε το Gulp ως εργαλείο κατασκευής του έργου μας. Έχουμε μια σειρά από καταχωρημένες εργασίες στο gulpfile.js ως εξής:

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

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

σεναρίων: το έργο που θα μεταγλωττίσει τα αρχεία JavaScript μας καθώς και το minifiy το αποτέλεσμα μέσω του plugin Gulp UglifyJS.
στυλ: το έργο που θα μεταγλωττίσει τα αρχεία SCSS σε CSS καθώς και τη συμπίεση της εξόδου.
αυτοματοποίηση: το έργο που θα αυτοματοποιήσει το στυλ και σεναρίων εργασία μέσω του ενσωματωμένου gulp ρολόι χρησιμότητα.
Προκαθορισμένο: το καθήκον που θα εκτελέσει τις τρεις προαναφερθείσες εργασίες ταυτόχρονα.

Καθώς το εργαλείο κατασκευής του έργου μας είναι έτοιμο, μπορούμε τώρα να συνεχίσουμε να αυτοματοποιούμε τα καθήκοντα που έχουμε ορίσει στο πλαίσιο του προγράμματος gulpfile.js.

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

Πώς να χρησιμοποιήσετε το Grunt για να αυτοματοποιήσετε τη ροή εργασίας σας
Ξεκινώντας με το Gulp.js
Η μάχη της κατασκευής σεναρίων: Gulp vs Grunt

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

Τρέξιμο και αυτοματοποίηση “Καθήκοντα” στο Visual Studio Code είναι αρκετά απλή. Πρώτα, ξεκινήστε το Πίνακας εντολών πατώντας το συνδυασμό πλήκτρων Shift + Cmd + P ή μέσω της γραμμής μενού, Προβολή> Παλέτα εντολών αν αυτό είναι πιο βολικό για σας. Στη συνέχεια, πληκτρολογήστε Καθήκοντα, και επιλέξτε “Εργασίες: Εκτέλεση εργασίας” από το μικρό αριθμό επιλογών που εμφανίζονται στο αποτέλεσμα.

Ο κώδικας του Visual Studio είναι έξυπνος. Ξέρει ότι χρησιμοποιούμε το Gulp, σηκώστε gulpfile.js, και αποκαλύπτουν τη λίστα των εργασιών που έχουμε ορίσει στο αρχείο.

Κατάλογος των καθηκόντων που καταχωρήθηκαν στο `gulpfile.js`

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

Όταν αλλάζετε ένα αρχείο - ένα φύλλο στυλ ή ένα αρχείο JavaScript - αυτόματα θα συνταχθεί. Ο κώδικας Visual Studio δημιουργεί επίσης έγκαιρες αναφορές για κάθε επιτυχία και σφάλματα που προκύπτουν κατά τη λειτουργία δημιουργίας.

Βαθιά ενσωμάτωση

Επιπλέον, μπορούμε να ενσωματώσουμε το έργο μας στον κώδικα του Visual Studio για να εξορθολογίσουμε τη ροή εργασίας μας. Και η ενσωμάτωση των Εργασιών μας στον Κώδικα Visual Studio είναι εύκολη και γρήγορη.

Εκκινήστε την παλέτα εντολών και επιλέξτε “Ρύθμιση παρασκηνίου εργασίας”. Ο κώδικας του Visual Studio θα δώσει μια λίστα με το εργαλείο δημιουργίας που υποστηρίζει. Σε αυτή την περίπτωση, επιλέγουμε “Χαψιά”, δεδομένου ότι αυτή είναι αυτή που χρησιμοποιούμε στο έργο μας σε αυτό το άρθρο.

Ο κώδικας του Visual Studio πρέπει τώρα να δημιουργήσει ένα νέο αρχείο που ονομάζεται tasks.json κάτω από .vscode στον κατάλογο του έργου σας. tasks.json, σε αυτό το σημείο, περιέχει γυμνή διαμόρφωση.

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

"έκδοση": "0.1.0", "εντολή": "gulp", "isShellCommand": true, "args": [

Επέκταση του καθήκοντα ως εξής.

"εκδοχή": "0.1.0", "εντολή": "gulp", "isShellCommand": true, "args" προεπιλογή "," isBuildCommand ": true,]

ο όνομα εργασίας καθορίζει το όνομα της εργασίας στο gulpfile.js που θέλουμε να τρέξουμε. ο isBuildCommand ιδιότητα ορίζει το Προκαθορισμένο εντολή ως “Χτίζω” εντολή. Τώρα, αντί να περιηγηθείτε στην παλέτα εντολών, μπορείτε απλά να πατήσετε τον συνδυασμό πλήκτρων Shift + Cmd + B.

Εναλλακτικά μπορείτε να επιλέξετε το “Εκτέλεση εργασιών δημιουργίας” του αποτελέσματος αναζήτησης στην Εργασία στην παλέτα εντολών.

Τυλίγοντας

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

Έχουμε δει πώς να εκτελέσετε μια εργασία από το Gulp. μπορείτε επίσης να χρησιμοποιήσετε το Grunt αντί. Έχουμε δει πώς να ενσωματώσουμε την εργασία στον κώδικα του Visual Studio και να τρέχουμε με ένα συνδυασμό πλήκτρων που καθιστούν τη ροή εργασίας πιο εξορθολογισμένη.

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

Κωδικός Visual Studio: 5 απίστευτα χαρακτηριστικά που το κάνουν ένα Frontrunner
Πώς να προσαρμόσετε τον κώδικα Visual Studio
8 Ισχυρές επεκτάσεις κώδικα Visual Studio για προγραμματιστές Front-end
Κώδικας Visual Studio: Αυξάνοντας την παραγωγικότητα μέσω της διαχείρισης δεσμών κλειδιών
Η επιρροή του Microsoft Inclusive Design στον κώδικα του Visual Studio