Hướng dẫn cách nén CSS và Js với GRUNT

Grunt là một JavaScript Task Runner được cài đặt và quản lý thông qua node.js. Grunt đang được rất nhiều ông lớn sử dụng như: Twitter, Adobe, jQuery…
Grunt 0.4.x yêu cầu Node.js phiên bản >=0.8.0. Nếu bạn sài node.js cũ có thể không phù hợp tương thích với grunt mới. Nên trước khi cài đặt bạn cần đảm bảo rằng lệnh npm đã cập nhật mới nhất node.js bằng cách chạy lệnh npm update -g npm.

Một số tính năng về Grunt:

• Biên dịch Less – Sass ra CSS
• Mifify – Nén CSS và JS
• Concat: gộp nhiều file thành một file.

Ngoài ra còn nhiều chức năng khác mình sẽ giới thiệu ở các bài sau trong blog. Việc nén code js và css giúp cải thiện tốc độ load trang, có rất nhiều công cụ rút gọn code javascript/css. Nhưng bài này mình giới thiệu cho các bạn Grunt vì nó chuyên nghiệp và có nhiều Module hữu ích. Không chỉ nén file loại bỏ các ký tự thừa làm code khó đọc một tác dụng nữa là để tránh người khác ăn cắp code của bạn, grunt sẽ gộp nhiều file thành một file duy nhất. Rất có ích cho tốc độ load trang.

Cài đặt Grunt

Trước khi cài đặt grunt hãy kiểm tra Node.js đã cài đặt chưa bằng cách gõ lệnh node -v, nếu chưa thì xem bài này.
Vì Grunt là plugin được quản lý bởi Node.js Package manager, do vậy để cài đặt grunt-cli rất đơn giản, bạn muốn cài đặt Grunt command line globally và có thể truy cập lệnh ở mọi folder bạn muốn. Mở cmd (windows) và chạy lệnh sau:

npm install -g grunt-cli

Lệnh trên sẽ cài grunt vào thư mục truy cập chung tại ổ c:\ bạn có thể sử dụng lệnh grunt vào bất kỳ dự án nào thông qua lệnh cmd.

Grunt làm việc như thế nào?

Khi chạy lệnh grunt tại project lưu ý ở đây mình sử dụng Command Line của windows, làm ví dụ. Nếu phát hiện grunt có cài đặt trong máy tính GRUNT CLI nạp các thư viện cài đặt của grunt có trong project sau đó làm việc với file Gruntfile.js đây là file cấu hình do grunt yêu cầu có nhiệm vụ hướng dẫn cách build dự án sử dụng grunt.

Build dự án có hỗ trợ Grunt

Nếu bạn tải một thư viện trên github mà có hỗ trợ build kèm theo grunt, để nhận dạng bạn sẽ thấy file Gruntfile.js, rules.json trong folder tải về. Và chắc chắn đây là node.js project tồn tại file package.json. Mở file package.json sẽ có các thư viện grunt là các dependencies yêu cầu cài đặt trước khi sử dụng grunt.

"version": "1.0.0",
  "dependencies": {},
  "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-clean": "~0.4.1",
    "grunt-contrib-concat": "~0.1.1",
    "grunt-contrib-jshint": "~0.1.0",
    "grunt-contrib-jst": "~0.5.0",
    "grunt-contrib-less": "~0.5.0",
    "grunt-contrib-uglify": "~0.1.0",
    "grunt-contrib-watch": "~0.1.4",
    "grunt-docco": "~0.2.0"
  },

Làm theo các bước sau để build dự án với grunt.
1. Mở cmd chuyển đến thư mục chứa code dự án.
2. Cài đặt dependencies được yêu cầu bao gồm có ‘grunt’

npm install

3. Chạy lệnh grunt.
Ví dụ: mình thử rebuild dự án tạo ứng dụng chat với firechat
và kết quả sau khi chạy lệnh trên:

Tạo dự án Grunt mới

Việc cài đặt có liên quan đến 2 file package.json và Gruntfile

• package.json: khá quen thuộc với những ai thường xuyên sử dụng node.js, file này sử dụng bởi npm để lưu trữ metadata về project, bạn có thể liệt kê grunt và grunt plugin cần thiết cho dự án, khai báo vào thuộc tính “devDependencies” trong file này.
• Gruntfile: là file cấu hình grunt có tên Gruntfile.js hoặc Gruntfile.coffee, tại đây bạn định nghĩa thiết lập task và nạp grunt plugins để build dự án, viết bằng lệnh node.js

Lưu ý: trong bài viết nếu mình nói Gruntfile nghĩa là một trong 2 file Gruntfile.js & Gruntfile.coffee.

package.json
Chúng ta tạo 2 file trong folder dự án, package.json và Gruntfile nằm cùng vị trí ở folder gốc. Một số cách tạo package.json cho dự án:
– Lệnh npm init sẽ hướng dẫn từng bước tạo nội dung file package.json, nhưng cơ bản nội dung trong file này chứa các module grunt cần yêu cầu cài đặt và có thể thêm thông tin tùy thuộc vào dự án bạn đang triển khai.

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

Đây là cách đơn giản nhất để thêm Grunt và gruntplugins vào dự án thông qua file cấu hình package.json. Bạn có thể cài đặt node module từng depedency và thêm module vào file này với lệnh npm install grunt --save-dev.
Ví dụ:
Cài đặt grunt mới nhất vào fodler dự án node và để tự động thêm vào package.json chúng ta chạy lệnh sau:

npm install grunt --save-dev

Hoặc cài đặt tất cả các module có khai báo devDepedencies như trên bằng lệnh tổng hợp:

npm install

Gruntfile

Nói thêm, Gruntfile.js và Gruntfile.coffee được viết bằng ngôn ngữ javascript hoặc CoffeeScript. Nội dung Gruntfile bao gồm các phân đoạn:

• Hàm wrapper xuất bản module
• Cấu hình project và các công việc thực hiện
• Nạp grunt plugins và tác vụ
• Tùy biến tác vụ

Ví dụ: chúng ta có module grunt-contrib-uglify khai báo trong package.json có tác vụ uglify thực hiện công việc tối ưu file code nguồn và sinh ra comment tự động sử dụng metadata. Khi chạy lệnh grunt mặc định task uglify sẽ được gọi theo cấu hình của Gruntfile sau:

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);

};

Giải thích:
wrapper function
mọi grunt code chứa trong hàm.

module.exports = function(grunt) {
  // Do grunt-related things in here
};

Project and task configuration
Grunt tasks sử dụng hàm grunt.initConfig để cấu hình dữ liệu dựa vào đối tượng JSON truyền vào hàm.
Ví dụ hàm grunt.file.readJSON('package.json') dùng để đọc file JSON meta data có nội dung về cấu hình của project nằm trong file package.json

Grunt code có template tag giúp bạn lấy biến thuộc tính từ đối tượng pkg trả về bởi grunt.file.readJSON('package.json'). Bạn có thể lấy mọi thông tin cấu hình. ie:

'<%= pkg.name %>'

Chú ý: cách viết này giống asp nhưng sử dụng trong chuỗi.
task ‘uglify’ có tùy chọn cài đặt ‘options’ và build dự án thành một file duy nhất ở đầu ra ‘build’, chỉ định nguồn và folder sinh file kết quả.

// Project configuration.
grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  uglify: {
    options: {
      banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
    },
    build: {
      src: 'src/<%= pkg.name %>.js',
      dest: 'build/<%= pkg.name %>.min.js'
    }
  }
});

Loading Grunt plugins and tasks
task được định nghĩa trong plugin, hầu hết để sử dụng task như concatenation, minification, ..có trong grunt plugins.

Đó chính là các module hay plugin bạn chỉ định trong package.json là các dependency và được cài đặt thông qua lệnh npm install.

Bạn có thể kích hoạt plugin trong Gruntfile với hàm này:

// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');

Chú ý: để biết những task hỗ trợ của grunt bạn gõ lệnh grunt --help.

Bài tập

Cấu trúc thư mục demo của mình:

demo
—-css
———bootstrap.css
———style.css
—-js
——–jquery.js
——–nam.js

Bài tập: Gộp 2 file bootstrap.css và style.css thành hoangweb.css và jquery.js với hoangweb.js thành hoangweb.js
Sau đó sẽ nén file hoangweb.css thành hoangweb.min.css và hoangweb.js thành hoangweb.min.js

Chép nội dung sau vào package.json

{
    "name": "HoangwebDemo",
    "version": "0.0.1",
    "description": "Demo Minify CSS - JS",
    "main": "Gruntfile.js",
    "author": "Hoangweb.com",
    "license": "GPL",
    "devDependencies": {
         "grunt": "~0.4.1",
         "grunt-contrib-uglify": "~0.2.2",
         "grunt-contrib-cssmin": "~0.6.1",
         "grunt-contrib-concat": "~0.3.0"
    }
}

Tiếp đến, bạn tạo tiếp 1 file tên Gruntfile.js lưu trong thư mục demo.

module.exports = function(grunt) {
 grunt.initConfig({
     concat: {
        gopcss: {
           src: [
              'css/bootstrap.css',
              'css/style.css',
           ],
           dest: 'css/hoangweb.css'
        },
        
        gopjs: {
           src: [
              'js/jquery.js',
              'js/hoangweb.js',
              
           ],
           dest: 'js/hoangweb.js'
        },
     },
     cssmin: {
        nencss: {
           src: 'css/hoangweb.css',
           dest: 'css/hoangweb.min.css'
        },
        
     },
     uglify: {
        nenjs: {
           src: 'js/hoangweb.js',
           dest: 'js/hoangweb.min.js',
        }
     }
 });

 grunt.loadNpmTasks('grunt-contrib-concat');
 grunt.loadNpmTasks('grunt-contrib-cssmin');
 grunt.loadNpmTasks('grunt-contrib-uglify');

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

Chúng ta sử dụng 3 Module.

• Concat: task này dùng để gộp nhiều file thành 1 file
• CSSmin: dùng để nén file CSS
• Uglify: module dùng để nén file JS

Mỗi một tên tác vụ viết vào một đối tượng JSON gồm ‘src’ nơi chứa các files nguồn cần nén hoặc gộp (nếu nhiều file bạn liệt kê vào mảng) và ‘dest’ là nơi xuất ra file kết quả. Tên task vụ bạn sẽ gọi từ lệnh grunt.
Khá đơn giản phải không.

Ok, giờ mở cmd lên và trỏ tới thư mục ‘demo’ hoặc dùng phím tắt bạn dữ phím shift và click chuột phải tại thư mục demo rồi chọn Open command window here để cmd làm việc trực tiếp đến folder này.

Trước tiên chúng ta cần download các gói modules bằng cách gõ lệnh:

npm install

Gộp CSS- JS
Viết thêm lệnh task và tên task bạn có chỉ định trong cấu hình Gruntfile ở trên, đằng sau lệnh grunt. Bạn có thể gọi nhiều task cùng một lúc. Sau khi cài đặt xong các modules, bạn gõ tiếp lệnh để gộp các file lại với nhau.

grunt concat:gopcss concat:gopjs

Kết quả sẽ thấy 2 file mới tạo ra là: hoangweb.css và hoangweb.js như vậy là đã thành công.

Nén CSS – JS
Tương tự cách thực thi task như trên, chúng ta gọi task cssmin và uglify với tên task chỉ định.

grunt cssmin:nencss uglify:nenjs

Nếu thấy 2 file mới xuất hiện với tên hoangweb.min.css và hoangweb.min.js là đã thành công. Mở 2 file này để kiểm tra thành quả.
Chú ý:
Rút gọn tối ưu code, yêu cầu code bạn viết sáng sủa và tuân thủ theo quy định bởi grunt đưa ra như không được sử dụng trùng tên biến..Bạn cũng không nên lo lắng quá vì grunt sẽ có thông báo lỗi chi tiết và hướng dẫn bạn sửa lại code trước khi thực hiện lệnh grunt.

Ví dụ này là lỗi trùng tên biến, chẳng hạn thường trong vòng lặp for chúng ta khai báo biến chạy giống nhau để tối ưu với grunt bạn đổi tên biến khác nhau trong mỗi vòng lặp.

Trên đây mình vừa trình bày cơ bản về GRUNT và những plugins hữu ích giúp bạn tối ưu file CSS và JS một cách hiệu quả làm giảm nhẹ tốc độ tải trang hơn rất nhiều.

Chúc bạn thành công.
Tác giả: hoangweb.com

Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dõi blog này trên Twitter và Facebook