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']);
};