Commande Gulp pour générer une carte de sprite

Cette fois, je vais vous apporter la commande Gulp pour générer une carte de sprite. Quelles sont les précautions pour la commande Gulp pour générer une carte de sprite. Ce qui suit est un cas pratique, jetons un coup d'œil.

Description du répertoire de fichiers

code gulpfile.js

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))
});

Carte de sprite et CSS générés

Lors de la génération de la carte de sprite, un nom de classe CSS avec le même nom que l'image originale sera également généré, ce qui la rendra plus pratique à utiliser.

.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;
}

Je pense que vous maîtrisez la méthode après avoir lu le cas présenté dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le sujet. Site Web chinois PHP !

Lecture recommandée :

La différence entre un bouton et une saisie dans un formulaire

Comment utiliser les balises de carte et les balises de zone

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!