Front End - Quản Lý Và Tối Ưu Webpage Bằng CSS Sprites - Phần 2

webpack

12

optimize

12

frontend

29

CSS

50

Hùng Phạm viết ngày 24/02/2019

Trước khi bắt đầu viết tiếp phần 2, các anh em có thể xem lại Phần 1 của mình theo đường dẫn bên dưới:

https://kipalog.com/posts/Front-End---Quan-Ly-Va-Toi-Uu-Webpage-Bang-CSS-Sprites

Hoặc là có thể xem bài viết full cả hai phần tại đây nha (tiện quảng cáo một tí luôn ahihi )

https://hungphamdevweb.com/front-end-quan-ly-va-toi-uu-webpage-bang-css-sprites.html

Cách Thứ Hai:

Cách thứ 2 như mình đã đề cập từ trước, thì chúng ta sẽ dùng các tool để build Sprites, nếu dùng tool nó sẽ tiết kiệm thời gian hơn rất nhiều thay vì chúng ta phải ngồi define CSS cho từng icon một.

Có rất nhiều tool hiện nay có thể build Sprites như là: Grunt, Gulp hoặc là Webpack. Trong bài viết này thì mình sẽ dùng Webpack vì nó cũng đang nổi nên tiện chia sẽ để các anh em cùng tìm hiểu.

Điều kiện cần và đủ để build Sprites đó là các anh em cần phải install một package của Webpack có tên là webpack-spritesmith sau khi cài đặt xong, bước tiếp theo chúng ta cần phải config một tí trong file webpack.config.js để bắt đầu build.

//webpack.config.js
var path = require('path');

var SpritesmithPlugin = require('webpack-spritesmith');

module.exports = {
    // ...
    module: {
        rules: [
            {test: /\.styl$/, use: [
                'style-loader',
                'css-loader',
                'stylus-loader'
            ]},
            {test: /\.png$/, use: [
                'file-loader?name=i/[hash].[ext]'
            ]}
        ]
    },
    resolve: {
        modules: ["node_modules", "spritesmith-generated"]
    },
    plugins: [
        new SpritesmithPlugin({
            src: {
                cwd: path.resolve(__dirname, 'src/ico'),
                glob: '*.png'
            },
            target: {
                image: path.resolve(__dirname, 'src/spritesmith-generated/sprite.png'),
                css: path.resolve(__dirname, 'src/spritesmith-generated/sprite.styl')
            },
            apiOptions: {
                cssImageRef: "~sprite.png"
            }
        })
    ]
    // ...
};

Phía trên là code hướng dẫn của cái plugin này, các anh em nên lưu ý một vài điều đây để code vào file config Webpack của mình nha.

Rules: ở đây theo file config mặc định nó dùng styl, các em dùng cái gì code CSS thì khai báo vào đó ( lưu ý là nhớ khai báo rule cho file ảnh test: /\.png$/ nếu không thì file CSS của các anh em không thể load được ảnh sau khi đã được combine )

Src: ở đây nó sẽ import tất cả icon theo thư mục src/ico để build Sprites, các em lưu ý để chỉnh lại đường dẫn theo ý của mình.

Target: ở đây thì các anh em để ý là có hai cái là: image và css, image là nơi nó sẽ sinh ra file ảnh sau khi đã combine còn css là CSS sau khi đã build Sprites xong.

Lưu ý xem kỹ cách config để tránh tình trạng code không chạy giống như trên

Sau khi đã config thì dưới đây là hướng dẫn sử dụng trước khi dùng:

Để build Sprites thì các anh em cần phải tạo icon đã được resize từ trước sau đó đặt nó vào thư mục ico đã được khai báo ở trên.

Sau khi đã tạo icon và đặt nó vào thư mục ico, thì điều tiếp theo là run build cái Webpack.

Để hiển thị icon như mong muốn, chúng ta cần phải sử dụng class mà Webpack đã tạo cho chúng ta, đường dẫn bên dưới là chỗ sẽ khai báo tất cả các CSS Sprites, sau khi chúng ta đã run build.

css: path.resolve(__dirname, 'src/spritesmith-generated/sprite.styl')

Ví dụ:

Các anh em có một icon là zalo.png, thì sau khi run build xong để sử dụng icon này chúng ta cần sử dụng class như sau:

<i class="icon-zalo"></i>

Các anh em có thể coi thêm về cách config của mình ở đây nha:

https://github.com/phamphihungbk/master

Mọi thắc mắc vui lòng để bình luận bên dưới nhé, thân ái và quyết thắng