css-spritesmith - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

lib/css-spritesmith.js

@@ -526,4 +526,7 @@ // Deps
             spriteData.imagePath = sliceData.imgDest;
-            retinaSpriteData.imagePath = sliceData.retinaImgDest;
 
+            if(retinaSpriteData) {
+                retinaSpriteData.imagePath = sliceData.retinaImgDest;
+            }
+
             cb(null, {
@@ -530,0 +533,0 @@ cssData: cssData,

package.json

 {
   "name": "css-spritesmith",
   "description": "A plugin to help front engineer creating css sprite.",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "homepage": "https://github.com/laoshu133/css-spritesmith",
@@ -29,3 +29,3 @@ "author": {
   "scripts": {
-    "test": "grunt test"
+    "test": "grunt test && cd test && node test.js"
   },
@@ -32,0 +32,0 @@ "dependencies": {

README.md

@@ -1,4 +0,4 @@
-## grunt-css-sprite
+# css-spritesmith
 
-### 这是什么
+## 这是什么
 
@@ -17,45 +17,109 @@ 这是一个帮助前端开发工程师将 css 代码中的切片合并成雪碧图的工具；
 
+## For Grunt & Gulp
 
-### 配置说明
+[grunt-css-sprite](https://github.com/laoshu133/grunt-css-sprite)
 
-    // 自动雪碧图
-    options: {
-        // css file
-        cssfile: null,
-        // 编码，默认 String|Null default = 'utf8'
-        encoding: null,
-        // sprite背景图源文件夹，只有匹配此路径才会处理，默认 images/slice/
-        imagepath: 'images/slice/',
-        // 映射CSS中背景路径，支持函数和数组，默认为 null
-        imagepath_map: null,
-        // 雪碧图输出目录，注意，会覆盖之前文件！默认 images/
-        spritedest: 'images/',
-        // 替换后的背景路径，默认 ../images/
-        spritepath: '../images/',
-        // 各图片间间距，如果设置为奇数，会强制+1以保证生成的2x图片为偶数宽高，默认 0
-        padding: 0,
-        // 是否使用 image-set 作为2x图片实现，默认不使用
-        useimageset: false,
-        // 是否以时间戳为文件名生成新的雪碧图文件，如果启用请注意清理之前生成的文件，默认不生成新文件
-        newsprite: false,
-        // 给雪碧图追加时间戳，默认不追加
-        spritestamp: false,
-        // 在CSS文件末尾追加时间戳，默认不追加
-        cssstamp: false,
-        // 默认使用二叉树最优排列算法
-        algorithm: 'binary-tree',
-        // 默认使用`pixelsmith`图像处理引擎
-        engine: 'pixelsmith',
+[gulp-css-spritesmith](https://github.com/laoshu133/gulp-css-spritesmith)
 
-        // 扩展参数，不建议修改，image-set 模板，占位文件
-        IMAGE_SET_CSS_TMPL: IMAGE_SET_CSS_TMPL,
 
-        // 扩展参数，不建议修改， 配置模板
-        MEDIA_QUERY_CSS_TMPL: MEDIA_QUERY_CSS_TMPL,
-        CSS_DATA_TMPL: CSS_DATA_TMPL
-    }
+## 基本用法
 
+```
+var cssSpriteSmith = require('css-spritesmith');
 
-### 特别注意
+// use media query
+var timeStamp = +new Date();
+console.log('Start create sprite, with media query');
 
+cssSpriteSmith({
+    cssfile: 'css/icon.css',
+    // sprite背景图源文件夹，只有匹配此路径才会处理，默认 images/slice/
+    imagepath: 'slice/',
+    // 替换后的背景路径，默认 ../images/
+    spritepath: '../images/',
+    // 各图片间间距，如果设置为奇数，会强制+1以保证生成的2x图片为偶数宽高，默认 0
+    padding: 2,
+    // 是否使用 image-set 作为2x图片实现，默认不使用
+    useimageset: false,
+    // 是否以时间戳为文件名生成新的雪碧图文件，如果启用请注意清理之前生成的文件，默认不生成新文件
+    newsprite: false,
+    // 给雪碧图追加时间戳，默认不追加
+    spritestamp: true,
+    // 在CSS文件末尾追加时间戳，默认不追加
+    cssstamp: true,
+    // 默认使用二叉树最优排列算法
+    algorithm: 'binary-tree',
+    // 默认使用`pixelsmith`图像处理引擎
+    engine: 'pixelsmith'
+}, function(err, data) {
+    // write css file
+    var cssFile = 'publish/css/icon.sprite.css';
+    fs.writeFileSync(cssFile, data.cssData);
+    console.log(cssFile, 'write success!');
+
+    // sprite image
+    var srpiteFile = 'publish/images/icon.png';
+    fs.writeFileSync(srpiteFile, data.spriteData.image, {
+        encoding: 'binary'
+    });
+    console.log(srpiteFile, 'write success!');
+
+    // retina sprite image
+    var retinaSrpiteFile = 'publish/images/[e-mail]';
+    fs.writeFileSync(retinaSrpiteFile, data.retinaSpriteData.image, {
+        encoding: 'binary'
+    });
+    console.log(retinaSrpiteFile, 'write success!');
+
+    // timeStamp
+    console.log('Create sprite success, with medai query');
+    console.log('Elapsed ', (+new Date()) - timeStamp, 'ms\n');
+});
+```
+
+
+## 配置说明
+
+```
+// 自动雪碧图
+options: {
+    // css file
+    cssfile: null,
+    // 编码，默认 String|Null default = 'utf8'
+    encoding: null,
+    // sprite背景图源文件夹，只有匹配此路径才会处理，默认 images/slice/
+    imagepath: 'images/slice/',
+    // 映射CSS中背景路径，支持函数和数组，默认为 null
+    imagepath_map: null,
+    // 雪碧图输出目录，注意，会覆盖之前文件！默认 images/
+    spritedest: 'images/',
+    // 替换后的背景路径，默认 ../images/
+    spritepath: '../images/',
+    // 各图片间间距，如果设置为奇数，会强制+1以保证生成的2x图片为偶数宽高，默认 0
+    padding: 0,
+    // 是否使用 image-set 作为2x图片实现，默认不使用
+    useimageset: false,
+    // 是否以时间戳为文件名生成新的雪碧图文件，如果启用请注意清理之前生成的文件，默认不生成新文件
+    newsprite: false,
+    // 给雪碧图追加时间戳，默认不追加
+    spritestamp: false,
+    // 在CSS文件末尾追加时间戳，默认不追加
+    cssstamp: false,
+    // 默认使用二叉树最优排列算法
+    algorithm: 'binary-tree',
+    // 默认使用`pixelsmith`图像处理引擎
+    engine: 'pixelsmith',
+
+    // 扩展参数，不建议修改，image-set 模板，占位文件
+    IMAGE_SET_CSS_TMPL: IMAGE_SET_CSS_TMPL,
+
+    // 扩展参数，不建议修改， 配置模板
+    MEDIA_QUERY_CSS_TMPL: MEDIA_QUERY_CSS_TMPL,
+    CSS_DATA_TMPL: CSS_DATA_TMPL
+}
+```
+
+
+## 特别注意
+
 1. 生成后的雪碧图将以源 css 文件名来命名
@@ -67,7 +131,7 @@ 2. 仅当CSS中定义`url(xxxx)`的路径匹配参数`imagepath`才进行处理，和具体`background`，`background-image`CSS无关，这里有区别于`grunt-sprite`
 
-### 可选依赖
+## 可选依赖
 
-`grunt-css-sprite` 使用 [spritesmith](https://github.com/Ensighten/spritesmith) 作为内部核心实现
+`gulp-css-spritesmith` 使用 [spritesmith](https://github.com/Ensighten/spritesmith) 作为内部核心实现
 
-经 [Mark](https://github.com/jsmarkus) 提醒，之前对于`gm` 的依赖纯属多余；如果你需要将图片处理引擎切换为`gm`或者其他引擎，请手动安装对应的依赖包。
+如果需要将图片处理引擎切换为`gm`或者其他引擎，请手动安装对应的依赖包。
 举例 [Graphics Magick(gm)](http://www.graphicsmagick.org/) 依赖的安装流程：
@@ -91,3 +155,3 @@
 
-### 版本记录
+## 版本记录
 
@@ -97,3 +161,3 @@ `0.0.1` 从 `grunt-css-sprite` 分离，为支持 `gulp` 做准备
 
-### 致谢
+## 致谢
 
@@ -100,0 +164,0 @@ 感谢 [spritesmith](https://github.com/Ensighten/spritesmith)

No alert changes

Improved metrics

Total package byte prevSize

113070

increased by1.73%

Lines of code

839

increased by0.24%

Number of lines in readme file

163

increased by64.65%

No dependency changes