把所有的小圖標一起做成雪碧圖吧 請用gulp-css-spriter.
阿新 • • 發佈：2018-09-06
font 之前 key tle 簡單 mono padding number ont
用gulp-css-spriter很簡單。
第一步: 在某個文件夾用shitf+鼠標右鍵
第二步: npm install gulp-css-spriter
https://www.npmjs.com/package/gulp-css-spriter (官網gulp插件)
第三步:在gulpfile.js 文件
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var gulp = require(‘gulp‘);
var spriter = require(‘gulp-css-spriter‘);gulp.task(‘css‘, function() {
return gulp.src(‘./css/recharge.css‘)//比如recharge.css這個樣式裏面什麽都不用改，是你想要合並的圖就要引用這個樣式。 很重要 註意(recharge.css)這個是我的項目。別傻到家抄我一樣的。
.pipe(spriter({
// The path and file name of where we will save the sprite sheet
‘spriteSheet‘: ‘./dist/images/spritesheet.png‘, //這是雪碧圖自動合成的圖。 很重要
// Because we don‘t know where you will end up saving the CSS file at this point in the pipe,
// we need a litle help identifying where it will be.
‘pathToSpriteSheetFromCSS‘: ‘../images/spritesheet.png‘ //這是在css引用的圖片路徑，很重要
}))
.pipe(gulp.dest(‘./dist/css‘)); //最後生成出來
});
|
第四步：打開生成的dist/css
這是合並之後的雪碧圖
這是之前的所有圖。 被我用並成上上面的雪碧圖。很爽吧？
再看看生成後的css， 突然多出了什麽。請看我紅標註。多了定位。之前是沒有這個定位。
註（ 使用gulp-css-spriter之前要安裝node.js和gulp工具)
把所有的小圖標一起做成雪碧圖吧 請用gulp-css-spriter.