12/08/2018, 00:19

Giới thiệu Gulp, Grunt, Bower, và hỗ trợ NPM cho Visual Studio

Phát triển Web, đặc biệt là phát triển web front end, nhanh chóng trở thành phức tạp và tinh vi như phát triển back end truyền thống. Hầu hết các dự án không chỉ tải lên một số JS và CSS file thông qua FTP. Bây giờ có một front end trước quá trình xây dựng có thể bao gồm việc mở rộng của Sass và ...

Phát triển Web, đặc biệt là phát triển web front end, nhanh chóng trở thành phức tạp và tinh vi như phát triển back end truyền thống. Hầu hết các dự án không chỉ tải lên một số JS và CSS file thông qua FTP. Bây giờ có một front end trước quá trình xây dựng có thể bao gồm việc mở rộng của Sass và LESS, giảm tính chất của CSS / JS, chạy JSHint hoặc JSLint, và nhiều hơn nữa. Những nhiệm vụ xây dựng và quy trình được phối hợp với các công cụ như Gulp và Grunt. Ngoài ra, thư viện client-side được quản lý như các gói sử dụng các hệ thống quản lý như NPM và bower. TẠI SAO CÁC NHÀ QUẢN LÝ GÓI CLIENT-SIDE CHO ASP.NET? TẠI SAO KHÔNG NUGET?TẠI SAO KHÔNG MSBUILD?

Một số bạn có thể hỏi, tại sao không sử dụng NuGet cho JavaScript? Tại sao không mở rộng MSBuild cho xây dựng CSS / JS? Đơn giản. Bởi vì đã có một hệ sinh thái phong phú. NuGet tuyệt vời cho các thư viện ở phía máy chủ (và một số client-side) nhưng có rất nhiều CSS và JS libs trên NPM và bower. MSBuild là rất tốt cho phía máy chủ được xây dựng nhưng có thể là quá mức cần thiết khi xây dựng một ứng dụng client-side.

Vì vậy, sử dụng cả hai. Đây là những công cụ trong bộ công cụ của bạn. Thêm hỗ trợ cho Gulp, Grunt, Bower, NPM (và các công cụ khác, trong tương lai nếu cần thiết) có nghĩa là một môi trường quen thuộc hơn đối với các nhà phát triển front-end làm ASP.NET và nó sẽ mở ra cánh cửa cho ASP.NET devs để mang lại trong JS và cộng đồng thư viện CSS sử dụng hàng ngày. GIỚI THIỆU TÁC VỤ RUNNER EXPLORER

Chúng tôi đã nhận được một tấn của các yêu cầu tính năng liên quan đến Grunt / Gulp hỗ trợ từ nhiều bạn cũng như cộng đồng nói chung. Chúng tôi đang xây dựng hỗ trợ lớp học đầu tiên cho cả hai Grunt và Gulp trong Visual Studio "14" với đầy đủ khả năng mở rộng. Bây giờ chúng ta đã sẵn sàng để phát hành một bản xem trước của hỗ trợ này là một phần mở rộng cho VS2013 và sẽ đánh giá cao sự giúp đỡ của bạn khi thử nghiệm và khám phá tính năng này.

Hôm nay chúng tôi giới thiệu một bản xem trước của "Task Runner Explorer "như một phần mở rộng VSIX. Chúng tôi cũng đề nghị hai VSIX khác để khỏa lấp những kinh nghiệm cho tính năng này.

LƯU Ý: Phần lớn các chức năng bao gồm các phần mở rộng VSIX sẽ được xây dựng trong Visual Studio, do đó bạn sẽ không cần phải cài đặt quá nhiều thứ. Tuy nhiên, cho VS2013 và xem trước này, chúng ta cần nhiều VSIX để giúp bạn có được sớm hơn sau này. Cũng lưu ý rằng hiện nay chỉ có tác Runner Explorer sẽ làm việc trên Visual Studio Express nhưng cho VS14 tất cả  các tính năng này sẽ làm việc trong các phiên bản miễn phí VS Express.

Hãy xem xét những tính năng như một "DevLabs" preview cho bây giờ, giống nhưVS Productivity Power Tools. Họ sẽ bảo đảm vào sản phẩm cuối cùng. BẠN CẦN NHỮNG GÌ?

Đầu tiên, bạn sẽ cần Visual Studio 2.013,3 - đó 3 nghĩa là "Cập nhật 3" là một bản cập nhật miễn phí .

TRX - Task Runner Explorer  Visual Studio Extension
NPM / NBower Package Intellisense - Tìm kiếm trực tuyến và NPM Bower gói trực tiếp với Intellisense
Tùy chọn Grunt Launcher (cho lựa chọn nhấp chuột phải vào Solution Explorer - bao gồm cả "NPM cài đặt")
    Nếu không có phần mở rộng này, bây giờ bạn sẽ cần phải chạy NPM tự cài đặt để khôi phục / thêm gói.
    Nếu bạn DO có phần mở rộng này, kích chuột phải vào packages.json và "NPM cài đặt" trước khi chạy một nhiệm vụ grunt / ngụm.

Để mở TRX (Task Runner Explorer), chỉ cần kích chuột phải vào bất kỳ gruntfile.js trong dự án của bạn:

TRX ở dưới cùng của VS theo mặc định và trông như thế này:

Ở đây chúng ta có thể thấy rằng nó tìm thấy một gruntfile.js trong thư mục gốc của một hoặc nhiều dự án trong Solution. Nó cũng cho thấy tính năng task bindings cho phép bất kỳ nhiệm vụ hoặc mục tiêu để được kích hoạt bởi 4 sự kiện khác nhau của Visual Studio.

Để kết hợp một công việc / mục tiêu với một sự kiện VS, chỉ cần nhấp chuột phải và thiết lập các ràng buộc.

Để chạy bất kỳ công việc / mục tiêu, chỉ cần click đúp vào nó và một giao diện điều khiển sẽ xuất hiện:

Khi bạn đã có trọn gói Intellisense Extension bạn sẽ tìm thấy nó dễ dàng để thêm và cập nhật các gói khi chỉnh sửa trực tiếp package.json cho cả bower và NPM.