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

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

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 của mình:

demo
—-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 nam.css và jquery.js với nam.js thành nam.js .

Sau đó sẽ nén file nam.css thành nam.min.css và nam.js thành nam.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": "NamDemo",
    "version": "0.0.1",
    "description": "Demo Minify CSS - JS",
    "main": "Gruntfile.js",
    "author": "NamCoder",
    "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/nam.css'
        },
        
        gopjs: {
           src: [
              'js/jquery.js',
              'js/nam.js',
              
           ],
           dest: 'js/nam.js'
        },
     },
     cssmin: {
        nencss: {
           src: 'css/nam.css',
           dest: 'css/nam.min.css'
        },
        
     },
     uglify: {
        nenjs: {
           src: 'js/nam.js',
           dest: 'js/nam.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ũng dễ hiểu mà phải không. Hi

OK. Các bạn nhấn phím Shift và click 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à: nam.css và nam.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 nam.min.css và nam.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

Nguồn: Namcoder