Hướng dẫn sử dụng GruntJs

 

GruntJs là gì?

GruntJS là một JavaScript Task Runner, dựa trên dòng lệnh, xây dựng công cụ giúp các developer thực hiện các công việc lặp đi lặp lại.
Ngoài GruntJs, bạn có thể tham khảo thêm 1 số thư viện khác: Make, Ant, Gulp, Jake, Rake và MSBuild.
VD:
Khi build 1 website, bạn cần kiểm tra các file javascript, gom lại thành 1 file và nén chúng. GruntJs sẽ thực hiện tự động mỗi khi deploy, thay vì chúng ta phải thực hiện thủ công.

Cài đặt

Để sử dụng Grunt, bạn cần cài đặt: NodeJs, grunt-cli.
Bạn có thể download NodeJs tại đây.
Sau khi cài đặt NodeJs, bạn mở command line và cài đặt grunt-cli bằng cách:

npm install -g grunt-cli

Cấu hình Grunt

Bạn cần có 2 file: package.json và gruntfile.
File "package.json" dùng để khai báo các package kèm version của nó và các thông tin khác về project.
VD

{
  "name": "configure-grunt-example",
  "version": "1.0.0",
  "description": "Grunt Configuration",
  "main": "",
  "dependencies": {},
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-jshint": "^1.1.0",
    "grunt-contrib-uglify": "^2.0.0",
    "jshint-stylish": "^2.2.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "grunt",
    "visual",
    "studio",
    "jsmint"
  ],
  "author": "Minh Tam",
  "license": "MIT"
}

Gruntfile: đây là file cấu hình để bạn thực hiện khi chạy Task runner.
VD:

{
  "name": "configure-grunt-example",
  "version": "1.0.0",
  "description": "Grunt Configuration",
  "main": "",
  "dependencies": {},
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-jshint": "^1.1.0",
    "grunt-contrib-uglify": "^2.0.0",
    "jshint-stylish": "^2.2.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "grunt",
    "visual",
    "studio",
    "jsmint"
  ],
  "author": "Minh Tam",
  "license": "MIT"
}

Có 2 chỗ bạn cần phải lưu ý:

1. initConfig() function
2. grunt.registerTask: nơi để đăng ký những Task cơ bản, với nhãn BasicTask- đây là tên được sử dụng trong terminal để gọi Task.

 Tạo 1 task đơn giản

Bạn cần thực hiện 4 bước:

1. Cài đặt 1 plugin
2. Khai báo trong Gruntfile
3. Thêm vào Gruntfile
4. Thêm vào task grouup nếu cần thiết.

Cài đặt 1 plugin

Để tìm kiếm 1 plugin, bạn vào trang https://www.npmjs.com/ để tìm kiếm
Giả sử tôi chọn grunt-contrib-uglify

Bạn chú ý để 2 dòng lệnh npm install và grunt.loadNpmTasks
Bạn dùng câu lệnh 1 để cài đặt plugin

Cấu hình Gruntfile

Khai báo gruntfile cơ bản:

 
module.exports = function(grunt) {
 
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json')
    });
 
    grunt.registerTask('default', [] );
 
};

Thêm grunt-contrib-uglify:
Bạn dùng câu lệnh 2 (ở trên) để load plugin javascript:

Để plugin uglify hoạt động, bạn cần cấu hình Grunt trong hàm grunt.initConfig
Bạn tham khảo thêm trên trang Github

module.exports = function(grunt) {
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            build: {
                files: {
                    'dist/out.min.js': ['src/js/firstController.js', 'src/js/secondController.js']
                }
            }
        }
    });
    grunt.registerTask('default', ['uglify']);

};

Thêm vào group task

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

Xong rồi bạn mở Console, gõ grunt và xem kết quả.
Bạn có thể tham khảo ví dụ của mình ở trang Github.
Chúc các bạn thành công