Loại bỏ CSS không cần thiết với PurifyCSS và Grunt

() translation by (you can also view the original English article)

Trong hướng dẫn này tôi sẽ chỉ cho bạn cách sử dụng Grunt và PurifyCSS để tạo ra một stylesheet siêu-nhẹ ít tốn công nhất. Chúng ta sẽ cài đặt nó, sau đó tìm hiểu cách để chạy nó mà không cần Grunt, để cung cấp cho chúng ta các phong cách (style) hiệu quả hơn.

Xem video hướng dẫn

PurifyCSS là một công cụ JavaScript phân tích các tập tin đánh dấu của bạn (HTML, PHP, hoặc thậm chí cả JavaScript), sau đó tham chiếu chúng qua bất kỳ CSS nào mà bạn đang sử dụng. Bất kỳ selector nào trong CSS của bạn mà không được sử dụng sẽ bị loại bỏ, để lại cho bạn chỉ những phong cách mà bạn thực sự cần.

Cài đặt

Để cài đặt PurifyCSS bạn có thể kéo trực tiếp repo (kho chứa) của nó từ GitHub, hoặc cài đặt nó thông qua npm (để biết thêm về cách thực hiện hãy xem qua hướng dẫn này từ Kezz).

Bản demo của chúng ta

Các tập tin mà chúng ta sẽ sử dụng để minh hoạ PurifyCSS là một stylesheet đầy đủ của Bootstrap và một index.html. Bạn có thể lấy chúng từ repo nguồn. Tập tin index.html thì khá đơn giản; chỉ có một hero section, với một vài nút bấm, các phần tử form, và Bootstrap grid (ô lưới); chúng ta chắc chắn không cần toàn bộ phong cách của Bootstrap.

bootstrap styles — Toàn bộ stylesheet của Bootstrap

Chạy PurifyCSS

Để chạy PurifyCSS trên stylesheet này, vào trình gõ lệnh, điều hướng đến thư mục dự án và chạy lệnh sau đây:

lệnh purifycss để bắt đầu
stylesheet nguồn để được làm sạch
các tập tin đích, trong trường hợp của chúng ta là index.html
một tham số tùy chọn --min nếu chúng ta muốn kết quả CSS được rút gọn.
một tham số tùy chọn --out ở sau cái này chúng ta có thể thiết lập vị trí mà chúng ta muốn các tập tin kết quả để được lưu
tham số tùy chọn --info nếu chúng ta muốn thấy tiến trình được ghi lại trong terminal
và tham số tùy chọn --rejected, khi được thêm vào, ghi lại tất cả các selector mà đã được loại bỏ từ stylesheet nguồn

Lệnh hoàn chỉnh của chúng ta trông như thế này:

1	purifycss css/bootstrap-full.css index.html --min --out css/bootstrap-purify.css --info --rejected

Kết quả

Stylesheet nguồn đã được cắt bớt khoảng hơn 100Kb, rất tốt!

Sử dụng PurifyCSS với Grunt

Để tự động hóa quá trình của chúng ta hơn nữa chúng ta có thể sử dụng một task runner (trình chạy tác vụ) như Grunt. Quay trở lại điểm khởi đầu của chúng ta, chúng ta cần thêm một package.json vào dự án của chúng ta. Chạy lệnh npm init từ trong thư mục của chúng ta sẽ đưa chúng ta đến một tiến trình tạo ra package.json, về cơ bản xuất ra một tập tin với các chi tiết sau:

{
  "name": "purifycss",
  "version": "1.0.0",
  "description": "A file for testing Grunt PurifyCSS",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Adi Purdila",
  "license": "ISC",
}

Sau đó, nếu chúng ta vẫn chưa có nó, thì chúng ta cần phải cài đặt Grunt:

1	npm install grunt --save

Nếu điều đó được thực hiện xong, bạn sẽ thấy một thư mục "node_modules" đã được thêm vào dự án của bạn.

Cài đặt Grunt Plugin

Tiếp theo, chúng ta cần cài đặt Grunt plugin cho PurifyCSS.

1	npm install grunt-purifycss --save

Tạo Gruntfile

Bây giờ, chúng ta cần tạo một tập tin gọi là gruntfile.js. Hãy nhìn vào các tập tin mã nguồn để xem những gì được chứa trong tập tin này, nhưng đặc biệt lưu ý đến các Grunt task của chính nó:

        purifycss: {
            target: {
                src: ['*.html', 'js/*.js'],
                css: ['css/bootstrap-full.css'],
                dest: 'css/bootstrap-grunt.css'
            }
        }

Các tùy chọn bên trong đối tượng đích có lẽ quen thuộc với bạn từ trong bài tập trước của chúng ta, và với bộ tham số này, thì tập tin của chúng ta sẵn sàng.

Để chạy Grunt, trong terminal nhập lệnh sau:

1	grunt purifycss

Kết luận

Và chúng ta đã hoàn thành! Chúng ta đã tìm hiểu hai phương pháp tiếp cận khác nhau trong việc sử dụng PurifyCSS để dọn sạch các stylesheet của chúng ta. Nên nhớ: không có lý do gì để các trình duyệt nạp hàng kilobyte phong cách mà không được sử dụng, hiệu năng là quan trọng!