Can not be like this

[guohuihot]

I use a custom template engine，I just need sprites data

[twolfson]

Sprite data can be exported as a JSON string via the json and json_array templates. To pipe that to another item, you can use:

gulp.task('sprite', function () {
  // Generate our spritesheet with JSON string output for CSS
  var spriteData = gulp.src('images/*.png').pipe(spritesmith({
    imgName: 'sprite.png',
    cssName: 'sprite.json'
  }));

  // Pipe image stream to disk
  var imgStream = spriteData.img.pipe(gulp.dest('path/to/image/folder/'));

  // Pipe JSON information to template
  var cssStream = spriteData.css
    .pipe($.template())
    .pipe(gulp.dest('path/to/css/folder/'));

  // Return a merged stream to handle both `end` events
  return merge(imgStream, cssStream);
});

Another option is to pass a template function to spritesmith directly:

https://github.com/twolfson/gulp.spritesmith/tree/6.0.0#templating

https://github.com/twolfson/gulp.spritesmith/tree/6.0.0#template-function

[guohuihot]

Well, thank you, I try

[guohuihot]

How can I get the CSS format of the JSON data, and now it's not.

[twolfson]

When we update the extension for cssName, spritesmith automatically detects what format to use (e.g. sprite.scss will generate SCSS, sprite.json will generate JSON). This can be overridden by cssFormat as well.

Can you paste your entire gulpfile.js so I can get a better idea of what you are trying to accomplish?

[guohuihot]

I am not very familiar with the syntax of the default template engine, I want to use gulp-template the plug in the template engine, so I need to spritedata.css data

[twolfson]

spriteData.css is a stream that outputs a data event containing a JSON string. You can use gulp-data and concat-stream to handle that but the code starts to become very confusing:

return gulp.src('./gulp/css/fonts1.scss')
  .pipe(data(function (file, cb) {
    spriteData.css.pipe(concat(function (jsonArr) {
      cb(JSON.parse(jsonArr[0]));
    }));
  })
  .pipe($.template())
  .pipe(gulp.dest('path/to/css/folder/'));

Instead of that, I suggest:

• Using the built-in Handlebars templating system in gulp.spritesmith
  • http://handlebarsjs.com/
  • https://github.com/twolfson/gulp.spritesmith/tree/6.0.0#templating
  • https://github.com/twolfson/gulp.spritesmith/tree/6.0.0#handlebars-template
• Passing a lodash compiled template to gulp.spritesmith
  • Same templating system as gulp-template
  • https://www.npmjs.com/package/lodash.template
  • https://lodash.com/docs#template
• Move off of gulp.spritesmith and using lower level spritesmith
  • https://github.com/Ensighten/spritesmith