1. Giới thiệu chung

Grunt là 1 công cụ dòng lệnh dựa trên các task dùng để hỗ trợ các project javascript.

Bạn đang xem: Nghĩa của từ grunt

Grunt được dùng trong nhiều công ty, dự án như Twitter, Adobe, jQuery

Chúng ta khả năng coi Grunt là 1 công cụ để build code cũng như tự động các task lặp đi lặp lại (task runner). Công việc của task runner khả năng kể đến như nén, biên dịch các file css, javascript, chạy unit test.

Tại sao nên dùng grunt Hệ sinh thái Grunt rất lớn và đa dạng Số lượng plugin lớn, hỗ trợ tốt việc chạy tự động các task

2.Cài đặt grunt

Để cài đặt grunt trước hết chúng ta cần cài đặt nodejs. Hướng dẫn cài đặt node.js cóp thể tham khảo tại đây. Sau khi cài đặt xong nodejs việc tiếp theo là cài đặt grunt trên terminal.

npm install grunt-cli -g

Tiếp đó là khởi tạo dự án

npm init

Sau lệnh này file package.json được tạo ra để lưu thông tin của dự án và các thư viện phụ thuộc.

Dưới đây là 1 file package.json ở dạng rất đơn giản

, “author”: “demo author”, “license”: “ISC” }

Trên thực tế sau khi cài đặt các thư viện, package liên quan, keyword, các ràng buộc phụ thuộc về các phiên bản thư viện được dùng 1 file package.json hoàn chỉnh sẽ trông như thế này

, “scripts”: , “main”: “lib/grunt”, “keywords”: , “dependencies”: , “devDependencies”: , “files”: }

Sau khi cấu hình xong chúng ta cần chạy lệnh

npm install

để cài đặt các plugin và module rất cần thiết cho dự án

3. Cấu hình grunt

Grunt dùng Gruntfile.js (cùng thư mục với package.json) để đọc các thông tin cấu hình cho các task runner.

Trong file Gruntfile.js này chúng ta sẽ định nghĩa công việc của các task runner (ví dụ như minify các file css và js, chạy 1 số unit test).

Xem thêm: Thành Tựu Là Gì – Thành Tích Và Thành Tựu

module.exports = function (grunt) , files: } }, uglify: , “ng-app-min”: } }, ngAnnotate: , app1: } } }); // Register the default tasks. grunt.registerTask(“default”, ); };

Phần require(“matchdep”) có nhiệm vụ load toàn bộ các module được khai báo trong file package.json. Nếu không có phần này, chúng ta cần phải load các module 1 cách thủ công hơn bằng cách dùng

grunt.loadNpmTasks(Module name)

Trong ví dụ trên khả năng thấy có những task sau được định nghĩa

CSSmin: build và minify các file css Uglify: build và minify các file js ngAnnotate: thêm xóa các kí pháp của Angular

Trong phần định nghĩa các task, các file resource đầu vào cũng như file đầu ra sau quy trình chạy task sẽ được chỉ rõ, mặt khác có thêm 1 số tùy chọn khác (ví dụ như có thực hiện nén file hay không)

Ở phía cuối file định nghĩa mức độ ưu tiên, thứ tự thực hiện các task tại

grunt.registerTask(“default”, );

Các task runner sẽ được thực hiện theo đúng thứ tự được khai báo tại đây để cho ra kết quả cuối cùng.

4. Grunt vs Gulp

Giống như grunt, gulp cũng là 1 công cụ để hỗ trợ việc tự động hóa các task và cũng đang được dùng khá nhiều. Vậy điểm khác biệt giữa grunt và gulp là gì

4.1 Cộng đồng phát triển, người dùng

Grunt được phát triển từ sớm hơn và có được số người dùng nhiều hơn. Số lượt tải về của Grunt là nhiều hơn hẳn.

Cũng do được phát triển từ sớm nên grunt hỗ trợ nhiều plugin hơn (4000 so với 1200 của gulp).

4.2 Tốc độ

Grunt dùng các file trung gian tạm thời trong quy trình biên dịch các file css và js trong khi Gulp xử lí các thao tác đó trong bộ nhớ. vì thế Gulp có lợi thế hơn hẳn trong cuộc đua vầ tốc độ.

Với các dự án qui mô nhỏ, sự khác biệt về tốc độ là không một cách đáng kể nhưng đối với các dự án lớn thì dùng gulp đem lại sự khác biệt một cách đáng kể về hiệu năng.

Xem thêm: Tải Game Cá Sấu ăn Thịt Người, ‎hungry Shark Evolution Trên App Store

4.3 Cấu hình

Gulp là 1 ví dụ tốt về “code over configuration”, việc cấu hình trong gulp đơn giản hơn, dễ đọc, dễ debug hơn, và file cấu hình ngắn gọn hơn.

Kết luận

Nếu muốn dùng được nhiều plugin hơn được hỗ trợ tốt hơn bạn nên dùng grunt còn nếu dự án cần ưu tiên tốc độ xử lí hơn và không bắt buộc quá nhiều các thư viện phức tạp hãy chọn gulp

Chuyên mục: Hỏi Đáp