วิธีการทำให้งานอัตโนมัติใน 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