用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工具)