Khi ai đang xây dựng một ứng dụng web và làm việc trên một dự án công trình JavaScript, có nhiều điều các bạn sẽ muốn làm thường xuyên. Ví dụ: bạn có nhu cầu thực hiện những tác vụ như thu nhỏ (minification), biên dịch (compilation), unit testing, linting, v.v. Sau khi chúng ta đã định cấu hình, một task runner rất có thể thực hiện tại hầu hết các bước đó đến bạn. Toàn bộ các tác vụ đó được định thông số kỹ thuật trong một tệp JavaScript có tên Gruntfile.js khiến cho bạn thực hiện quá trình của mình mau lẹ và tiện lợi hơn những đấy.

Bạn đang xem: Grunt là gì

Vậy đúng mực Grunt là gì? lý do lại sử dụng một task runner như grunt? toàn bộ được gói gọn gàng chỉ bởi một từ: tự động hóa.

Trước hết, Grunt là gì thế?

Grunttrong giờ đồng hồ anh tức là chỉ bé heo kêu ụt ịt. Còn vào lập trình, Grunt làJavaScripttask runner, hiện tượng được áp dụng để tự động thực hiện nay các công việc thường gặp mặt trong lập trình sẵn nhưminification,compilation,unit testing, vàlinting. Công cụ có mộtgiao diện dòng-lệnhđể chạy những tác vụ được xác địnhtrong tệp tin (còn gọi là Gruntfile). Grunt được tạo nên bở Ben Alman và viết bằngNode.js. Qui định được phân bổ thông quanpm. Đến tháng 9 năm 2016, tất cả hơn 5,000 plugins khả dụng trong hệ sinh thái xanh Grunt.

Tại sao bạn nên chọn Grunt làm tasks runner cho project?

Hữu ích

Grunt.js có thể chấp nhận được bạn chạy những tác vụ của chính mình khi nó tìm kiếm thông số kỹ thuật theo thuộc tính thuộc tên. Theo phong cách tương tự, nhiều tác vụ gồm thể có nhiều cấu hình. Nó cũng được cho phép bạn tạo những nhiệm vụ bởi "bí danh" (alias) và đấy là một thiên tài rất hữu ích chất nhận được bạn dễ dàng hoá (abstract) các cụ thể của một task phổ biến chung.

Ví dụ rất có thể là lúc bạnminify, test, concatenate, cùng abstractdướng task mang tên "build".

Nhất quán

Grunt.js cung cấp cho bạn một giao diện đồng hóa để cấu hình và sử dụng ngẫu nhiên tác vụ nào, nói bí quyết khác, chúng ta phải thao tác và sử dụng một tập đúng theo lệnh thống nhất, bảo vệ bất cứ ai giả dụ muốn cấu hình grunt.js đều nên viết mã theo và một tiêu chuẩn.

Cộng đồng

Grunt.js gồm một xã hội các Nhà phát triển Web Front-End táo tợn mẽ. Đã bao gồm sẵn một vài ba task bổ ích để bạn sử dụng ngay.

Mạnh mẽ & linh hoạt

Grunt.js cung cấp tất cả tiềm năng của Node.js cho các tác vụ của bạn, cùng như sẽ đề cập trước đó, công cụ giúp đỡ bạn bằng cách tự động hóa các tác vụ.

Và ta đã biết được 4 điểm lợi thế khỏe khoắn của Grunt. Hiện giờ hãy xem demo cách cài đặt Grunt thế nào nhé.

Cài đặt Grunt

Như các bạn đã biết Grunt được tạo ra trên Node.js cùng nó gồm sẵn dưới dạngpackagethông quaNode package manager(npm). Vì chưng vậy, công cụ rất đơn giản cài đặt.

npm install grunt --save-dev

Sau đó, tiếp tục thiết lập Grunt Module chúng ta có thể cần đến trong quá trình làm việc, ví dụ:

npm install grunt-contrib-concat --save-dev

Bây giờ, hãy sinh sản một package.json và một Gruntfile.js vào thư mục cội của project.

package.json

Vậy đúng đắn thì package.json có tác dụng gì? Tệp này mang lại NPM biết bọn họ sẽ thiết đặt nhữngdependenciesnào cho dự án công trình của mình. Điều này có không ít lợi cố gắng và nó góp ích cho bạn khi bạn làm việc với team bằng phương pháp giữ cho toàn bộ các môi trường thiên nhiên được đồng bộ hóa cùng sử dụng các dependencies giống nhau.

Chạy npm install, với NPM đã lấy những tin tức này cho chúng ta trong thư mục node_modules.

Ví dụ về package.json:

"name": "my-project-name",

"version": "1.0.0",

"devDependencies":

"grunt": "~0.4.1",

"grunt-contrib-compass": "~0.2.0",

"grunt-contrib-watch": "~0.4.3",

"grunt-contrib-uglify": "~0.2.0"

Đến đây bạn sẽ phải thiết lập Gruntfile.js tế bào tả quá trình build.

module.exports = function(grunt)

// Project configuration.

grunt.initConfig(

pkg: grunt.file.readJSON("package.json"),

uglify:

options:

force: true

);

// Load the plugin that provides the "uglify" task.

grunt.loadNpmTasks("grunt-contrib-uglify");

// mặc định task(s).

grunt.registerTask("default", <"uglify">);

;

Mỗi Gruntfile sử dụng một hàm wrapper được đặt tên theo định dạng cơ bản, và tất cả Grunt code của khách hàng phải được hướng dẫn và chỉ định trong hàm:

module.exports = function(grunt)

// grunt code

;

grunt.initConfig();

grunt.initConfig khởi tạotask configuration objectcho các dự án mà chúng ta đang thực hiện. Chúng ta có thể lưu trữ bất kỳ dữ liệu tùy ý nào phía bên trong grunt.initConfig, miễn là dữ liệu đó ko xung tự dưng với những thuộc tính cơ mà tác vụ của khách hàng yêu cầu, nếu như không, tài liệu đó sẽ bị bỏ qua.

Custom tasks

Bạn rất có thể định cấu hình Grunt để chạy một hoặc những tác vụ theo mặc định bằng phương pháp xác định tác vụ mang định. Chạy grunt tại cái lệnh mà không chỉ có định tác vụ, Grunt đã chạy tác vụuglify. Điều này về mặt tác dụng cũng hệt như việc ta chạy đúng chuẩn grunt uglify hoặc thậm chí còn là gruntdefault. Bất kỳ số lượng tác vụ như thế nào (có hoặc không có đối số) có thể được hướng đẫn trongarray, ví dụ:

grunt.registerTask("default", <"uglify">);

Các công ty và dự án đang áp dụng Grunt

Một số công ty và dự án lớn đang thao tác làm việc với Grunt, ví dụ như Adobe, jQuery, Twitter, Bootstrap, Adobe, WordPress, Walmart cùng nhiều công ty khác. Hãy khám nghiệm và coi liệu hiện tượng này có phù hợp với quá trình làm việc của bạn và có thể giúp công việc của bạn tiện lợi hơn không.

Xem thêm: Hiện Tượng ' Trăng Xanh Là Gì, Liệu Có Mang Lại Điềm Báo Tai Họa?

*

Khi bạn bước đầu sử dụng Grunt cho các dự án của mình, bạn sẽ thấy nó là 1 trong công cầm cố tuyệt vời. Để biết thêm tin tức vềtask runner này, chúng ta có thể truy cập trang web chính thức. Chỉ việc nhấp vào đây.