Tự động hóa công việc trong Visual Studio Code

4429

Với những build tool như Grunt or Gulp, bạn có thể tiếp kiệm rất nhiều thời gian trong khâu phát triển khi có thể tự động hóa nhiều “task” lặp đi lặp lại. Nếu bạn lựa chọn Visual Studio Code làm code editor chính, công việc của bạn sẽ càng trơ tru và thậm chí hiệu quả hơn nữa.

Visual Studio Code, với lõi Node.js, cho phép bạn chạy tasks mà không cần thoát ra editor window. Và trong bài viết này, chúng tôi sẽ hướng dẫn các bạn phải làm như thế nào.

Bắt đầu nào.

Pre-requisites

Trước hết, bạn cần có cài đặt toàn bộ Node, NPM (Node Package Manager), và CLI (Command Line Interface) cho các build tool tương ứng. Nếu bạn không rõ mình đã cài đặt hay chưa, bước kiểm chứng cũng vô cùng đơn giản, chỉ mất vài dòng lệnh.

Tôi cũng sẽ giả định rằng file và đường dẫn trong project của bạn ở đúng chỗ, bao gồm cả file config, như gulpfile.js or Gruntfile.js nếu bạn dùng Grunt. Và tất cả công cụ cần cho project được đăng ký trong package.json cũng nên được đăng ký ở bước này.

Sau đây là các đường dẫn và file trong project của ta, dùng cho mục đích minh họa cho bài viết. Project của bạn hẳn sẽ khác đi; nhiều hoặc ít file hơn chẳng hạn.

Ta sẽ sử dụng Gulp làm build tool cho project này. Chúng ta có số Tasks đăng ký trong gulpfile.js như sau:

Cụ thể, có 4 task chúng ta đã chỉ ra:

  • scripts: task này sẽ compile files JavaScript ta có, cũng giảm thiểu output qua plugin Gulp UglifyJS.
  • styles: task sẽ compile files SCSS ta có vào CSS và nén output.
  • automate: task này tự động hóa stylesscripts task thông qua utility watch built-in trong gulp.
  • default: task này sẽ cùng lúc chạy ba tasks được nêu bên trên.

Vì build tool trong project đã được chuẩn bị sẵn, chúng ta giờ đã có thể tiếp tục dự động hóa các task đã được xác định trong gulpfile.js.

Chạy và tự động hóa Tasks

Chạy và tự động hóa “Tasks” trong Visual Studio Code khá đơn giản. Đầu tiên, khởi động Command Palette bằng tổ hợp phím Shift + Cmd + P hoặc thông qua thanh menu, View > Command Palette. Sau đó, gõ Tasks, và lựa chọn “Tasks: Run Task” từ một số ít tùy chọn từ kết quả.

Command Palette

Visual Studio Code rất thông minh; nó biết được ta đang dùng Gulp, và gulpfile.js, và hiển thị danh sách Tasks mà ta đã xác định trong file.

Danh sách Tasks đăng ký trong gulpfile.js

Từ đây, hãy lựa chọn default Task. Khi lựa chọn Task này, SCSS stylesheets và JavaScript file sẽ được compile, và đồng thời kích hoạt automate Task cho phép Task stylesscripts tiếp tục chạy ẩn danh.

Khi đổi file ( file stylesheet hoặc JavaScript), file sẽ tự động compile. Visual Studio Code còn kịp thời tạo reports với mỗi success và error xảy ra trong build operation.

Tích hợp sâu

Hơn nữa, chúng ta có thể tích hợp project vào Visual Studio Code để tổ chức hợp lý hóa workflow. Việc tích hợp Tasks vào  Visual Studio Code cũng rất nhanh chóng và dễ dàng.

Khởi động Command Palette và lựa chọn “Configure Task Runner”.  Visual Studio Code sẽ cung cấp danh sách build tools được hỗ trợ. Đối với ví dụ trong bài viết, ta sẽ lựa chonk “Gulp”.

Đến đây Visual Studio Code, sẽ tạo một file tên tasks.json dưới .vscode trong thư mục project. tasks.json sẽ chứa cấu hình trần, tại thời điểm này.

Và như bạn thấy bên duwois, tasks property hiện chỉ là empty array.

Mở rộng tasks value như sau:

taskName chỉ ra task name trong gulpfile.js mà ta muốn chạy. Property isBuildCommand xác định lệnh default làm lệnh “build”. Đến đây, không cần phải chạy quanh Command Palette, bạn chỉ việc nhấn tổ hợp phím Shift+Cmd+B.

Sau đó bạn có thể lựa chọn “Run Build Task” trong kết quả Task search trong Command Palette.

Lời kết

Theo tôi, Visual Studio Code là code editor có rất nhiều tính năng tuyệt vời; mạnh mẽ và độc đáo. Một trong số đó đã được chúng tôi giới thiệu trong bài viết này.

Thông qua bài viết, hy vọng các bạn phần nào nắm bắt được cách chạy một Task từ Gulp (đối với Grunt cũng tương tự), và đồng thời, biết cách tích hợp task vào Visual Studio Code để cải thiện tốc độ và hiệu quả làm việc.

Techtalk via hongkiat

CHIA SẺ