使用 Jimp 代替 lwip

.gitignore

@@ -2,4 +2,5 @@ node_modules/
 .idea/
 *.ipr
 *.iws
-*.iml
+*.iml
+.vscode

lib/sprite.js

@@ -8,7 +8,7 @@ var async = require('async')
 var lodash = require('lodash')
 var imageinfo = require('imageinfo')
 var layout = require('layout')
-var lwip = require('node-lwip')
+var Jimp = require('jimp')
 var fs = require('fs')
 var Color = require('color')
 
@@ -32,13 +32,12 @@ module.exports = function (options) {
 
  if (err) throw err
 
- lwip.open(data, imageinfo(data).format.toLowerCase(), function (err, img) {
-
+ Jimp.read(data, function (err, img) {
  if (!err) {
 
  layer.addItem({
- height: img.height() + meta.margin,
- width: img.width() + meta.margin,
+ height: img.bitmap.height + meta.margin,
+ width: img.bitmap.width + meta.margin,
  meta: lodash.extend({img: img}, meta)
  })
 
@@ -223,18 +222,21 @@ module.exports = function (options) {
 
  if (layerInfo.items.length > 0) {
 
- lwip.create(layerInfo.width, layerInfo.height, opt.color, function (err, image) {
+ new Jimp(layerInfo.width, layerInfo.height, 0xFFFFFF00, function (err, image) {
 
  async.eachSeries(layerInfo.items, function (sprite, callback) {
 
  //图片合并
- image.paste(sprite.x + sprite.meta.margin, sprite.y + sprite.meta.margin, sprite.meta.img, callback)
+ image.composite(sprite.meta.img, sprite.x + sprite.meta.margin, sprite.y + sprite.meta.margin, function () {
+ //CSS替换
+ var code = 'background-image: url("' + opt.spriteOut + cssBaseName + '.png");'
+ code += ' background-position: -' + (sprite.x + sprite.meta.margin) + 'px -' + (sprite.y + sprite.meta.margin) + 'px;'
+
+ cssContent = cssContent.split(sprite.meta.backgroundCodeLine).join(code)
+ callback()
+ });
 
- //CSS替换
- var code = 'background-image: url("' + opt.spriteOut + cssBaseName + '.png");'
- code += ' background-position: -' + (sprite.x + sprite.meta.margin) + 'px -' + (sprite.y + sprite.meta.margin) + 'px;'
 
- cssContent = cssContent.split(sprite.meta.backgroundCodeLine).join(code)
 
  }, function () {
  image1x = image
@@ -262,23 +264,27 @@ module.exports = function (options) {
 
  var retinaCssContent = '\n\n@media only screen and (-webkit-min-device-pixel-ratio: 2),only screen and (min--moz-device-pixel-ratio: 2),only screen and (min-resolution: 240dpi) {'
 
- lwip.create(retinaLayerInfo.width, retinaLayerInfo.height, opt.color, function (err, image) {
+ new Jimp(retinaLayerInfo.width, retinaLayerInfo.height, 0xFFFFFF00, function (err, image) {
 
  async.eachSeries(retinaLayerInfo.items, function (sprite, callback) {
 
  //图片合并
- image.paste(sprite.x + sprite.meta.margin, sprite.y + sprite.meta.margin, sprite.meta.img, callback)
+ image.composite(sprite.meta.img, sprite.x + sprite.meta.margin, sprite.y + sprite.meta.margin, function () {
+ cssContent = cssContent.split(sprite.meta.backgroundCodeLine).join('');
+
+ //添加 media query
+ lodash.each(sprite.meta.className2x, function (item) {
+ retinaCssContent += item
+ retinaCssContent += '{background-image:url("' + opt.spriteOut + cssBaseName + '@2x.png");'
+ retinaCssContent += '-webkit-background-size:' + retinaLayerInfo.width / 2 + 'px;'
+ retinaCssContent += 'background-size:' + retinaLayerInfo.width / 2 + 'px;'
+ retinaCssContent += 'background-position: -' + ((sprite.x + sprite.meta.margin) / 2) + 'px -' + ((sprite.y + sprite.meta.margin) / 2) + 'px;}'
+ })
+
+ callback()
+ })
 
- cssContent = cssContent.split(sprite.meta.backgroundCodeLine).join('');
 
- //添加 media query
- lodash.each(sprite.meta.className2x, function (item) {
- retinaCssContent += item
- retinaCssContent += '{background-image:url("' + opt.spriteOut + cssBaseName + '@2x.png");'
- retinaCssContent += '-webkit-background-size:' + retinaLayerInfo.width / 2 + 'px;'
- retinaCssContent += 'background-size:' + retinaLayerInfo.width / 2 + 'px;'
- retinaCssContent += 'background-position: -' + ((sprite.x + sprite.meta.margin) / 2) + 'px -' + ((sprite.y + sprite.meta.margin) / 2) + 'px;}'
- })
 
  }, function () {
  retinaCssContent += "}"
@@ -317,24 +323,27 @@ module.exports = function (options) {
 
  var retinaCssContent = '\n\n@media only screen and (min-device-width: 414px) and (-webkit-min-device-pixel-ratio: 3) {'
 
- lwip.create(retinaLayerInfo.width, retinaLayerInfo.height, opt.color, function (err, image) {
+ new Jimp(retinaLayerInfo.width, retinaLayerInfo.height, 0xFFFFFF00, function (err, image) {
 
  async.eachSeries(retinaLayerInfo.items, function (sprite, callback) {
 
  //图片合并
- image.paste(sprite.x + sprite.meta.margin, sprite.y + sprite.meta.margin, sprite.meta.img, callback)
-
- cssContent = cssContent.replace(sprite.meta.backgroundCodeLine, '')
-
- //添加 media query
- lodash.each(sprite.meta.className3x, function (item) {
- retinaCssContent += item
- retinaCssContent += '{background-image:url("' + opt.spriteOut + cssBaseName + '@3x.png");'
- retinaCssContent += '-webkit-background-size:' + retinaLayerInfo.width / 3 + 'px;'
- retinaCssContent += 'background-size:' + retinaLayerInfo.width / 3 + 'px;'
- retinaCssContent += 'background-position: -' + ((sprite.x + sprite.meta.margin) / 3) + 'px -' + ((sprite.y + sprite.meta.margin) / 3) + 'px;}'
+ image.composite(sprite.meta.img, sprite.x + sprite.meta.margin, sprite.y + sprite.meta.margin, function () {
+ cssContent = cssContent.replace(sprite.meta.backgroundCodeLine, '')
+
+ //添加 media query
+ lodash.each(sprite.meta.className3x, function (item) {
+ retinaCssContent += item
+ retinaCssContent += '{background-image:url("' + opt.spriteOut + cssBaseName + '@3x.png");'
+ retinaCssContent += '-webkit-background-size:' + retinaLayerInfo.width / 3 + 'px;'
+ retinaCssContent += 'background-size:' + retinaLayerInfo.width / 3 + 'px;'
+ retinaCssContent += 'background-position: -' + ((sprite.x + sprite.meta.margin) / 3) + 'px -' + ((sprite.y + sprite.meta.margin) / 3) + 'px;}'
+ })
+
+ callback()
  })
 
+
  }, function () {
  retinaCssContent += "}"
 
@@ -371,7 +380,7 @@ module.exports = function (options) {
  async.series([
  function (next) {
  if (image1x) {
- image1x.toBuffer('png', {}, function (err, spriteBuffer) {
+ image1x.getBuffer('image/png', function (err, spriteBuffer) {
 
  _this.push(new File({
  base: opt.spriteOut,
@@ -388,7 +397,7 @@ module.exports = function (options) {
 
  function (next) {
  if (image2x) {
- image2x.toBuffer('png', {}, function (err, retinaSpriteBuffer) {
+ image2x.getBuffer('image/png', function (err, retinaSpriteBuffer) {
 
  _this.push(new File({
  base: opt.spriteOut,
@@ -406,7 +415,7 @@ module.exports = function (options) {
 
  function (next) {
  if (image3x) {
- image3x.toBuffer('png', {}, function (err, retinaSpriteBuffer) {
+ image3x.getBuffer('image/png', function (err, retinaSpriteBuffer) {
 
  _this.push(new File({
  base: opt.spriteOut,

package.json

@@ -39,18 +39,19 @@
  "async": "^2.0.0-rc.6",
  "color": "^0.11.3",
  "imageinfo": "^1.0.4",
+ "jimp": "^0.2.28",
  "layout": "~2.2.0",
  "lodash": "^4.13.1",
- "node-lwip": "^0.2.1",
  "through2": "^2.0.1",
  "vinyl": "^1.1.1"
  },
  "devDependencies": {
- "mocha": "^2.1.0",
- "mocha-lcov-reporter": "^0.0.2",
  "coveralls": "^2.11.2",
  "istanbul": "^0.3.7",
- "should": "^5.1.0"
+ "mocha": "^2.1.0",
+ "mocha-lcov-reporter": "^0.0.2",
+ "should": "^5.1.0",
+ "vinyl-fs": "^2.4.4"
  },
  "readmeFilename": "README.md"
 }

test/result/style-willerce.css

@@ -0,0 +1,26 @@
+.icon-excel {
+ background-image: url("../sprite/style-willerce.png"); background-position: -0px -0px;;
+ height: 64px;
+ width: 64px;
+}
+
+.icon-project {
+ background-image: url("../sprite/style-willerce.png"); background-position: -64px -0px;;
+ height: 64px;
+ width: 64px;
+}
+
+.icon-word {
+ background-image: url("../sprite/style-willerce.png"); background-position: -0px -64px;;
+ height: 64px;
+ width: 64px;
+}
+
+.icon-word_2 {
+ background-image: url("../sprite/style-willerce.png"); background-position: -0px -64px;;
+ height: 64px;
+ width: 64px;
+}
+
+
+@media only screen and (-webkit-min-device-pixel-ratio: 2),only screen and (min--moz-device-pixel-ratio: 2),only screen and (min-resolution: 240dpi) {}

test/tmtsprite.js

@@ -5,11 +5,23 @@ var sprite = require('../lib/sprite');
 var path = require('path');
 var vfs = require('vinyl-fs');
 var through2 = require('through2');
-var lwip = require('lwip');
 var noop = function () {
 };
 
 require('mocha');
 
 describe('css-sprite (lib/sprite.js)', function () {
+
+ it('should have a result', function (cb) {
+ this.timeout(10000);
+ var stream = sprite();
+
+
+ vfs.src([path.join(__dirname, './css/style-willerce.css')])
+ .pipe(stream)
+ .pipe(vfs.dest(path.join(__dirname, './result')))
+ .on('end', cb);
+
+ })
+
 });