Trong quá trình phát triển web, có rất nhiều công việc mà chúng ta phải lặp đi lặp lại . Bao gồm task như nén file JavaScript và các tập tin CSS, unit testing...Để thực hiện các công việc này một cách tự động và làm “min” các tệp này Grunt (task runner) đã ra đời. Sau đây mình sẽ hướng dẫn một cái nhìn đơn giản làm thế nào để thiết lập và chạy với Grunt.
Giới thiệu về Grunt
Grunt là một Java Script Task Runner. Grunt được xây dựng trên nền tảng Node.js và được quản lý bởi NPM .
Grunt đang được rất nhiều ông lớn sử dụng như: Twitter – Adobe – Jquery – Modernizr…
Một số chức năng cơ bản của Grunt:
- Biên dịch Less – Sass ra CSS
- Minify – Nén CSS và JS
- Concat – Gộp nhiều file lại thành 1 file
Cài đặt Grunt
Để cài đặt Grunt cần cài đặt NodeJS
Sau đó là cài đặt Grunt CLI bằng cách gõ lệnh sau:
|
1
|
npm install grunt-cli -g |
Bạn hãy khởi tạo dự án bằng cách gõ lệnh npm init trên Terminal của bạn. Lệnh này sẽ tạo ra 1 file package.json lưu thông tin dự án và các thư viện phụ thuộc.
|
1
|
npm init |
Bước tiếp theo là cấu hình Project bằng việc khai báo các plugins vào trong file package.json. Trong đó, cần điền 4 thông tin của dự án: name, version, author và private. Thành phần devDependencies khai báo các node modules cần thiết để thực thi ứng dụng. Như ta thấy ví dụ dưới gồm module Grunt: cssmin, qunit, jshint và uglify. Riêng module matchdep trợ giúp load tự động NpmTasks, tránh việc phải load bằng tay các grunt-* plugins.
Sau khi cấu hình xong, chúng ta chỉ cần gõ npm install để cài đặt các mô-đun hoặc plugins cho dự án.
{
"name": " Demo GruntJS",
"version": "0.1.0",
"author": "@tranthithuthuy",
"private": true,
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-cssmin": "^0.10.0",
"grunt-contrib-jshint": "^0.10.0",
"grunt-contrib-qunit": "^0.5.2",
"grunt-contrib-stylus": "^0.18.0",
"grunt-contrib-uglify": "^0.5.1",
"grunt-ng-annotate": "^0.3.2",
"matchdep": "^0.3.0"
}
}
Cấu hình Grunt
Grunt sử dụng Gruntfile.js để đọc các thông tin cấu hình cho các task runner làm nhỏ gọn các file *.css và *.js.
Chúng ta sẽ sử dụng module.exports (wrapper) function. Đây là cách mà Node quản lý các cấu hình của chúng ta với phần còn lại của ứng dụng.
module.exports = function (grunt) {
//configuration here
};
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
globals: {
jQuery: true
}
}
},
Các bạn có thể xem thêm tại http://gruntjs.com/sample-gruntfile
Creating tasks
Khi đặt tên cho các task, chúng ta sẽ đặt tên cho task chính chúng ta build. Bạn có thể tạo ra nhiều task.
Khi bạn chạy grunt, tất cả các task sẽ được tự động chạy. Nếu bạn muốn tạo ra task trong cấu hình jshint, bạn có thể đặt tên chúng dev và production. Sau đó chúng ta có thể gọi các task sau bằng cách sử dụng jshint:dev hoặc jshint:production.
grunt.registerTask(taskName, [description, ] taskList).
Xem thêm tại http://gruntjs.com/creating-tasks
Demo
Đây là thư mục demo của mình
—-css ———bootstrap.css ———style.css —-js ——–jquery.js ——–nam.js
Mình sẽ thực hiện gộp 2 file bootstrap.css và style.css thành name.css và jquery.js với nam.js thành name.js .
Sau đó sẽ nén file name.css thành name.min.css và nam.js thành name.min.js
module.exports = function(grunt) {
grunt.initConfig({
concat: {
concatcss: {
src: [
'css/bootstrap.css',
'css/style.css',
],
dest: 'css/name.css'
},
concatjs: {
src: [
'js/jquery.js',
'js/name.js',
],
dest: 'js/name.js'
},
},
cssmin: {
zipcss: {
src: 'css/name.css',
dest: 'css/name.min.css'
},
},
uglify: {
zipjs: {
src: 'js/name.js',
dest: 'js/name.min.js',
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['concat', 'cssmin', 'uglify']);
};
Ở file trên, ý nghĩa của các Module như sau:
- Concat : dùng để gộp nhiều file thành 1 file
- CSSmin : dùng để nén file CSS
- Uglify: dùng để nén file JS
Chúng ta khai báo src là nơi chứa file nguồn cần nén hoặc gộp và dest là nơi xuất ra file kết quả.
Bài viết mình đã hoàn thành, hy vọng có thể giúp bạn hiểu hơn về Grunt. Để tìm hiểu kỹ hơn các bạn có thể vào trang chủ của Grunt.
Leave a Comment