Grunt là gì? Hướng Dẫn Cơ Bản Về JavaScript Task Runner

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

Vậy chính xác Grunt là gì? tại sao lại sử dụng một task runner như grunt? Tất cả được gói gọn chỉ bằng một từ: Tự động hóa.

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

Grunt trong tiếng anh nghĩa là chỉ con heo kêu ụt ịt. Còn trong lập trình, Grunt là JavaScript task runner, công cụ được sử dụng để tự động thực hiện các công việc thường gặp trong lập trình như minification, compilation, unit testing, và linting. Công cụ gồm một giao diện dòng-lệnh để chạy các tác vụ được xác định trong file (còn gọi là Gruntfile). Grunt được tạo ra bở Ben Alman và viết bằng Node.js. Công cụ được phân bố thông qua npm. Đến tháng 9 năm 2016, có hơn 5,000 plugins khả dụng trong hệ sinh thái Grunt.

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

Hữu ích

Grunt.js cho phép bạn chạy các tác vụ của mình khi nó tìm kiếm cấu hình theo thuộc tính cùng tên. Theo cách tương tự, đa tác vụ có thể có nhiều cấu hình. Nó cũng cho phép bạn tạo các nhiệm vụ bằng "bí danh" (alias) và đây là một tính năng rất hữu ích cho phép bạn đơn giản hoá (abstract) các chi tiết của một task chung chung.

Ví dụ có thể là khi bạn minify, test, concatenate, và abstract dướng task có tên "build".

Nhất quán

Grunt.js cung cấp cho bạn một giao diện nhất quán để cấu hình và sử dụng bất kỳ tác vụ nào, nói cách khác, bạn phải làm việc và sử dụng một tập hợp lệnh thống nhất, đảm bảo bất cứ ai nếu muốn cấu hình grunt.js đều phải viết mã theo cùng một tiêu chuẩn.

Cộng đồng

Grunt.js có một cộng đồng các Nhà phát triển Web Front-End mạnh mẽ. Đã có sẵn một vài task hữu í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, và như đã đề 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ế mạnh mẽ của Grunt. Bây giờ hãy xem thử cách cài đặt Grunt như thế nào nhé.

Cài đặt Grunt

Như bạn đã biết Grunt được xây dựng trên Node.js và nó có sẵn dưới dạng package thông qua Node package manager (npm). Vì vậy, công cụ rất dễ cài đặt.

npm install grunt --save-dev

Sau đó, tiếp tục cài đặt Grunt Module bạn 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 tạo một package.json và một Gruntfile.js trong thư mục gốc của project.

package.json

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

Chạy npm install, và NPM sẽ lấy những thông tin này cho chúng ta trong folder 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 đặt Gruntfile.js mô 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');

 

  // Default 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 bạn phải được chỉ định trong hàm:

module.exports = function(grunt) {

  // grunt code

};

 

grunt.initConfig({});

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

Custom tasks

Bạn có thể định cấu hình Grunt để chạy một hoặc nhiều tác vụ theo mặc định bằng cách xác định tác vụ mặc định. Chạy grunt tại dòng lệnh mà không chỉ định tác vụ, Grunt sẽ chạy tác vụ uglify . Điều này về mặt chức năng cũng giống như việc ta chạy chính xác grunt uglify hoặc thậm chí là grunt default. Bất kỳ số lượng tác vụ nào (có hoặc không có đối số) có thể được chỉ định trong array, ví dụ:

grunt.registerTask('default', ['uglify']);

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

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

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

Theo Itexico