快速獲取雪碧圖的圖標樣式插件 - gulp-css-spriter教程

如何快速把合成好的雪碧圖，快速獲取圖標的樣式呢？

用gulp-css-spriter很簡單。

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

第二步: npm install gulp-css-spriter

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

第三步:在gulpfile.js 文件

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工具。