Home  >  Article  >  Web Front-end  >  Gulp command to generate sprite map

Gulp command to generate sprite map

php中世界最好的语言
php中世界最好的语言Original
2018-03-19 10:10:012325browse

This time I will bring you the Gulp command to generate a sprite map. What are the precautions for generating a sprite map using the Gulp command? The following is a practical case, let's take a look.

File directory description

##gulpfile.js code

var gulp = require('gulp');var spritesmith = require('gulp.spritesmith');var imagemin = require('gulp-imagemin');var runSequence = require('run-sequence');var open = require('gulp-open');var configs = {    //修改图片位置
    spritesSource: 'img/*.png',
    spritesMithConfig: {
        imgName: 'icons.png',
        cssName: 'icons.css',
        algorithm: 'binary-tree',
        padding: 6,
        cssVarMap: function(sprite) {
            sprite.name = sprite.name
        }
    },
    spritesOutputPath: 'output/'}//总命令gulp.task('sprite', function(callback) {
  runSequence(    'sprite:build', 
    'sprite:images',
    callback
  )
});
gulp.task('sprite:build', function () {  var spriteData = gulp.src(configs.spritesSource).pipe(spritesmith(configs.spritesMithConfig));  return spriteData.pipe(gulp.dest(configs.spritesOutputPath));
});//压缩gulp.task('sprite:images', function() {  return gulp.src(configs.spritesOutputPath + '/**/*.+(png|jpg|jpeg|gif|svg)')  // Caching images that ran through imagemin  .pipe(imagemin({
      interlaced: true,
    }))
  .pipe(gulp.dest(configs.spritesOutputPath))
});

Generated sprite map and css

When the sprite map is generated, a css class name with the same name as the original image will also be generated, making it more convenient to use.

.icon {
  display: inline-block;
}// HTML 使用代码
<i class="icon icon-home"></i>
*/
.icon-card {
  background-image: url(icons.png);
  background-position: -48px -166px;
  width: 30px;
  height: 30px;
}.icon-help {
  background-image: url(icons.png);
  background-position: 0px -166px;
  width: 42px;
  height: 42px;
}.icon-location {
  background-image: url(icons.png);
  background-position: -192px -166px;
  width: 18px;
  height: 18px;
}.icon-money {
  background-image: url(icons.png);
  background-position: -84px -166px;
  width: 30px;
  height: 30px;
}.icon-note {
  background-image: url(icons.png);
  background-position: -120px -166px;
  width: 30px;
  height: 30px;
}.icon-popbg {
  background-image: url(icons.png);
  background-position: 0px 0px;
  width: 630px;
  height: 160px;
}.icon-user {
  background-image: url(icons.png);
  background-position: -156px -166px;
  width: 30px;
  height: 30px;
}
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The difference between button and input in the form

##How to use map tags and area tags

The above is the detailed content of Gulp command to generate sprite map. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:Combining HTML with CCSNext article:Combining HTML with CCS