Sử dụng Grunt tự động hóa công việc của bạn

Trong quá trình phát triển của mình, bạn sẽ gặp những công việc rất vụn vặt, tuy nhiên những việc tưởng chừng như rất nhỏ đó lại mất khá nhiều thời gian và công sức như việc ghép và rút gọn các file hay đơn giản như việc đổi tên thư mục sẵn có trên source code...

Trong bài viết này tôi sẽ giới thiệu cho các bạn một công cụ nhằm tiết kiệm thời gian và công sức cho những công việc như thế. Đó chính là Grunt một Javascript task runner.

Cài đặt Grunt

Việc cài đặt Grunt tương đối đơn giản bởi vì nó sử dụng npm package manager. Điều đó có nghĩa là bạn có thể cài đặt Grunt thông qua chính Node. Trước hết ta cần kiểm tra xem máy tính hiện tại đã cài Node chưa một cách đơn giản: mở một terminal lên và gõ command npm -v. Nếu kết quả hiển thị một version của Node thì máy bạn đã cài đặt Node rồi, còn nếu hiển thị "command not found" có nghĩa là máy bạn chưa cài đặt Node. Xem hướng dẫn cài đặt tại Node download page.

Cài đặt Grunt đơn giản với command:

npm install -g grunt-cli

Cách sử dụng đơn giản

Hai file tạo lên trái tim của Grunt đó là package.json và Gruntfile.js. File package định nghĩa tất cả dependencies của bên thứ ba mà bạn sẽ sử dụng, Gruntfile thì để cho bạn kiểm soát cách mà chúng được sử dụng. Dưới đây là một file package.json đơn giản:

{
  "name": "test-project",
  "version": "1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
  }
}

định nghĩa tên và phiên bản project của bạn. Mục dependencies chứa tất cả package mà bạn sử dụng. Có thể bạn sẽ tự hỏi rằng dấu ~ có tác dụng gì ở đây? Versions bắt buộc tuân theo các rule được định nghĩa ở the semantic versioner for npm Tóm lại:

• Chỉ rõ một phiên bản sẽ được sử dụng: 4.5.2
• Có thể biểu thị phiên bản được sử dụng lớn hơn hoặc nhỏ hơn một phiên bản tối thiểu/tối đa: >4.0.3
• Sử dụng dấu ~ để quy định một khối phiên bản. Ví dụ ~1.2 tương đương với 1.2.x - bất kỳ phiên bản nào trên 1.2.0 nhưng dưới 1.3

Có rất nhiều cách để xác định một phiên bản có sẵn, nhưng 3 điều tóm lại ở trên đã đủ cần thiết rồi. Bước tiếp theo là tạo một Gruntfile.js sẽ thực hiện công cuộc tự động hóa ở đây:

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

Đây là một khung cơ bản của Gruntfile. Ở đấy có hai nơi cần quan tâm. Thứ nhất là trong initConfig() function. Ở đó chứa tất cả những thiết lập trong project của bạn như biên dịch LESS/SASS file, minify scripts... Thứ hai là function ở dưới function configuration trên, nơi xác định các tasks. Bạn có thể thấy một task được xác định bởi tên default. Hiện tại nó không thực hiện gì cả, sau nay ta có thể thêm vào sau. Task thực chất là việc tạo hàng đợi các bits và peaces (chia nhỏ) cấu hình dự án và thực hiện chúng

Task đầu tiên

Thử tạo một task thực hiện minify một file javascript đơn lẻ. Có 4 việc chúng ta cần làm bất cứ khi nào tạo một task mới:

• Cài đặt plugin nếu cần thiết
• Đặt nó trong Gruntfile
• Viết một task
• Thêm task trên vào task group nếu cần

Tìm kiếm và cài đặt plugin

Cách đơn giản nhất để tìm một plugin đó chính là google :v Sử dụng command sau để cài đặt grunt-contrib-uglify

npm install grunt-contrib-uglify --save-dev

Có thể bạn sẽ phải chạy command dưới quyền root nếu nhận được message npm ERR! Please try running this command again as root/Administrator.. Bạn chỉ cần thêm sudo vào trước command là được:

sudo npm install grunt-contrib-uglify --save-dev

Command trên sẽ tự động add plugin trên vào file package.json.

Load plugin trong Gruntfile

Bước tiếp theo là thêm plugin vào Gruntfile.

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

Tạo một task cho việc minify scripts

Như chúng ta đã thảo luận ở trên, điều này nên được thực hiên bên trong hàm initConfig()

module.exports = function(grunt) {
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            build: {
                src: 'scripts.js',
                dest: 'scripts.min.js'
            }
        }
    });
    grunt.registerTask('default', [] );
};

Thêm task trên vào task group

Ngay tại thời điểm này, bạn có thể dùng command grunt uglify để thực hiện minify file javascrip trên. Tuy nhiên nếu muốn sử dụng nhiều task thì bạn cần thêm nó vào task group như sau:

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

Trong mảng [uglify] bạn có thể khai báo thêm nhiều task chạy cùng lúc với task group là default. Sử dụng command grunt default để chạy tất cả các task được khai báo trong mảng.

Ghép các files

Khi bạn muốn ghép nhiều files khác nhau thành một file duy nhất, bạn cần sử dụng plugin grunt-contrib-concat. Cài đặt plugin qua terminal:

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

Sau khi cài đặt thành công, ta cần thêm vào Gruntfile như sau: grunt.loadNpmTasks('grunt-contrib-concat') Tiếp theo là cấu hình ghép 3 files thành 1 file như sau:

concat: {
    dist: {
        src: ['dev/js/header.js', 'dev/js/myplugin.js', 'dev/js/footer.js'],
        dest: 'js/scripts.js',
    },
},

Đoạn code trên chỉ rõ nhưng file js nào sẽ được lấy để tạo thành file scripts.js. Nhưng nếu một file js mới được thêm vào thì sao? Ta có thể thay đổi như sau:

concat: {
    dist: {
        src: 'dev/js/*.js',
        dest: 'js/scripts.js',
    },
},

Bây giờ thì tất cả các file js nằm trong thư mục dev/js/ sẽ được ghép lại thành một file lớn hơn là js/scripts.js. Đăng ký thêm một task grunt.registerTask('mergejs', ['concat'] ); thì ta chỉ cần chạy command grunt mergejs là xong.

Tự động hóa quá trình tự động

Mỗi lần bạn muốn minify hay concat file lại phải chạy command trên terminal. Điều này khá bất tiện. Rất may là command watch grunt-contrib-watch đã giải quyết vấn đề đó cho chúng ta.

watch: {
    scripts: {
        files: ['dev/js/*.js'],
        tasks: ['concat', 'uglify'],
    },
}

Khi sử dụng command grunt watch, tiến trình sẽ tự động thực hiện việc uglify và concat khi có sự thay đổi bất kỳ file .js nào trong thư mục dev/js/.

Có rất nhiều plugin giúp cho bạn tự động hóa các task của mình, không chỉ thao tác đối với file javascripts mà còn với các file css, image... Let's google and enjoy

Nguồn: How To Use Grunt To Automate Your Workflow [Tutorials]