Đăng nhập

Hướng dẫn cách nén tập tin CSS và JS sử dụng Grunt

  • 09/01/2015 - 7:21 AM
  • 2021 Views

Tốc độ load trang là một phần quan trọng để website phát triển và thu hút người xem. Khi thiết kế website chúng ta phải quan tâm đến việc nén các file CSS và JS để trang web có thể load ở thời gian nhanh nhất có thể. Trong bài viết này mình sẽ giới thiệu qua về Grunt và cách nén CSS – JS sử dụng Grunt.

cach-nen-file-css-js-su-dung-grunt-1

Giới thiệu về Grunt

Grunt là một Java Script Task Runner. 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

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 bài này sẽ tập trung vào phần nén CSS và JS

Có rất nhất nhiều công cụ để thực hiện công việc này, online và offline, ở 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. Việc nén CSS và JS thật ra là gộp nhiều file thành 1 file và bỏ hết các khoảng trắng dư thừa, gọp các dòng xuống hàng của file thành 1 line duy nhất. Rất có ích cho tốc độ load trang.

Cài đặt Grunt

Để cài đặt được Grunt, đầu tiên các bạn phải cài Nodejs. Việc cài Nodejs khá đơn giản, các bạn có thể tự cài nhé. Sau khi cài Nodejs xong để kiểm tra đã cài thành công hay chưa, các bạn mở Command Line (command line của Window) lên, gõ lệnh: node -v . Nếu các bạn thấy hiện lên số phiên bản của Nodejs là ok.

Tiếp theo là cài NPM để cài Grunt, các bạn gõ lệnh: npm install -g grunt-cli

Hướng dẫn nén CSS – JS sử dụng Grunt

Ví dụ ở đây thư mục chứa web của mình sẽ là: demo

Cấu trúc thư mục demo:

  • demo
    • —-css
    • ———bootstrap.css
    • ———style.css
    • —-custom.js
    • ——–jquery.js
    • ——–all.js

Thực hiện gộp file:

  • bootstrap.cssstyle.css thành all.css 
  • jquery.js và custom.js thành all.js.

Sau đó sẽ nén file all.css thành all.min.cssall.js thành all.min.js

Các bạn tạo 1 file mới có tên package.json và lưu trong thư mục demo với nội dung như sau:

{
      "name": "DEMO",
      "version": "0.0.1",
      "description": "Demo Minify CSS - JS",
      "main": "Gruntfile.js",
      "author": "The CNTech",
      "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 theo các bạn tạo tiếp 1 file mới với tên: Gruntfile.js lưu trong thư mục demo với nội dung như sau:

module.exports = function(grunt) {
   grunt.initConfig({
      concat: {
         gopcss: {
             src: [
                 'css/bootstrap.css',
                 'css/style.css',
             ],
             dest: 'css/all.css'
         },
         gopjs: {
             src: [
                  'js/jquery.js',
                  'js/all.js',
              ],
              dest: 'js/all.js'
         },
      },
 cssmin: {
    nencss: {
       src: 'css/all.css',
       dest: 'css/all.min.css'
    },
 },
 uglify: {
     nenjs: {
          src: 'js/all.js',
         dest: 'js/all.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ả. Các bạn nhấn phím Shiftclick chuột phải lên thư mục demo để chọn Open command window here

Đầu tiên chúng ta cần download các gói Module về bằng câu lệnh này: npm install

Gộp CSS – JS

Sau khi báo download hoàn tất, các bạn tiếp tục gõ lệnh: grunt concat:gopcss concat:gopjs để gộp các file lại với nhau

Xong các bạn sẽ thấy 2 file mới xuất hiện là: all.cssall.js . Vậy là gộp file thành công

Nén CSS – JS

Các bạn gõ lệnh: grunt cssmin:nencss uglify:nenjs

Nếu thấy 2 file mới với tên all.min.cssall.min.js là đã thành công. Các bạn có thể mở 2 file này lên để xem thành quả. Bảo đảm sau khi các bạn gộp và nén các file CSS và JS thì tốc độ load trang của các bạn sẽ cải thiện nhiều hơn

Chúc các bạn thành công!