Cách tự động hóa các tác vụ trong Visual Studio Code

Sử dụng một công cụ xây dựng như Grunt hoặc Gulp có thể giúp bạn tiết kiệm rất nhiều thời gian của giai đoạn phát triển bằng cách tự động hóa một vài lần lặp đi lặp lại “Nhiệm vụ”. Nếu bạn chọn Visual Studio Code làm trình chỉnh sửa mã đi tới, quy trình làm việc của bạn thậm chí có thể được sắp xếp hợp lý hơn và cuối cùng, sẽ hiệu quả hơn.

Được xây dựng với Node.js ở cốt lõi, Visual Studio Code cho phép bạn chạy các tác vụ mà không phải rời khỏi cửa sổ soạn thảo. Và chúng tôi sẽ chỉ cho bạn cách làm như vậy trong bài viết này.

Hãy bắt đầu nào.

Điều kiện tiên quyết

Để bắt đầu, bạn sẽ cần phải có Node, NPM (Trình quản lý gói nút) và CLI (Giao diện dòng lệnh) của công cụ xây dựng tương ứng được cài đặt trong hệ thống của bạn. Nếu bạn không chắc chắn liệu bạn đã cài đặt tất cả những thứ này chưa, việc xác minh nó cũng dễ như gõ các dòng lệnh.

Tôi cũng sẽ cho rằng các tệp và thư mục trong dự án của bạn nằm ở vị trí thích hợp của chúng, bao gồm cả cấu hình tập tin, chẳng hạn như gulpfile.js hoặc là Gruntfile.js nếu bạn sử dụng Grunt thay thế. Và phụ thuộc dự án đăng ký tại pack.json cũng nên được cài đặt tại thời điểm này.

Sau đây là các thư mục và tệp dự án của chúng tôi, được tạo ra cho mục đích trình diễn trong bài viết này. Dự án của bạn chắc chắn sẽ khác đi nhiều; bạn có thể có nhiều hoặc ít tệp.

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

Chúng tôi sử dụng Gulp làm công cụ xây dựng trong dự án của chúng tôi. Chúng tôi có một số Nhiệm vụ được đăng ký trong gulpfile.js như sau:

 var gulp = Yêu cầu ('gulp'); var uglify = Yêu cầu ('gulp-uglify'); var sass = Yêu cầu ('gulp-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'))); gulp.task ('style', function () return gulp.src (sassSrc) .pipe (sass (outputStyle: 'compression')) .pipe (gulp.dest ('./css'));) ; gulp.task ('tự động hóa', function () gulp.watch ([sassSrc, jsSrc], ['scripts', 'style']);); gulp.task ('mặc định', ['script', 'style', 'automate']); 

Có bốn nhiệm vụ cụ thể mà chúng tôi đã chỉ định:

• kịch bản: tác vụ sẽ biên dịch các tệp JavaScript của chúng tôi cũng như minifiy đầu ra thông qua plugin Gulp UglifyJS.
• phong cách: tác vụ sẽ biên dịch các tệp SCSS của chúng tôi thành CSS cũng như nén đầu ra.
• tự động hóa: tác vụ sẽ tự động hóa phong cách và kịch bản nhiệm vụ mặc dù gulp tích hợp đồng hồ đeo tay tiện ích.
• mặc định: nhiệm vụ sẽ chạy ba nhiệm vụ nói trên cùng một lúc.

Vì công cụ xây dựng trong dự án của chúng tôi đã sẵn sàng, giờ đây chúng tôi cũng có thể tiếp tục tự động hóa các tác vụ này mà chúng tôi đã xác định trong gulpfile.js.

Tuy nhiên, trong trường hợp bạn không quen làm việc với bất kỳ công cụ nào được đề cập, tôi khuyên bạn nên xem xét một vài bài đăng trước đây của chúng tôi để đưa bạn vào chủ đề trước khi tiếp tục.

• Cách sử dụng Grunt để tự động hóa quy trình làm việc của bạn
• Bắt đầu với Gulp.js
• Trận chiến xây dựng kịch bản: Gulp vs Grunt

Chạy và tự động hóa các nhiệm vụ

Chạy và tự động hóa “Nhiệm vụ” trong Visual Studio Code khá đơn giản. Đầu tiên, khởi chạy Bảng lệnh bằng cách nhấn tổ hợp phím Shift + Cmd + P hoặc qua thanh menu, Xem> Bảng lệnh nếu điều đó thuận tiện hơn cho bạn Sau đó, gõ Nhiệm vụ, và chọn “Nhiệm vụ: Chạy nhiệm vụ” từ một số ít các tùy chọn hiển thị trong kết quả.

Visual Studio Code rất thông minh; nó biết rằng chúng tôi đang sử dụng Gulp, chọn gulpfile.js, và tiết lộ danh sách các Nhiệm vụ mà chúng tôi đã xác định trong tệp.

Ở đây, hãy chọn mặc định Bài tập. Tệp biểu định kiểu và tệp JavaScripts của SCSS sẽ được biên dịch khi chọn Nhiệm vụ này và nó cũng sẽ kích hoạt tự động hóa Nhiệm vụ sẽ cho phép phong cách và kịch bản Nhiệm vụ để chạy tự động về phía trước.

Khi thay đổi tệp - biểu định kiểu hoặc tệp JavaScript - tệp sẽ được tự động biên dịch. Visual Studio Code cũng tạo các báo cáo kịp thời cho mọi thành công và lỗi xảy ra trong hoạt động xây dựng.

Tích hợp sâu

Hơn nữa, chúng tôi có thể tích hợp dự án của chúng tôi vào Visual Studio Code để hợp lý hóa quy trình làm việc của chúng tôi. Và việc tích hợp các Nhiệm vụ của chúng tôi trong Visual Studio Code rất dễ dàng và nhanh chóng.

Khởi chạy Bảng màu Lệnh và chọn “Cấu hình tác vụ chạy”. Visual Studio Code sẽ đưa ra một danh sách các công cụ xây dựng mà nó hỗ trợ. Trong trường hợp này, chúng tôi chọn “Nuốt”, vì đó là cái chúng tôi đang sử dụng trong dự án của chúng tôi trong bài viết này.

Visual Studio Code bây giờ đã tạo một tệp mới có tên task.json Dưới .vscode trong thư mục dự án của bạn. task.json, tại thời điểm này, chứa cấu hình trần.

Và như bạn có thể thấy bên dưới, nhiệm vụ tài sản trong hiện tại chỉ là một mảng trống.

"phiên bản": "0.1.0", "lệnh": "gulp", "isShellCommand": true, "args": ["--no-color"], "task": []

Mở rộng nhiệm vụ giá trị như sau.

"phiên bản": "0.1.0", "lệnh": "gulp", "isShellCommand": true, "args": ["--no-color"], "task": ["taskName": " mặc định "," isBuildCommand ": true,]

Các Tên nhiệm vụ chỉ định tên nhiệm vụ trong chúng tôi gulpfile.js mà chúng tôi muốn chạy. Các isBuildCommand tài sản định nghĩa mặc định lệnh như là “Xây dựng” chỉ huy. Bây giờ, thay vì đi xung quanh Bảng màu Lệnh, bạn chỉ cần nhấn tổ hợp phím Shift + Cmd + B.

Thay phiên bạn có thể chọn “Chạy Build Build” của kết quả tìm kiếm Nhiệm vụ trong Bảng lệnh.

Kết thúc

Tôi nghĩ Visual Studio Code là một trình soạn thảo mã với một tương lai tuyệt vời. Nó nhanh và được xây dựng với một số tính năng tiện dụng, bao gồm một tính năng mà chúng tôi đã trình bày trong bài viết này.

Chúng tôi đã thấy làm thế nào để chạy một nhiệm vụ từ Gulp; bạn cũng có thể sử dụng Grunt thay thế. Chúng tôi đã thấy cách tích hợp tác vụ vào Visual Studio Code và chạy với tổ hợp phím, giúp cho công việc của chúng tôi được sắp xếp hợp lý hơn.

Hy vọng, bạn thấy bài viết này hữu ích như một tài liệu tham khảo để chạy các tác vụ xây dựng và đừng quên xem các bài viết trước của chúng tôi để biết thêm mẹo để tận dụng tối đa Visual Studio Code.

• Mã Visual Studio: 5 tính năng tuyệt vời làm cho nó trở thành một ứng dụng tiên phong
• Cách tùy chỉnh mã Visual Studio
• 8 phần mở rộng mã Visual Studio mạnh mẽ cho nhà phát triển Front-end
• Mã Visual Studio: Tăng năng suất thông qua Quản lý ràng buộc chính
• Ảnh hưởng của thiết kế bao gồm Microsoft trong mã Visual Studio