suyi91
9/29/2017 - 3:42 PM

gulp.spritesmith demo

gulp.spritesmith demo

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="dist/sprite/sprite-test.css">
</head>
<body style="background: lightgreen">
  <div class="icon-guideH3"></div>
  <div class="icon-man"></div>
  <div class="icon-moreIcon"></div>
  <div class="icon-logowxb"></div>
  <div class="icon-logo"></div>
  <div class="icon-lexus"></div>
</body>
</html>
gulpfile.js
content_copyfile_download
var gulp = require('gulp');
var buffer = require('vinyl-buffer');
var csso = require('gulp-csso');
var imagemin = require('gulp-imagemin');
var merge = require('merge-stream');

var spritesmith = require('gulp.spritesmith');

gulp.task('sprite-test', function () {
  // Generate our spritesheet
  var spriteData = gulp.src('image/test/*.png').pipe(spritesmith({
    imgName: 'sprite-test.png',
    cssName: 'sprite-test.css'
  }));

  // Pipe image stream through image optimizer and onto disk
  var imgStream = spriteData.img
    // DEV: We must buffer our stream into a Buffer for `imagemin`
    .pipe(buffer())
    .pipe(imagemin())
    .pipe(gulp.dest('dist/sprite'));

  // Pipe CSS stream through CSS optimizer and onto disk
  var cssStream = spriteData.css
    .pipe(csso())
    .pipe(gulp.dest('dist/sprite'));

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

gulp.task('default', ['sprite-test']);