Grunt là gì?
Grunt là một công cụ Javascript tự động thi hành các tác vụ, Grunt được viết bằng Node.js (Viết bởi Ben Alman từ năm 2012) hiện đang phân phối bằng npm của Node.js. Các tác vụ mà Grunt cung cấp rất nhiều (cung cấp thông qua các plugin với trên 6000 plugin, cũng là một module Node.js, xem thêm Grunt Plugins), nếu danh sách cung cấp không đủ bạn cũng có thể tự xây dựng Task riêng của mình.
Rất nhiều công ty, tổ chức đã sử dụng Grunt như: Adobe Systems, jQuery, Twitter, Mozilla, Bootstrap, Cloudant, Opera, WordPress, Walmart, and Microsoft.
Tóm lại, nếu bạn có nhiều tác vụ thực hiện thủ công trên một dự án – với nhiều công cụ khác nhau (Ví dụ kiểm tra xem code có lỗi không, code không lỗi thì biên dịch (ví dụ scss => css), biên dịch xong thì đổi tên file, nén file …). Thì với Grunt thì các tác vụ đó được mô tả gắn gọn trong 1 file, sau đó bạn ra lệnh cho Grunt tự động thực hiện lần lượt các tác vụ đó giúp bạn.
Hướng dẫn cài đặt Grunt
Grunt là một module của Node.js quản lý bởi npm (Trình quản lý các gói package của Node))của Node.js. Do vậy bạn cần cài đặt Node.js và npm trước (tải và cài đặt tại Download NodeJS)
Cài đặt Node.js và NPM trên Windows
Bạn chỉ việc tải trình cài đặt phù hợp với phiên bản Windows (32, 64-bit), sau khi cài đặt bạn sẽ có NodeJS và NPM
Cài đặt Node.js và NPM trên Ubuntu
sudo app install nodejs sudo app install npm
Cài đặt Node.js và NPM trên CentOS
yum update -y yum install nodejs npm -y
Kiểm tra NodeJS và NPM
Sau khi cài đặt xong, từ terminate (dòng lệnh) gõ
node -v v8.10.0 #Hiện thị phiên bản -> Node đã cài thành công npm -v 3.5.2 #Hiện thị phiên bản -> NPM đã cài thành công
Cài đặt gói Grunt vào NodeJS
npm install -g grunt-cli // Nếu lỗi chạy lại sudo npm install -g grunt-cli
Đến đây bạn đã có đầy đủ công cụ để sử dụng Grunt, dưới đây là những hướng dẫn sử dụng Grunt bắt đầu từ cơ bản nhất.
Lời kết
Trên đây là hướng dẫn tìm hiểu công cụ Grunt là gì? cách cài đặt Grunt trên Windows/Ubuntu/CentOS cơ bản nhất. Nếu có gì sai sót, bạn vui lòng góp ý cho mình biết trong phần bình luận phía dưới nhé!
Xin chào và hẹn gặp lại các bạn trong bài viết tiếp theo, thân ái!
Grunt Tutorial – Thanh Tùng Web
Tham khảo thêm:
- [ Grunt Tutorial ] – Hướng dẫn Grunt từ cơ bản đến nâng cao
- [ Grunt Tutorial ] – Hướng dẫn chạy Grunt trong dự án mới
- [ Grunt Tutorial ] – Tìm hiểu Target trong Grunt và thiết lập thực hiện nhiều tác vụ Grunt
- [ Grunt Tutorial ] – Hướng dẫn sử dụng tác vụ Watch trong Grunt
- [ Grunt Tutorial ] – Dùng Grunt tạo dự án biên dịch SASS/ SCSS thành CSS tùy biến thư viện CSS Bootstrap
- [ Grunt Tutorial ] – Biên dịch Javascript cho Website với Grunt tùy biến thư viện JS Bootstrap