כיצד להפוך משימות ב - Visual Studio קוד

באמצעות כלי לבנות כמו Grunt או גמיעה יכול לחסוך לך הרבה זמן של שלב הפיתוח על ידי אוטומציה של כמה חוזרים “משימות”. אם אתה בוחר קוד Visual Studio כעורך הקוד שלך, זרימת העבודה שלך יכולה להיות יעילה יותר, ובסופו של דבר להיות פרודוקטיבית יותר.

נבנה עם Node.js הליבה שלה, קוד Visual Studio מאפשר לך להפעיל את המשימות מבלי לעזוב את חלון העורך. ואנו נראה לך איך לעשות זאת בפוסט הזה.

בואו נתחיל.

מקדים

ראשית, תצטרך להיות צומת, NPM (צומת חבילת מנהל), ואת CLI (ממשק שורת הפקודה) של כלי בהתאמה בהתאמה כל מותקן במערכת שלך. אם אינך בטוח אם יש לך את כל אלה מותקנים, אימות זה קל כמו הקלדת שורות הפקודה.

אני גם מניח כי קבצים וספריות בפרויקט נמצאים במקומם הנכון, כולל config קובץ, כגון gulpfile.js או Gruntfile.js אם אתה משתמש Grunt במקום. ותלות הפרויקט רשום ב חבילה צריך להיות מותקן גם בשלב זה.

להלן ספריות הפרויקט שלנו וקבצים, שנוצרו לצורך הפגנה במאמר זה. הפרויקט שלך בהחלט יהיה שונה בהרבה; ייתכן שיהיה יותר או פחות קבצים.

. ├── css │ ├── sass ├── gulpfile.js ├── index.html ├── js │ ├ ─ src ├── node_modules └── package.json

אנו משתמשים ב- Gulp ככלי הבנייה שלנו בפרויקט שלנו. יש לנו מספר משימות רשום ב gulpfile.js כדלהלן:

 var gulp = דרוש ("גמיעה"); var uglify = דורשים ('לגמוע-להכשיל'); var sass = דרוש ('גמיעה-סאס'); var jsSrc = './js/src/**/*.js'; var sassSrc = '.css/sass/**/*.scss'; gulp.task ('scripts', function () return gulp.src (jsSrc) .pipe (uglify ()) .pipe (gulp.dest ('./js')); (gtp.dest ('/ .css') .pipe (gulp.dest ('/ .css') .pipe (gulp.dest ('.css'). ; gulp.task ('automate', function () gulp.watch ([sassSrc, jsSrc], ['scripts', 'styles']); gulp.task ('ברירת מחדל', ['scripts', 'סגנונות', 'automate']); 

ישנן ארבע משימות ספציפיות שציינו:

• סקריפטים: המשימה כי יהיה ללקט קבצי JavaScript שלנו, כמו גם minifiy הפלט באמצעות Gulp UglifyJS plugin.
• סגנונות: המשימה כי יהיה ללקט קבצים SCSS שלנו לתוך CSS, כמו גם לדחוס את הפלט.
• להפוך: המשימה כי יהיה להפוך את סגנונות ו סקריפטים משימה למרות הלגימה המובנית שעון השירות.
• ברירת המחדל: המשימה שתפעיל את שלוש המשימות הנ"ל יחד בבת אחת.

כמו כלי לבנות בפרויקט שלנו מוכן, עכשיו אנחנו יכולים גם להמשיך על מנת להפוך את המשימות האלה יש לנו מוגדר בתוך gulpfile.js.

עם זאת, במקרה שאתה לא מוכר עובד עם כל הכלים שהוזכרו, אני מאוד ממליץ לך לבדוק כמה ההודעות הקודמות שלנו כדי להכניס אותך לנושא לפני שתמשיך הלאה.

• כיצד להשתמש Grunt כדי להפוך את זרימת העבודה שלך
• תחילת העבודה עם Gulp.js
• הקרב על בניית סקריפטים: Gulp vs Grunt

הפעלה אוטומטית משימות

ריצה ואוטומציה “משימות” ב- Visual Studio קוד הוא פשוט למדי. ראשית, הפעל את לוח בקרה על ידי לחיצה על שילוב Shift + Cmd + P או באמצעות שורת התפריטים, תצוגה> לוח פקודה אם זה יותר נוח לך. לאחר מכן, הקלד משימות, ובחר “משימות: הפעלת משימה” ממספר האפשרויות המוצג בתוצאה.

קוד Visual Studio הוא חכם; הוא יודע שאנחנו משתמשים בלגימה, להרים gulpfile.js, ולחשוף את רשימת המשימות שהגדרנו בקובץ.

הנה, בואו לבחור את ברירת המחדל משימה. גליונות הסגנונות של SCSS וקובץ ה- JavaScript יולדו בעת בחירת משימה זו, והיא תפעיל גם את להפוך משימה שתאפשר את סגנונות ו סקריפטים משימה לרוץ באופן עצמאי הולך קדימה.

בעת שינוי קובץ - גיליון סגנונות או קובץ JavaScript - הוא יעובד אוטומטית. Visual Studio קוד גם מייצר דיווחים בזמן עבור כל הצלחה טעויות המתרחשות בפעולת לבנות.

אינטגרציה עמוקה

יתר על כן, אנחנו יכולים לשלב את הפרויקט לתוך קוד Visual Studio כדי לייעל את זרימת העבודה שלנו. ושילוב המשימות שלנו ב- Visual Studio קוד קל ומהיר.

הפעל את לוח הפקודות ובחר “הגדרת ראנר המשימה”. קוד Visual Studio ייתן רשימה של כלי לבנות הוא תומך. במקרה זה, אנו בוחרים “לגימה”, שכן זהו אחד אנו משתמשים בפרויקט שלנו במאמר זה.

קוד Visual Studio עכשיו צריך ליצור קובץ חדש בשם משימות תחת .vscode בספריית הפרויקטים שלך. משימות, בשלב זה, מכיל תצורה חשופה.

וכפי שניתן לראות למטה, משימות רכוש כרגע הוא רק מערך ריק.

"version": "0.1.0", "command": "gulp", "isShellCommand": true, "args": ["- no-color"], "משימות": []

הרחבת משימות ערך כדלקמן.

"version": "0.1.0", "command": "gulp", "isShellCommand": true, "args": ["-no-color"], "משימות": ["taskName": " default "," isBuildCommand ": true,]

ה שם המטלה מציין את שם המשימה שלנו gulpfile.js כי אנחנו רוצים לרוץ. ה הואילד הנכס מגדיר את ברירת המחדל הפקודה “בנה” פקודה. עכשיו, במקום להסתובב בלוח הפיקוד, אתה יכול פשוט ללחוץ על צירוף המקשים Shift + Cmd + B.

לחילופין אתה יכול לבחור את “הפעלה” של תוצאת החיפוש משימות בפלטת הצבעים.

מסיימים

אני חושב Visual Studio קוד הוא עורך קוד עם עתיד גדול. זה מהיר ובנוי עם כמה תכונות שימושיות מהקופסה, כולל אחד אשר הראינו במאמר זה.

ראינו איך לנהל משימה מלגימה; אתה יכול גם להשתמש Grunt במקום. ראינו כיצד לשלב את המשימה לתוך קוד Visual Studio ולהפעיל עם שילוב מפתח, מה שהופך את זרימת העבודה שלנו יעיל יותר.

אני מקווה, אתה מוצא מאמר זה מועיל כמו התייחסות להפעיל משימות לבנות, ואל תשכחו לבדוק את המאמרים הקודמים שלנו על עצות נוספות כדי להפיק את המרב של Visual Studio Code.

• קוד. 5 תכונות מדהים זה עושה את זה
• כיצד להתאים אישית את קוד
• 8 עוצמה Visual Studio הרחבות קוד עבור מפתחי חזיתי
• קוד Visual Studio: הגדלת פרודוקטיביות באמצעות מפתח מחייב ניהול
• ההשפעה של עיצוב משולב של מיקרוסופט ב - Visual Studio קוד