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 GruntGiớ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à: demoCấ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 bạn cũng có thể sử dụng Tools nén CSS từ iChiaSe.Biz : http://www.ichiase.biz/p/nen-css.html
Chúc các bạn thành công
Nguồn : Sauciu.blogspot.com
Đăng nhận xét