diff --git a/.travis.yml b/.travis.yml index ae99d9c..ecc4978 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,4 +1,5 @@ language: node_js node_js: - - "stable" + - "8" + - "6" - "4" diff --git a/README.md b/README.md index 2c4d38a..4399164 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,12 @@ A wrapper for [gulp.spritesmith](https://github.com/twolfson/gulp.spritesmith) to generate multiple sprites and stylesheets. +## Breaking changes in 4.0.0 + +We have changed the parameter passed to the function [`to(iconFile)`](#toiconfile) from a file path string to a [Vinyl file object](https://gulpjs.com/docs/en/api/vinyl/). + +This allows users to obtain more useful information about the files consumed by `gulp.src()` and this plugin. + ## Example ```javascript @@ -120,8 +126,9 @@ gulp.task('sprite', ['clean'], function () { // Generate our spritesheet var spriteData = gulp.src('default/**/*.png') .pipe(spritesmith({ - spritesmith: function (options) { - options.imgPath = '../images/' + options.imgName + spritesmith: function (options, sprite, icons) { + options.cssName = 'sprites/_' + sprite + ".scss"; + options.imgPath = '../images/' + options.imgName; } })) @@ -151,6 +158,10 @@ Type: `Function`, `String` If `String`, you just get one sprite. +If `Function`, +it receives each icon file (vinyl file object). +You should return a string as its name. See [Split sprites support](#split-sprites-support). + By default, icons are grouped by their directory names. @@ -174,8 +185,7 @@ var options = { You can override them through this option. If `Function`, -it receives the default options, -the sprite name specified by `options.to` +it receives the default options and sprite, sprite-name and the related icon files (vinyl file objects). Modify the options object passed in, or return a new one. @@ -441,6 +451,133 @@ hover.css Though there are default `width` and `height` in the CSS rules, you can override them and the background image will be resized automatically. +## Split sprites support + +You can generate split sprites like the `split` option in [sprity/sprity § How to use split option](https://github.com/sprity/sprity#how-to-use-split-option): + +```javascript +gulp.task('split', ['clean'], function () { + var opts = { + to: function (file) { + return path.dirname(file.relative) + .replace(/[\/\\ ]/g, '-') + }, + } + return gulp.src('split/**/*.png') + .pipe(spritesmith(opts)) + .pipe(gulp.dest('build')) +}) +``` + +input: + +``` +⌘ tree split +split +├── new +│ ├── hover +│ │ ├── sprite1@2x.png +│ │ ├── sprite1--hover@2x.png +│ │ ├── sprite1--hover.png +│ │ ├── sprite1.png +│ │ ├── sprite2@2x.png +│ │ ├── sprite2.png +│ │ ├── sprite3@2x.png +│ │ └── sprite3.png +│ ├── normal +│ │ ├── sprite1.png +│ │ ├── sprite2.png +│ │ └── sprite3.png +│ └── retina +│ ├── sprite1@2x.png +│ ├── sprite1.png +│ ├── sprite2@2x.png +│ ├── sprite2.png +│ ├── sprite3@2x.png +│ └── sprite3.png +└── old + ├── hover + │ ├── sprite1@2x.png + │ ├── sprite1--hover@2x.png + │ ├── sprite1--hover.png + │ ├── sprite1.png + │ ├── sprite2@2x.png + │ ├── sprite2.png + │ ├── sprite3@2x.png + │ └── sprite3.png + ├── normal + │ ├── sprite1.png + │ ├── sprite2.png + │ └── sprite3.png + └── retina + ├── sprite1@2x.png + ├── sprite1.png + ├── sprite2@2x.png + ├── sprite2.png + ├── sprite3@2x.png + └── sprite3.png +``` + +output: + +``` +⌘ tree build/ +build +├── new-hover@2x.png +├── new-hover.css +├── new-hover.png +├── new-normal.css +├── new-normal.png +├── new-retina@2x.png +├── new-retina.css +├── new-retina.png +├── old-hover@2x.png +├── old-hover.css +├── old-hover.png +├── old-normal.css +├── old-normal.png +├── old-retina@2x.png +├── old-retina.css +└── old-retina.png +``` + +new-hover.css + +```css +.sp-new-hover { + background-image: url(new-hover.png); +} + +@media (-webkit-min-device-pixel-ratio: 2), + (min-resolution: 192dpi) { + .sp-new-hover { + background-image: url(new-hover@2x.png); + background-size: 150px 200px; + } +} + +.sp-new-hover__sprite1:hover { + background-position: -100px 0px; + width: 50px; + height: 50px; +} +.sp-new-hover__sprite1 { + background-position: -100px -50px; + width: 50px; + height: 50px; +} +.sp-new-hover__sprite2 { + background-position: -100px -100px; + width: 50px; + height: 50px; +} +.sp-new-hover__sprite3 { + background-position: 0px 0px; + width: 100px; + height: 200px; +} +``` + ## Utils ### exports.util diff --git a/index.js b/index.js index 93a164e..b86e181 100644 --- a/index.js +++ b/index.js @@ -28,12 +28,12 @@ function gulpSpritesmith(opts) { return opts.to(file) } return path.basename( - path.dirname(file) + path.dirname(file.path) ) } function write(file, _, next) { - var sprite = to(file.path) + var sprite = to(file) groups[sprite] = groups[sprite] || [] groups[sprite].push(file) next() diff --git a/package.json b/package.json index d0bf24c..cff5f54 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gulp.spritesmith-multi", - "version": "3.1.0", + "version": "4.0.0", "description": "A wrapper for gulp.spritesmith to generate multiple sprites and stylesheets", "main": "index.js", "dependencies": { diff --git a/test/fixtures/expected/split/new-hover.css b/test/fixtures/expected/split/new-hover.css new file mode 100644 index 0000000..275757d --- /dev/null +++ b/test/fixtures/expected/split/new-hover.css @@ -0,0 +1,32 @@ +.sp-new-hover { + background-image: url(new-hover.png); +} + +@media (-webkit-min-device-pixel-ratio: 2), + (min-resolution: 192dpi) { + .sp-new-hover { + background-image: url(new-hover@2x.png); + background-size: 150px 200px; + } +} + +.sp-new-hover__sprite1:hover { + background-position: -100px 0px; + width: 50px; + height: 50px; +} +.sp-new-hover__sprite1 { + background-position: -100px -50px; + width: 50px; + height: 50px; +} +.sp-new-hover__sprite2 { + background-position: -100px -100px; + width: 50px; + height: 50px; +} +.sp-new-hover__sprite3 { + background-position: 0px 0px; + width: 100px; + height: 200px; +} diff --git a/test/fixtures/expected/split/new-hover.png b/test/fixtures/expected/split/new-hover.png new file mode 100644 index 0000000..0b4a34f Binary files /dev/null and b/test/fixtures/expected/split/new-hover.png differ diff --git a/test/fixtures/expected/split/new-hover@2x.png b/test/fixtures/expected/split/new-hover@2x.png new file mode 100644 index 0000000..0228498 Binary files /dev/null and b/test/fixtures/expected/split/new-hover@2x.png differ diff --git a/test/fixtures/expected/split/new-normal.css b/test/fixtures/expected/split/new-normal.css new file mode 100644 index 0000000..b23eeb5 --- /dev/null +++ b/test/fixtures/expected/split/new-normal.css @@ -0,0 +1,20 @@ +.sp-new-normal { + background-image: url(new-normal.png); +} + + +.sp-new-normal__sprite1 { + background-position: -100px 0px; + width: 50px; + height: 50px; +} +.sp-new-normal__sprite2 { + background-position: -100px -50px; + width: 50px; + height: 50px; +} +.sp-new-normal__sprite3 { + background-position: 0px 0px; + width: 100px; + height: 200px; +} diff --git a/test/fixtures/expected/split/new-normal.png b/test/fixtures/expected/split/new-normal.png new file mode 100644 index 0000000..77b6a2c Binary files /dev/null and b/test/fixtures/expected/split/new-normal.png differ diff --git a/test/fixtures/expected/split/new-retina.css b/test/fixtures/expected/split/new-retina.css new file mode 100644 index 0000000..e5215c5 --- /dev/null +++ b/test/fixtures/expected/split/new-retina.css @@ -0,0 +1,27 @@ +.sp-new-retina { + background-image: url(new-retina.png); +} + +@media (-webkit-min-device-pixel-ratio: 2), + (min-resolution: 192dpi) { + .sp-new-retina { + background-image: url(new-retina@2x.png); + background-size: 150px 200px; + } +} + +.sp-new-retina__sprite1 { + background-position: -100px 0px; + width: 50px; + height: 50px; +} +.sp-new-retina__sprite2 { + background-position: -100px -50px; + width: 50px; + height: 50px; +} +.sp-new-retina__sprite3 { + background-position: 0px 0px; + width: 100px; + height: 200px; +} diff --git a/test/fixtures/expected/split/new-retina.png b/test/fixtures/expected/split/new-retina.png new file mode 100644 index 0000000..77b6a2c Binary files /dev/null and b/test/fixtures/expected/split/new-retina.png differ diff --git a/test/fixtures/expected/split/new-retina@2x.png b/test/fixtures/expected/split/new-retina@2x.png new file mode 100644 index 0000000..e1fe0f8 Binary files /dev/null and b/test/fixtures/expected/split/new-retina@2x.png differ diff --git a/test/fixtures/expected/split/old-hover.css b/test/fixtures/expected/split/old-hover.css new file mode 100644 index 0000000..2c4c4bd --- /dev/null +++ b/test/fixtures/expected/split/old-hover.css @@ -0,0 +1,32 @@ +.sp-old-hover { + background-image: url(old-hover.png); +} + +@media (-webkit-min-device-pixel-ratio: 2), + (min-resolution: 192dpi) { + .sp-old-hover { + background-image: url(old-hover@2x.png); + background-size: 150px 200px; + } +} + +.sp-old-hover__sprite1:hover { + background-position: -100px 0px; + width: 50px; + height: 50px; +} +.sp-old-hover__sprite1 { + background-position: -100px -50px; + width: 50px; + height: 50px; +} +.sp-old-hover__sprite2 { + background-position: -100px -100px; + width: 50px; + height: 50px; +} +.sp-old-hover__sprite3 { + background-position: 0px 0px; + width: 100px; + height: 200px; +} diff --git a/test/fixtures/expected/split/old-hover.png b/test/fixtures/expected/split/old-hover.png new file mode 100644 index 0000000..0b4a34f Binary files /dev/null and b/test/fixtures/expected/split/old-hover.png differ diff --git a/test/fixtures/expected/split/old-hover@2x.png b/test/fixtures/expected/split/old-hover@2x.png new file mode 100644 index 0000000..0228498 Binary files /dev/null and b/test/fixtures/expected/split/old-hover@2x.png differ diff --git a/test/fixtures/expected/split/old-normal.css b/test/fixtures/expected/split/old-normal.css new file mode 100644 index 0000000..831507f --- /dev/null +++ b/test/fixtures/expected/split/old-normal.css @@ -0,0 +1,20 @@ +.sp-old-normal { + background-image: url(old-normal.png); +} + + +.sp-old-normal__sprite1 { + background-position: -100px 0px; + width: 50px; + height: 50px; +} +.sp-old-normal__sprite2 { + background-position: -100px -50px; + width: 50px; + height: 50px; +} +.sp-old-normal__sprite3 { + background-position: 0px 0px; + width: 100px; + height: 200px; +} diff --git a/test/fixtures/expected/split/old-normal.png b/test/fixtures/expected/split/old-normal.png new file mode 100644 index 0000000..77b6a2c Binary files /dev/null and b/test/fixtures/expected/split/old-normal.png differ diff --git a/test/fixtures/expected/split/old-retina.css b/test/fixtures/expected/split/old-retina.css new file mode 100644 index 0000000..8021794 --- /dev/null +++ b/test/fixtures/expected/split/old-retina.css @@ -0,0 +1,27 @@ +.sp-old-retina { + background-image: url(old-retina.png); +} + +@media (-webkit-min-device-pixel-ratio: 2), + (min-resolution: 192dpi) { + .sp-old-retina { + background-image: url(old-retina@2x.png); + background-size: 150px 200px; + } +} + +.sp-old-retina__sprite1 { + background-position: -100px 0px; + width: 50px; + height: 50px; +} +.sp-old-retina__sprite2 { + background-position: -100px -50px; + width: 50px; + height: 50px; +} +.sp-old-retina__sprite3 { + background-position: 0px 0px; + width: 100px; + height: 200px; +} diff --git a/test/fixtures/expected/split/old-retina.png b/test/fixtures/expected/split/old-retina.png new file mode 100644 index 0000000..77b6a2c Binary files /dev/null and b/test/fixtures/expected/split/old-retina.png differ diff --git a/test/fixtures/expected/split/old-retina@2x.png b/test/fixtures/expected/split/old-retina@2x.png new file mode 100644 index 0000000..e1fe0f8 Binary files /dev/null and b/test/fixtures/expected/split/old-retina@2x.png differ diff --git a/test/fixtures/src/split/new/hover/sprite1--hover.png b/test/fixtures/src/split/new/hover/sprite1--hover.png new file mode 100644 index 0000000..8d75cb8 Binary files /dev/null and b/test/fixtures/src/split/new/hover/sprite1--hover.png differ diff --git a/test/fixtures/src/split/new/hover/sprite1--hover@2x.png b/test/fixtures/src/split/new/hover/sprite1--hover@2x.png new file mode 100644 index 0000000..f460261 Binary files /dev/null and b/test/fixtures/src/split/new/hover/sprite1--hover@2x.png differ diff --git a/test/fixtures/src/split/new/hover/sprite1.png b/test/fixtures/src/split/new/hover/sprite1.png new file mode 100644 index 0000000..843083d Binary files /dev/null and b/test/fixtures/src/split/new/hover/sprite1.png differ diff --git a/test/fixtures/src/split/new/hover/sprite1@2x.png b/test/fixtures/src/split/new/hover/sprite1@2x.png new file mode 100644 index 0000000..33377ba Binary files /dev/null and b/test/fixtures/src/split/new/hover/sprite1@2x.png differ diff --git a/test/fixtures/src/split/new/hover/sprite2.png b/test/fixtures/src/split/new/hover/sprite2.png new file mode 100644 index 0000000..8d75cb8 Binary files /dev/null and b/test/fixtures/src/split/new/hover/sprite2.png differ diff --git a/test/fixtures/src/split/new/hover/sprite2@2x.png b/test/fixtures/src/split/new/hover/sprite2@2x.png new file mode 100644 index 0000000..f460261 Binary files /dev/null and b/test/fixtures/src/split/new/hover/sprite2@2x.png differ diff --git a/test/fixtures/src/split/new/hover/sprite3.png b/test/fixtures/src/split/new/hover/sprite3.png new file mode 100644 index 0000000..12175e1 Binary files /dev/null and b/test/fixtures/src/split/new/hover/sprite3.png differ diff --git a/test/fixtures/src/split/new/hover/sprite3@2x.png b/test/fixtures/src/split/new/hover/sprite3@2x.png new file mode 100644 index 0000000..f7f0bdd Binary files /dev/null and b/test/fixtures/src/split/new/hover/sprite3@2x.png differ diff --git a/test/fixtures/src/split/new/normal/sprite1.png b/test/fixtures/src/split/new/normal/sprite1.png new file mode 100644 index 0000000..843083d Binary files /dev/null and b/test/fixtures/src/split/new/normal/sprite1.png differ diff --git a/test/fixtures/src/split/new/normal/sprite2.png b/test/fixtures/src/split/new/normal/sprite2.png new file mode 100644 index 0000000..8d75cb8 Binary files /dev/null and b/test/fixtures/src/split/new/normal/sprite2.png differ diff --git a/test/fixtures/src/split/new/normal/sprite3.png b/test/fixtures/src/split/new/normal/sprite3.png new file mode 100644 index 0000000..12175e1 Binary files /dev/null and b/test/fixtures/src/split/new/normal/sprite3.png differ diff --git a/test/fixtures/src/split/new/retina/sprite1.png b/test/fixtures/src/split/new/retina/sprite1.png new file mode 100644 index 0000000..843083d Binary files /dev/null and b/test/fixtures/src/split/new/retina/sprite1.png differ diff --git a/test/fixtures/src/split/new/retina/sprite1@2x.png b/test/fixtures/src/split/new/retina/sprite1@2x.png new file mode 100644 index 0000000..33377ba Binary files /dev/null and b/test/fixtures/src/split/new/retina/sprite1@2x.png differ diff --git a/test/fixtures/src/split/new/retina/sprite2.png b/test/fixtures/src/split/new/retina/sprite2.png new file mode 100644 index 0000000..8d75cb8 Binary files /dev/null and b/test/fixtures/src/split/new/retina/sprite2.png differ diff --git a/test/fixtures/src/split/new/retina/sprite2@2x.png b/test/fixtures/src/split/new/retina/sprite2@2x.png new file mode 100644 index 0000000..f460261 Binary files /dev/null and b/test/fixtures/src/split/new/retina/sprite2@2x.png differ diff --git a/test/fixtures/src/split/new/retina/sprite3.png b/test/fixtures/src/split/new/retina/sprite3.png new file mode 100644 index 0000000..12175e1 Binary files /dev/null and b/test/fixtures/src/split/new/retina/sprite3.png differ diff --git a/test/fixtures/src/split/new/retina/sprite3@2x.png b/test/fixtures/src/split/new/retina/sprite3@2x.png new file mode 100644 index 0000000..f7f0bdd Binary files /dev/null and b/test/fixtures/src/split/new/retina/sprite3@2x.png differ diff --git a/test/fixtures/src/split/old/hover/sprite1--hover.png b/test/fixtures/src/split/old/hover/sprite1--hover.png new file mode 100644 index 0000000..8d75cb8 Binary files /dev/null and b/test/fixtures/src/split/old/hover/sprite1--hover.png differ diff --git a/test/fixtures/src/split/old/hover/sprite1--hover@2x.png b/test/fixtures/src/split/old/hover/sprite1--hover@2x.png new file mode 100644 index 0000000..f460261 Binary files /dev/null and b/test/fixtures/src/split/old/hover/sprite1--hover@2x.png differ diff --git a/test/fixtures/src/split/old/hover/sprite1.png b/test/fixtures/src/split/old/hover/sprite1.png new file mode 100644 index 0000000..843083d Binary files /dev/null and b/test/fixtures/src/split/old/hover/sprite1.png differ diff --git a/test/fixtures/src/split/old/hover/sprite1@2x.png b/test/fixtures/src/split/old/hover/sprite1@2x.png new file mode 100644 index 0000000..33377ba Binary files /dev/null and b/test/fixtures/src/split/old/hover/sprite1@2x.png differ diff --git a/test/fixtures/src/split/old/hover/sprite2.png b/test/fixtures/src/split/old/hover/sprite2.png new file mode 100644 index 0000000..8d75cb8 Binary files /dev/null and b/test/fixtures/src/split/old/hover/sprite2.png differ diff --git a/test/fixtures/src/split/old/hover/sprite2@2x.png b/test/fixtures/src/split/old/hover/sprite2@2x.png new file mode 100644 index 0000000..f460261 Binary files /dev/null and b/test/fixtures/src/split/old/hover/sprite2@2x.png differ diff --git a/test/fixtures/src/split/old/hover/sprite3.png b/test/fixtures/src/split/old/hover/sprite3.png new file mode 100644 index 0000000..12175e1 Binary files /dev/null and b/test/fixtures/src/split/old/hover/sprite3.png differ diff --git a/test/fixtures/src/split/old/hover/sprite3@2x.png b/test/fixtures/src/split/old/hover/sprite3@2x.png new file mode 100644 index 0000000..f7f0bdd Binary files /dev/null and b/test/fixtures/src/split/old/hover/sprite3@2x.png differ diff --git a/test/fixtures/src/split/old/normal/sprite1.png b/test/fixtures/src/split/old/normal/sprite1.png new file mode 100644 index 0000000..843083d Binary files /dev/null and b/test/fixtures/src/split/old/normal/sprite1.png differ diff --git a/test/fixtures/src/split/old/normal/sprite2.png b/test/fixtures/src/split/old/normal/sprite2.png new file mode 100644 index 0000000..8d75cb8 Binary files /dev/null and b/test/fixtures/src/split/old/normal/sprite2.png differ diff --git a/test/fixtures/src/split/old/normal/sprite3.png b/test/fixtures/src/split/old/normal/sprite3.png new file mode 100644 index 0000000..12175e1 Binary files /dev/null and b/test/fixtures/src/split/old/normal/sprite3.png differ diff --git a/test/fixtures/src/split/old/retina/sprite1.png b/test/fixtures/src/split/old/retina/sprite1.png new file mode 100644 index 0000000..843083d Binary files /dev/null and b/test/fixtures/src/split/old/retina/sprite1.png differ diff --git a/test/fixtures/src/split/old/retina/sprite1@2x.png b/test/fixtures/src/split/old/retina/sprite1@2x.png new file mode 100644 index 0000000..33377ba Binary files /dev/null and b/test/fixtures/src/split/old/retina/sprite1@2x.png differ diff --git a/test/fixtures/src/split/old/retina/sprite2.png b/test/fixtures/src/split/old/retina/sprite2.png new file mode 100644 index 0000000..8d75cb8 Binary files /dev/null and b/test/fixtures/src/split/old/retina/sprite2.png differ diff --git a/test/fixtures/src/split/old/retina/sprite2@2x.png b/test/fixtures/src/split/old/retina/sprite2@2x.png new file mode 100644 index 0000000..f460261 Binary files /dev/null and b/test/fixtures/src/split/old/retina/sprite2@2x.png differ diff --git a/test/fixtures/src/split/old/retina/sprite3.png b/test/fixtures/src/split/old/retina/sprite3.png new file mode 100644 index 0000000..12175e1 Binary files /dev/null and b/test/fixtures/src/split/old/retina/sprite3.png differ diff --git a/test/fixtures/src/split/old/retina/sprite3@2x.png b/test/fixtures/src/split/old/retina/sprite3@2x.png new file mode 100644 index 0000000..f7f0bdd Binary files /dev/null and b/test/fixtures/src/split/old/retina/sprite3@2x.png differ diff --git a/test/index.js b/test/index.js index d0d3412..6b6cba5 100644 --- a/test/index.js +++ b/test/index.js @@ -30,6 +30,16 @@ test( }) ) +test( + 'split', + runTest.bind(null, 'split', { + to: function (file) { + return path.dirname(file.relative) + .replace(/[\/\\ ]/g, '-') + }, + }) +) + test( 'custom-template', runTest.bind(null, 'custom-template', {