安装gulp-gm(用于裁剪):
npm install --save-dev gulp-gm
gulp-gm与GraphicsMagick配合得最好。但是,它也支持ImageMagick,但是需要设置ImageMagick:true选项。
注意:确保GraphicsMagick或ImageMagick已安装在系统上,并在路径中正确设置。
Mac安装GraphicsMagick和ImageMagick:
brew install imagemagick
brew install graphicsmagick
通过在终端中执行gm-version或convert-version,确认GraphicsMagick或ImageMagick设置正确。
使用示例:
var gulp = require('gulp');
// var less = require('gulp-less');
var spritesmith = require('gulp.spritesmith');
var gm = require('gulp-gm');
// 雪碧图缩放
gulp.task('emotion-resize', function (cb) {
return gulp.src('./src/ui/img/emotions/*.png')
.pipe(gm(function (gmfile) {
return gmfile.resize(30, 30);
}))
.pipe(gulp.dest('./src/ui/img/emotions/resize'));
//cb();
});
// 合成
gulp.task('emotion-sprite', ['emotion-resize'], function () {
var spriteData = gulp.src('./src/ui/img/emotions/resize/*.png').pipe(spritesmith({
imgName: 'emotion.png', //合成后的图片命名
cssName: 'emotion.less', //合成后的图片样式
// cssName: 'emotion.css',
imgPath: `${img_folder_template}/emotion.png`,
algorithm: 'top-down', //分为top-down、left-right、diagonal、alt-diagonal、binary-tree
cssOpts: {
cssSelector: function (sprite) {
return '.im-emotion-' + sprite.name; //样式类命名
}
}
}));
var imgStream = spriteData.img.pipe(gulp.dest('./src/ui/img/sprite'));
var styleStream = spriteData.css.pipe(gulp.dest('./src/ui/style'));
return merge(imgStream, styleStream);
});
// 删除
gulp.task('emotion-clean', ['emotion-resize','emotion-sprite'], function (cb) {
rmdir('./src/ui/img/emotions/resize', function (err, dirs, files) {
cb();
});
});
gulp.task('emotion', ['emotion-resize','emotion-sprite', 'emotion-clean'], function () {
});
package.json设置:
"scripts": {
"emotion": "gulp emotion"
}
执行: npm run emotion