วิธีการทำให้งานอัตโนมัติใน Visual Studio Code

การใช้เครื่องมือสร้างเช่น Grunt หรือ Gulp ช่วยให้คุณประหยัดเวลาได้มากในการพัฒนา ทำซ้ำอัตโนมัติ “งาน”. หากคุณเลือกใช้ Visual Studio Code เป็นตัวแก้ไขรหัสไปที่เวิร์กโฟลว์ของคุณอาจมีความคล่องตัวมากขึ้นและในที่สุดจะมีประสิทธิผลมากขึ้น.

สร้างด้วย Node.js ที่เป็นแกนหลักของ Visual Studio Code ช่วยให้คุณ เรียกใช้งานโดยไม่ต้องออกจากหน้าต่างแก้ไข. และเราจะแสดงให้คุณเห็นถึงวิธีการทำเช่นนั้นในโพสต์นี้.

เอาล่ะ.

requisites ก่อน

ในการเริ่มต้นคุณจะต้องมี Node, NPM (Node Package Manager) และ CLI (Command Line Interface) ของเครื่องมือสร้างที่เกี่ยวข้องทั้งหมดที่ติดตั้งในระบบของคุณ หากคุณไม่แน่ใจว่าคุณได้ติดตั้งสิ่งเหล่านี้ทั้งหมดหรือไม่การตรวจสอบก็ง่ายเหมือนการพิมพ์บรรทัดคำสั่ง.

ฉันจะสมมติว่าไฟล์และไดเรกทอรีในโครงการของคุณอยู่ในตำแหน่งที่เหมาะสมรวมถึง การตั้งค่า ไฟล์เช่น gulpfile.js หรือ Gruntfile.js ถ้าคุณใช้ Grunt แทน และโครงการขึ้นทะเบียนที่พึ่งพา package.json ควรติดตั้ง ณ จุดนี้.

ต่อไปนี้คือไดเรกทอรีและไฟล์โครงการของเราซึ่งสร้างขึ้นเพื่อวัตถุประสงค์ในการ สาธิต ในบทความนี้. โครงการของคุณจะแตกต่างกันมากอย่างแน่นอน คุณอาจมีไฟล์มากหรือน้อย.

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

เราใช้ Gulp เป็นเครื่องมือสร้างของเราในโครงการของเรา เรามีงานจำนวนหนึ่งที่ลงทะเบียนไว้ใน gulpfile.js ดังต่อไปนี้:

 var gulp = ต้องการ ('gulp'); var uglify = require ('gulp-uglify'); var sass = ต้องการ ('gulp-sass'); var jsSrc = './js/src/**/*.js'; var sassSrc = './css/sass/**/*.scss'; gulp.task ('สคริปต์', ฟังก์ชัน () return gulp.src (jsSrc) .pipe (uglify ()) .pipe (gulp.dest ('./js'))); gulp.task ('styles', function () return gulp.src (sassSrc) .pipe (sass (outputStyle: 'บีบอัด')) .pipe (gulp.dest ('./css'));) ; gulp.task ('อัตโนมัติ', ฟังก์ชัน () gulp.watch ([sassSrc, jsSrc], ['สคริปต์', 'สไตล์']);); gulp.task ('ค่าเริ่มต้น', ['สคริปต์', 'สไตล์', 'อัตโนมัติ']); 

มีสี่งานที่เราระบุ:

• สคริปต์: งานที่จะรวบรวมไฟล์ JavaScript ของเรารวมทั้งลดการส่งออกผ่านปลั๊กอิน Gulp UglifyJS.
• รูปแบบ: งานที่จะรวบรวมไฟล์ SCSS ของเราลงใน CSS เช่นเดียวกับการบีบอัดเอาท์พุท.
• โดยอัตโนมัติ: งานที่จะทำให้ รูปแบบ และ สคริปต์ งานแม้ว่าอึกอยู่ในตัว ดู ประโยชน์.
• ค่าเริ่มต้น: งานที่จะทำงานสามอย่างพร้อมกันทั้งหมดในคราวเดียว.

เนื่องจากเครื่องมือสร้างในโครงการของเราพร้อมแล้วเราสามารถดำเนินงานเหล่านี้โดยอัตโนมัติตามที่เราได้กำหนดไว้ใน gulpfile.js.

อย่างไรก็ตามในกรณีที่คุณไม่คุ้นเคยกับเครื่องมือใด ๆ ที่กล่าวถึงฉันขอแนะนำให้คุณดูโพสต์ก่อนหน้าของเราเพื่อนำคุณเข้าสู่หัวข้อก่อนที่จะดำเนินการต่อไป.

• วิธีใช้ Grunt เพื่อทำให้เวิร์กโฟลว์ของคุณเป็นแบบอัตโนมัติ
• เริ่มต้นด้วย Gulp.js
• สคริปต์ Battle Of Build: Gulp vs Grunt

เรียกใช้และทำให้งานเป็นไปโดยอัตโนมัติ

วิ่งและอัตโนมัติ “งาน” ใน Visual Studio Code นั้นค่อนข้างตรงไปตรงมา ก่อนเปิดตัว Command Palette โดยกดปุ่ม Shift + Cmd + P รวมกันหรือผ่านแถบเมนู, ดู> Command Palette ถ้าสะดวกกว่าสำหรับคุณ จากนั้นพิมพ์ งาน, และเลือก “Tasks: Run Task” จากตัวเลือกจำนวนน้อยที่แสดงในผลลัพธ์.

Visual Studio Code นั้นฉลาด มันรู้ว่าเราใช้อึกรับแล้ว gulpfile.js, และเปิดเผยรายการงานที่เรากำหนดไว้ในไฟล์.

ในที่นี้เรามาเลือก ค่าเริ่มต้น งาน. ไฟล์สไตล์ชีตและ JavaScript ของ SCSS จะถูกรวบรวมเมื่อทำการเลือกภารกิจนี้และมันจะทริกเกอร์ โดยอัตโนมัติ งานที่จะอนุญาตให้ รูปแบบ และ สคริปต์ ภารกิจในการเรียกใช้ไปข้างหน้าอย่างอิสระ.

เมื่อเปลี่ยนไฟล์ - สไตล์ชีตหรือไฟล์ JavaScript - มันจะถูกรวบรวมโดยอัตโนมัติ Visual Studio Code ยังสร้างรายงานที่ตรงเวลาสำหรับทุกความสำเร็จและข้อผิดพลาดที่เกิดขึ้นในการดำเนินการสร้าง.

การรวมลึก

นอกจากนี้เราสามารถรวมโครงการของเราเข้ากับ Visual Studio Code เพื่อปรับปรุงกระบวนการทำงานของเรา และการรวม Tasks ของเราใน Visual Studio Code นั้นง่ายและรวดเร็ว.

เรียกใช้ Command Palette และเลือก “กำหนดค่า Task Runner”. Visual Studio Code จะให้รายการเครื่องมือสร้างที่รองรับ ในกรณีนี้เราเลือก “อึก”, เนื่องจากเป็นสิ่งที่เราใช้ในโครงการของเราในบทความนี้.

Visual Studio Code ควรสร้างไฟล์ใหม่ชื่อ tasks.json ภายใต้ .vscode ในไดเรกทอรีโครงการของคุณ. tasks.json, ณ จุดนี้มีการกำหนดค่าเปลือย.

และอย่างที่คุณเห็นด้านล่าง งาน คุณสมบัติในขณะนี้เป็นเพียงอาร์เรย์ว่างเปล่า.

"version": "0.1.0", "command": "gulp", "isShellCommand": true, "args": ["- no-color"], "task": []

ขยายความ งาน ค่าดังต่อไปนี้.

"version": "0.1.0", "command": "gulp", "isShellCommand": true, "args": ["- ไม่มีสี"], "งาน": ["taskName": " เริ่มต้น "," isBuildCommand ": true,]

ชื่องาน ระบุชื่อภารกิจในเรา gulpfile.js ที่เราต้องการเรียกใช้ isBuildCommand คุณสมบัติกำหนด ค่าเริ่มต้น คำสั่งเป็น “สร้าง” คำสั่ง ตอนนี้แทนที่จะไปรอบ ๆ Command Palette คุณสามารถกด Shift + Cmd + B.

หรือคุณอาจเลือก “เรียกใช้งานสร้าง” ของผลการค้นหา Tasks ใน Command Palette.

ห่อ

ฉันคิดว่า Visual Studio Code เป็นเครื่องมือแก้ไขรหัสที่มีอนาคตที่ดี มันเร็วและสร้างด้วยคุณสมบัติที่มีประโยชน์บางอย่างนอกกรอบรวมถึงคุณสมบัติที่เราได้แสดงไว้ในบทความนี้.

เราได้เห็นวิธีการเรียกใช้งานจากอึก; คุณสามารถใช้ Grunt แทนได้ เราได้เห็นวิธีการรวมงานเข้ากับ Visual Studio Code และทำงานด้วยคีย์ผสมซึ่งทำให้เวิร์กโฟลว์ของเราคล่องตัวมากขึ้น.

หวังว่าคุณจะพบว่าบทความนี้มีประโยชน์ในการอ้างอิงเพื่อเรียกใช้งาน build และอย่าลืมตรวจสอบบทความก่อนหน้าของเราเกี่ยวกับเคล็ดลับเพิ่มเติมเพื่อให้ได้ประโยชน์สูงสุดจากรหัส Visual Studio.

• Visual Studio รหัส: 5 คุณสมบัติที่ยอดเยี่ยมที่ทำให้เป็น Frontrunner
• วิธีการกำหนดรหัส Visual Studio เอง
• 8 ส่วนขยายของรหัส Visual Studio ที่ทรงพลังสำหรับนักพัฒนาส่วนหน้า
• รหัส Visual Studio: การเพิ่มผลผลิตผ่านการจัดการการผูกคีย์
• อิทธิพลของการออกแบบของ Microsoft Inclusive ใน Visual Studio Code