用 gulp.spritesmith 自動化雪碧圖

一、安裝nodejs之后，要設置兩個環境變量

在 計算機右擊屬性---高級系統設置---高級---環境變量 打開窗口

新建2個環境變量，它們的值分別是nodejs根目錄下的node_modules路徑 及npm的路徑

1.變量：NODE_PATH  值：D:\www\nodejs\node_modules

2.變量：PATH 值：D:\www\nodejs\npm 

 

二、進入images上一層目錄，運行

npm install gulp gulp.spritesmith

三、新建gulpfile.js

var gulp = require('gulp'); var spritesmith = require('gulp.spritesmith'); gulp.task('sprite', function () { var spriteData = gulp.src('images/*.png').pipe(spritesmith({ imgName: 'sprite.png', cssName: 'sprite.css' })); return spriteData.pipe(gulp.dest('output/')); });

四、運行命令，在output文件夾 生成  sprite.png 、sprite.css

gulp sprite