recherche
Maisoninterface Webtutoriel CSSOptimiser les images avec une action github

Optimiser les images avec une action github

Récemment, j'ai essayé d'utiliser des actions GitHub, ce qui est un excellent outil! Autrement dit, il peut exécuter votre code, tels que les processus de construction, les tests et les déploiements. C'est juste un fichier de configuration qui peut exécuter n'importe quel code requis. Il existe de nombreuses actions sur le marché des actions GitHub qui peuvent faire toutes sortes de travaux pour vous.

Mon objectif est d'exécuter le code pour optimiser l'image afin que je n'ai plus à m'en soucier. Toute image dans l'entrepôt sera automatiquement optimisée.

Il existe déjà une action prête à l'emploi qui peut implémenter cette fonction, c'est-à-dire les actions d'image de Calibre, que nous utiliserons dans cet article. Vous devez également vous assurer que le référentiel a des actions activées. Je sais que dans mon organisation principale, nous n'activons que des actions par rapport, ce qui est l'une des options.

Ensuite, créez le fichier de configuration dans ./github/workflows/optimize-images.yml . Vous pouvez configurer cette action dans ce fichier. Toutes les actions peuvent avoir des fichiers séparés si nécessaire. Je l'ai créé en tant que fichier séparé car: (1) cela ne fonctionne que lorsque "poussant pour tirer la demande", donc si vous avez d'autres actions exécutées sur différents déclencheurs, ils ne se mélangeront pas bien; (2) Voici l'utilisation suggérée dans leur documentation.

 Nom: Optimiser l'image sur: pull_request
Emplois:
  construire:
    Nom: calibreapp / actions d'image
    Runs-on: Ubuntu-Latest
    Mesures:
      - Nom: Obtenez les utilisations de la base de code: Actions / Checkout @ Master

      - Nom: Utilisations d'image compressées: calibreapp / image-action @ maître
        avec:
          gitHubToken: $ {{secrets.github_token}}

Maintenant, si vous créez une demande de traction, vous le verrez fonctionner:

Après une course réussie, il laisse un commentaire dans la demande de traction expliquant ce qu'il a optimisé:

Il soumettra également ces fichiers à la demande de traction, donc si vous souhaitez continuer à travailler sur la demande de traction, vous devrez à nouveau pousser pour obtenir l'image optimisée.

Je peux afficher l'auto-engagement et voir la différence:

Je sais comment fusionner les relations publiques après que tout se passe bien:

Très cool. Est-il particulièrement difficile d'optimiser les images localement? Pas difficile. Mais ne jamais avoir à y penser, c'est mieux? Oui. Vous prenez un peu de dette technique ici, mais réduisez-la ailleurs, ce qui me semble au moins une affaire très équitable.

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
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
Animations CSS: est-il difficile de les créer?Animations CSS: est-il difficile de les créer?May 09, 2025 am 12:03 AM

CSSANIMATIONSARENOTINÉMENT HAUTS BUTREQUIREPRACTICIT ENCRIPTION DES PROFESSIONS DESPROPERTIES ET TROUVEMENT

@KeyFrames CSS: les astuces les plus utilisées@KeyFrames CSS: les astuces les plus utiliséesMay 08, 2025 am 12:13 AM

@ KeyframeSispopulardUetOtsSversatity andpowerCreatingsMoothcSSanimations.KeyTrickSinclude: 1) DefiingsMoothTransitionsBetwean

Compteurs CSS: un guide complet de la numérotation automatiqueCompteurs CSS: un guide complet de la numérotation automatiqueMay 07, 2025 pm 03:45 PM

CSSCOUNTERSAREUSEUSTTOMAGAUTAMAMATALUMENTSINDWEBDESIGNS.1) Ils ont été des cas de contenu, des listitems et de la forme.

Ombres de défilement moderne à l'aide d'animations axées sur le défilementOmbres de défilement moderne à l'aide d'animations axées sur le défilementMay 07, 2025 am 10:34 AM

L'utilisation d'ombres de défilement, en particulier pour les appareils mobiles, est un peu de UX subtil que Chris a couvert auparavant. Geoff a couvert une approche plus récente qui utilise la propriété d'animation-timeline. Voici encore une autre façon.

Revisiter les cartes d'imageRevisiter les cartes d'imageMay 07, 2025 am 09:40 AM

Passons à travers un rafraîchissement rapide. Les cartes d'image datent jusqu'à HTML 3.2, où, d'abord, les cartes côté serveur, puis les cartes côté client ont défini les régions cliquables sur une image à l'aide de cartes et d'éléments de zone.

État des développeurs: une enquête pour chaque développeurÉtat des développeurs: une enquête pour chaque développeurMay 07, 2025 am 09:30 AM

L'enquête sur l'état des développeurs est désormais ouverte à la participation, et contrairement aux enquêtes précédentes, il couvre tout sauf le code: carrière, lieu de travail, mais aussi santé, passe-temps, etc. 

Qu'est-ce que CSS Grid?Qu'est-ce que CSS Grid?Apr 30, 2025 pm 03:21 PM

CSS Grid est un outil puissant pour créer des dispositions Web complexes et réactives. Il simplifie la conception, améliore l'accessibilité et offre plus de contrôle que les méthodes plus anciennes.

Qu'est-ce que CSS Flexbox?Qu'est-ce que CSS Flexbox?Apr 30, 2025 pm 03:20 PM

L'article traite de CSS Flexbox, une méthode de mise en page pour l'alignement et la distribution efficaces de l'espace dans les conceptions réactives. Il explique l'utilisation de Flexbox, la compare à la grille CSS et détaille la prise en charge du navigateur.

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

SublimeText3 version Mac

SublimeText3 version Mac

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

SublimeText3 Linux nouvelle version

SublimeText3 Linux nouvelle version

Dernière version de SublimeText3 Linux

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Puissant environnement de développement intégré PHP

SublimeText3 version anglaise

SublimeText3 version anglaise

Recommandé : version Win, prend en charge les invites de code !

Navigateur d'examen sécurisé

Navigateur d'examen sécurisé

Safe Exam Browser est un environnement de navigation sécurisé permettant de passer des examens en ligne en toute sécurité. Ce logiciel transforme n'importe quel ordinateur en poste de travail sécurisé. Il contrôle l'accès à n'importe quel utilitaire et empêche les étudiants d'utiliser des ressources non autorisées.