Front End - Quản Lý Và Tối Ưu Webpage Bằng CSS Sprites - Phần 2
webpack
10
optimize
9
frontend
26
CSS
44
White

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 :smile:)

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.

alt text

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

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 :smile:

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Hùng Phạm

14 bài viết.
15 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
7 2
CSS Sprites thật ra đã là một cái tên khá cũ rồi và mình viết bài viết này hy vọng nó sẽ hữu ích cho các anh em nào chưa bao giờ biết đến cái tên c...
Hùng Phạm viết 8 tháng trước
7 2
White
4 2
Webpack là một cái tên không quá mới nhưng mình nghĩ không ít lần các anh em đã nghe qua nó. Nhiệm vụ chính của Webpack trong hệ thống là dùng để đ...
Hùng Phạm viết 8 tháng trước
4 2
White
4 4
Cũng như hôm bữa ( cách đây có 6 tháng trước chứ nhiêu :smile_cat: ) mình có kể là mình đang ở Mã để làm việc. Bài viết cũ còn đây mời cả nhà vô xe...
Hùng Phạm viết 2 tháng trước
4 4
Bài viết liên quan
White
33 6
Mình có một anh bạn người Pháp tên là Aurelien, anh này có một biệt tài đó là convert được màu RGB sang mã Hex chỉ bằng cách tính nhẩm. Phương phá...
Huy Trần viết 2 năm trước
33 6
White
7 2
CSS Sprites thật ra đã là một cái tên khá cũ rồi và mình viết bài viết này hy vọng nó sẽ hữu ích cho các anh em nào chưa bao giờ biết đến cái tên c...
Hùng Phạm viết 8 tháng trước
7 2
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
14 bài viết.
15 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!