Table des matières
Description du répertoire de fichiers" >Description du répertoire de fichiers
code gulpfile.js" >code gulpfile.js
Carte de sprite et CSS générés" >Carte de sprite et CSS générés
Maison interface Web js tutoriel Commande Gulp pour générer une carte de sprite

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

Mar 19, 2018 am 10:10 AM
gulp 命令 精灵

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))
});
Copier après la connexion

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;
}
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment exécuter les commandes SUDO sous Windows 11/10 Comment exécuter les commandes SUDO sous Windows 11/10 Mar 09, 2024 am 09:50 AM

Comment exécuter les commandes SUDO sous Windows 11/10

Comment vérifier l'adresse MAC de la carte réseau sous Win11 ? Comment utiliser la commande pour obtenir l'adresse MAC de la carte réseau sous Win11 ? Comment vérifier l'adresse MAC de la carte réseau sous Win11 ? Comment utiliser la commande pour obtenir l'adresse MAC de la carte réseau sous Win11 ? Feb 29, 2024 pm 04:34 PM

Comment vérifier l'adresse MAC de la carte réseau sous Win11 ? Comment utiliser la commande pour obtenir l'adresse MAC de la carte réseau sous Win11 ?

Où se trouve le mode de session amélioré Hyperv ? Conseils pour activer ou désactiver le mode de session amélioré Hyper-V à l'aide des commandes dans Win11. Où se trouve le mode de session amélioré Hyperv ? Conseils pour activer ou désactiver le mode de session amélioré Hyper-V à l'aide des commandes dans Win11. Feb 29, 2024 pm 05:52 PM

Où se trouve le mode de session amélioré Hyperv ? Conseils pour activer ou désactiver le mode de session amélioré Hyper-V à l'aide des commandes dans Win11.

La commande cmdtelnet n'est pas reconnue comme une commande interne ou externe La commande cmdtelnet n'est pas reconnue comme une commande interne ou externe Jan 03, 2024 am 08:05 AM

La commande cmdtelnet n'est pas reconnue comme une commande interne ou externe

Hyper pratique ! Commandes Sar qui feront de vous un maître Linux Hyper pratique ! Commandes Sar qui feront de vous un maître Linux Mar 01, 2024 am 08:01 AM

Hyper pratique ! Commandes Sar qui feront de vous un maître Linux

Quelle est la bonne façon de redémarrer un service sous Linux ? Quelle est la bonne façon de redémarrer un service sous Linux ? Mar 15, 2024 am 09:09 AM

Quelle est la bonne façon de redémarrer un service sous Linux ?

Comment utiliser LSOF pour surveiller les ports en temps réel Comment utiliser LSOF pour surveiller les ports en temps réel Mar 20, 2024 pm 02:07 PM

Comment utiliser LSOF pour surveiller les ports en temps réel

Mar 22, 2024 pm 06:30 PM

See all articles