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

Thảo luận trong 'Sưu tầm Code Web hay' bắt đầu bởi hoangtrieumanhn, 2/1/15.

Bạn đang xem:

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

Coppy cùng chia sẻ nhé bạn!
  1. hoangtrieumanhn

    hoangtrieumanhn NO SPAM - SPAM LÀ ĐI LIỀN

    Tham gia ngày:
    28/12/14
    Bài viết:
    533

    Những Cảnh Đẹp Của Việt Nam Qua Góc Nhìn Từ FlyCam PhanTom 3 Professional (Video 4K)

    Bấm Youtube để đăng ký xem video nhé!


    [​IMG]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 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
     
    Diễn đàn Ntphong index siêu nhanh!

    Diễn đàn Seo

    Tiêu đề: Hướng dẫn cách nén CSS và Js với Grunt

    Ghi nguồn bài viết www.ntphong.com khi đăng tải lại bài viết này.

  2. Quảng cáo Thành viên VIP


    Những Cảnh Đẹp Của Việt Nam Qua Góc Nhìn Từ FlyCam PhanTom 3 Professional (Video 4K)

    Bấm Youtube để đăng ký xem video nhé!

  3. hoangtrieumanhn

    hoangtrieumanhn NO SPAM - SPAM LÀ ĐI LIỀN

    Tham gia ngày:
    28/12/14
    Bài viết:
    533
    là sao bạn nhỉ? mình không hiểu ý bạn lắm !!!!!
     
    Diễn đàn Ntphong index siêu nhanh!
Similar Threads: Hướng dẫn
Diễn đàn Tiêu đề Ngày
Thủ thuật Seo Hướng dẫn leader lập kế hoạch seo 1 năm Hôm qua, lúc 11:17
Kiến thức Onpages - Offpages Hướng dẫn về seo content tốt và seo content xấu Hôm qua, lúc 11:15
Kiến thức Onpages - Offpages Hướng dẫn cần thiết để kết nối nội dung internal Hôm qua, lúc 10:44
RAO VẶT MIỀN NAM Hướng dẫn sử dụng vỏ xe nâng Hôm qua, lúc 10:15
RAO VẶT TOÀN QUỐC Hướng dẫn mua bán pm - perfect money (tháng 5- 2017) Chủ nhật lúc 22:41
RAO VẶT TOÀN QUỐC Hướng dẫn làm hồ sơ xét tuyển cao đẳng dược hà nội năm 2017 Thứ sáu lúc 18:44
RAO VẶT TOÀN QUỐC Hướng dẫn tính tiền lương tăng ca khi làm việc tại nhật bản Thứ sáu lúc 14:47
RAO VẶT TOÀN QUỐC Tại sao giấy dán tường nhật bản lại là xu hướng trang trí nhà 2017 Thứ tư lúc 16:07

Link hữu ích: @@ giàn phơi thông minh, giàn phơi quần áo, giàn phơi quần áo thông minh, giàn phơi quần áo, thùng rác, sim tra sau, giàn phơi thông minh, can ho river city, Toyota camry 2017, Mật Ong Rừng, Mật Ong Rừng Nguyên Chất, @@
=