Commande Gulp pour générer une carte de sprite
Mar 19, 2018 am 10:10 AMCette 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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

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

Sujets chauds

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 ?

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

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 ?

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