把全部的小圖標一塊兒作成雪碧圖吧請用gulp-css-spriter.

時間 2019-11-11

標籤全部圖標一塊兒作成雪碧請用 gulp css spriter 欄目 JavaScript 简体版

原文原文鏈接

用gulp-css-spriter很簡單。css

第一步: 在某個文件夾用shitf+鼠標右鍵html

第二步: npm install gulp-css-spriternode

https://www.npmjs.com/package/gulp-css-spriter (官網gulp插件)npm

第三步:在gulpfile.js 文件 gulp

 
         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' 
         ));  
         //最後生成出來 
        
         });