gulp自動生成精靈圖
gulp 是基于 Node.js 的一個前端自動化構建工具，主要用來設定程式自動處理靜態資源的作業，您可以使用它構建自動化作業流程（前端集成開發環境）
精靈圖（sprite）是一種圖片整合技術，將大量的小圖片合成到一張圖片上，然后使用 css 的 background-image 和 background-position 屬性來定位顯示相應的小圖片，從而減少服務器接收和發送請求的次數，提高頁面的加載速度
gulp 中可以使用 gulp.spritesmith 插件完成小圖片合成精靈圖，并自動輸出css樣式檔案
使用 gulp.spritesmith 插件生成精靈圖
首先確保你已經正確安裝了nodejs環境，然后以全域方式安裝gulp環境
npm install -g gulp
然后切換到你的專案檔案夾中，為專案單獨安裝gulp開發依賴
npm install gulp --save-dev
安裝 gulp.spritesmith 插件
npm install gulp.spritesmith
在專案目錄下創建gulp的組態檔gulpfile.js
gulpfile.js:
//引入gulp
const gulp = require("gulp")
//引入gulp.spritesmith
const spritesmith = require("gulp.spritesmith")
//注冊sprite任務
gulp.task("sprite", function(){
return gulp.src("images/*.png"/>
小圖片：
生成的精靈圖：
生成的css樣式：
.icon-icon1 {
width: 78px;
height: 78px;
background: url('sprite.png') no-repeat 0px 0px;
background-size: 238px 238px;
}
.icon-icon2 {
width: 78px;
height: 78px;
background: url('sprite.png') no-repeat -80px 0px;
background-size: 238px 238px;
}
.icon-icon3 {
width: 78px;
height: 78px;
background: url('sprite.png') no-repeat 0px -80px;
background-size: 238px 238px;
}
.icon-icon4 {
width: 78px;
height: 78px;
background: url('sprite.png') no-repeat -80px -80px;
background-size: 238px 238px;
}
.icon-icon5 {
width: 78px;
height: 78px;
background: url('sprite.png') no-repeat -160px 0px;
background-size: 238px 238px;
}
.icon-icon6 {
width: 77px;
height: 77px;
background: url('sprite.png') no-repeat -80px -160px;
background-size: 238px 238px;
}
.icon-icon7 {
width: 78px;
height: 78px;
background: url('sprite.png') no-repeat -160px -80px;
background-size: 238px 238px;
}
.icon-icon8 {
width: 78px;
height: 78px;
background: url('sprite.png') no-repeat 0px -160px;
background-size: 238px 238px;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/173369.html
標籤：其他
下一篇：案例之-塊的作用域