Share
Dans le dernier tutoriel, vous avez appris à utiliser PostCSS pour rendre vos feuilles de style davantage compatibles entre navigateurs, en particulier pour résoudre les problèmes liés à la prise en charge des versions héritées de IE..
Dans ce tutoriel, nous allons apprendre à rendre vos feuilles de style plus efficaces et à charger plus rapidement, en utilisant PostCSS pour effectuer diverses opérations de minimisation et d'optimisation..
Vous apprendrez à:
Accentsconagua
@importation règle, même si certaines de vos feuilles de style proviennent de composants Bower ou de modules npm, vous n'avez donc besoin que d'un seul http demande de charger le CSS de votre site.Commençons!
La première chose à faire est de configurer votre projet pour qu’il utilise Gulp ou Grunt, selon vos préférences. Si vous n'avez pas encore de préférence pour l'un ou l'autre, je vous recommande d'utiliser Gulp, car vous aurez besoin de moins de code pour atteindre les mêmes objectifs. Vous devriez donc le trouver un peu plus simple à utiliser..
Vous pouvez lire comment configurer des projets Gulp ou Grunt pour PostCSS dans les tutoriels précédents.
respectivement.
Toutefois, si vous ne souhaitez pas configurer votre projet à partir de zéro, vous pouvez télécharger les fichiers source joints à ce didacticiel et extraire le projet de démarrage Gulp ou Grunt fourni dans un dossier de projet vide. Puis avec un terminal ou une invite de commande pointée sur le dossier, exécutez la commande npm installer.
Pour ce tutoriel, nous allons utiliser deux plugins individuels, plus un pack de plugins. Installez-les en exécutant la commande suivante dans le dossier de votre projet:
npm installer css-mqpacker cssnano --save-dev
Maintenant que les plugins sont installés, allons-y et chargez-les dans votre projet.
Si vous utilisez Gulp, ajoutez ces variables sous les variables déjà présentes dans le fichier:
var atImport = require ('postcss-import'); var mqpacker = require ('css-mqpacker'); var cssnano = require ('cssnano');Maintenant, ajoutez chacun de ces nouveaux noms de variables dans votre processeurs tableau:
processeurs var = [atImport, mqpacker, cssnano];
Faites un test rapide pour vérifier que tout fonctionne en exécutant la commande gulp css puis en vérifiant qu'un nouveau fichier “style.css” est apparu dans le dossier “dest” de votre projet.
Si vous utilisez Grunt, mettez à jour le processeurs objet, qui est imbriqué sous le options objet, à ce qui suit:
processeurs: [require ('postcss-import') (), require ('css-mqpacker') (), require ('cssnano') ()]Faites un test rapide pour vérifier que tout fonctionne en exécutant la commande grunt postcss puis en vérifiant qu'un nouveau fichier “style.css” est apparu dans le dossier “dest” de votre projet.
Cela a tous les plugins installés et chargés, alors passons à apprendre à les utiliser pour la minification et l'optimisation.
Plutôt que de charger individuellement plusieurs feuilles de style, il est plus efficace, dans la mesure du possible, de combiner vos feuilles de style en une seule..
Par exemple, l'utilisation de Normalize.css est très courante, mais si vous la chargez en tant que feuille de style autonome avant votre feuille de style principale, il faut plusieurs http demandes, donc ralentir le temps de chargement.
Cependant, si vous utilisez le plugin postcss-import de Maxime Thirouin, vous pouvez combiner Normalize.css dans votre feuille de style principale, en utilisant le @importation règle, vous donnant le même CSS avec un seul http demande.
Faisons ceci maintenant, en important puis en insérant Normalize.css dans la feuille de style de notre projet. Commencez par télécharger «normalize.css» dans le dossier «src» de votre projet à l’adresse https://necolas.github.io/normalize.css/
En haut de votre fichier «src / style.css», ajoutez la ligne suivante:
@import 'normalize.css';
Comme vous avez déjà installé postcss-import, c'est tout ce que vous avez à faire. Il verra le @importation règle et insère automatiquement le code du fichier normalize.css dans votre feuille de style.
Compilez votre fichier et lorsque vous regardez votre fichier «dest / style.css», vous devriez voir tout le contenu de «normalize.css»:
/ *! normalize.css v3.0.2 | Licence MIT | git.io/normalize * / html font-family: sans-serif;…
Vous pouvez utiliser ce même processus pour combiner autant de feuilles de style que vous le souhaitez. Il suffit de placer @importation lignes dans votre fichier “src / style.css” à l'endroit où vous souhaitez insérer le code en ligne.
Une fonctionnalité très utile de ce plugin est sa capacité à découvrir automatiquement les fichiers CSS situés dans votre dossier «bower_components» ou «node_modules»..
Par exemple, plutôt que de télécharger manuellement «normalize.css» comme nous l’avons fait ci-dessus, vous pouvez simplement exécuter la commande bower installe normalize.css --save dans votre projet. Cela téléchargerait automatiquement le dernier fichier «normalize.css» dans le dossier «bower_components / normalize.css»..
Remarque: Si vous n'avez pas la configuration de Bower sur votre ordinateur, découvrez comment.
En haut de votre feuille de style, vous pouvez maintenant utiliser cette ligne:
@import 'normalize.css / normalize.css';
Le plugin postcss-import va chercher dans votre dossier «bower_components» et trouver «normalize.css», puis continuez pour le mettre en ligne comme dans l'exemple précédent..
Le même processus peut être suivi pour toutes les feuilles de style qui se trouvent dans votre dossier «node_modules», ce qui signifie que vous pouvez utiliser Bower ou npm pour gérer les téléchargements, la gestion des dépendances et les mises à jour. Lorsque vous utilisez l'un ou l'autre service, ce plugin vous permet de combiner facilement des fichiers CSS tiers dans vos propres feuilles de style..
Cette méthode permet non seulement de combiner des fichiers de sources différentes, telles que des composants Bower, mais également d’organiser votre projet en plusieurs feuilles de style distinctes..
Par exemple, vous pouvez créer un fichier pour contrôler votre mise en page et un autre pour contrôler votre jeu de couleurs. Si vous voulez changer votre jeu de couleurs, vous pouvez alors suivre un processus comme celui-ci:
Vous pouvez ensuite répéter ce processus autant de fois que vous le souhaitez, ce qui vous permet de créer plusieurs combinaisons de couleurs pour le même motif..
Certains projets utilisent des feuilles de style distinctes pour fournir plusieurs schémas de couleurs comme celui-ci, mais créent en même temps un ralentissement à partir de http demandes. Avec cette approche, vous vous retrouvez toujours avec un seul http demande, en dépit d'avoir beaucoup de liberté dans ce qui pourrait être inclus dans votre feuille de style unique.
Pour en savoir plus sur postcss-import, rendez-vous sur: https://github.com/postcss/postcss-import
Le plugin css-mqpacker de Kyo Nagashima trouvera les requêtes multimédia correspondantes dans votre feuille de style et les combinera en une seule. Cela vous permet d'organiser votre CSS comme bon vous semble dans vos feuilles de style de développement, en répétant les requêtes multimédia si nécessaire, sans vous soucier d'une perte d'efficacité de votre feuille de style de production..
Mettons ensemble un exemple de type de cas d'utilisation dans lequel vous souhaiterez peut-être répéter les requêtes multimédia, par exemple si vous organisez la mise en page et les éléments visuels de votre conception. Dans un projet réel, cela peut signifier l’utilisation de fichiers complètement séparés, un pour la mise en page et un pour les éléments visuels, mais dans un souci de simplicité, nous ferons tout cela dans notre fichier «src / style.css».
Nous allons commencer avec un code de mise en page. Nous allons ajouter un .colonne classe qui fera deux 50% les colonnes de largeur sont côte à côte, par défaut. Nous utiliserons ensuite une requête multimédia pour les empiler les unes sur les autres dans des tailles plus petites. Ajoutez ce code à votre feuille de style:
/ * LAYOUT * / .column width: 50%; float: gauche; @media (max-width: 50rem) .column width: 100%; float: aucun;
Nous ajouterons ensuite quelques éléments visuels pour définir une bordure grise autour de nos colonnes. La première colonne aura la classe .colonne_un et le second aura la classe .colonne_deux. Nous allons utiliser la même requête de média que celle utilisée dans notre mise en page pour modifier la manière dont nous appliquons une bordure à nos colonnes, selon qu'elles sont côte à côte ou superposées..
Ajoutez également ce code à votre feuille de style:
/ * VISUALS * / .column_one, .column_two border: 0.0625rem solid #ccc; .column_two border-left: 0; @media (largeur maximale: 50rem) .column_one, .column_two border: 0.0625rem solide #ccc; .column_two border-top: 0;
Maintenant, recompilez votre fichier «src / style.css» et jetez un coup d’œil au contenu «dest / style.css» obtenu..
Comme vous pouvez le constater dans le code ci-dessous, le plug-in css-mqpacker a identifié les deux requêtes multimédia correspondantes et les a combinées en une:
/ * LAYOUT * / .column width: 50%; float: gauche; / * VISUALS * / .column_one, .column_two border: 0.0625rem solid #ccc; .column_two border-left: 0; @media (max-width: 50rem) .column width: 100%; float: aucun; .column_one, .column_two border: 0.0625rem solid #ccc; .column_two border-top: 0;
Remarque: Le code ci-dessus sera minifié dans votre fichier «dest / style.css» à cause du plugin cssnano. Pour voir le code non finalisé, mettez temporairement en commentaire Cssnano à partir de votre Gulpfile ou de votre Gruntfile processeurs tableau.
Pour plus d'informations sur css-mqpacker, rendez-vous sur https://github.com/hail2u/node-css-mqpacker.
Pour une optimisation CSS complète et à multiples facettes, le pack cssnano de Ben Briggs est une option très puissante, mais néanmoins plutôt plug-and-play. Il rassemble environ vingt-cinq plugins et peut effectuer un nombre impressionnant de types d'optimisation différents..
Parmi une longue liste d'optimisations, il peut:
calc () utilisationNous allons traiter quelques exemples de code dans votre projet qui verront appliquer toutes les optimisations ci-dessus..
Ajoutez ce code à votre fichier “src / style.css”:
.css_nano, .css_nano + p, [class * = "css_nano"], .css_nano / * Ceci est un exemple de cssnano en action * / font-weight: normal; marge supérieure: 1rem; marge en bas: 2rem; marge gauche: 1,5 rem; marge droite: 2.5rem; poids de police: normal; rembourrage: 1.75rem; largeur: calc (50rem - (2 * 1,75rem)); a text-decoration: none; poids de police: gras; p font-weight: bold;
Puis recompilez votre fichier.
Remarque: vous pouvez commenter tout code que vous avez déjà, afin de voir clairement les résultats.
Dans votre fichier «dest / style.css», vous devriez maintenant voir le code optimisé:
.css_nano, .css_nano + p, [class * = css_nano] marge: 1rem 2.5rem 2rem 1.5rem; font-weight: 400; padding: 1.75rem; largeur: 46,5rem a text-decoration: none a, p poids de la police: 700
Parcourez la liste des optimisations mentionnées dans la liste ci-dessus, puis comparez l'exemple de code avant et après la compilation pour voir comment chacune de ces modifications se produit:
poids de la police: normal et poids de police: gras sont convertis en Poids de police: 400 et Poids de police: 700 poids de police: normal; a été retiré de la .css_nano stylecalc () la propriété a été réduite à une valeur statique.css_nano, .css_nano + p, [class * = "css_nano"], .css_nano ont été minifiés à .css_nano, .css_nano + p, [class * = css_nano] marge supérieure: 1rem; marge en bas: 2rem; marge gauche: 1,5 rem; marge droite: 2.5rem; ont été réduits à marge: 1rem 2,5rem 2rem 1,5rem; une et p styles ont été fusionnés pour partager leur commune poids de police: 700; réglagePour une liste complète des optimisations, cssnano fournit des informations sur: http://cssnano.co/optimisations/
Le pack cssnano emploie plusieurs plug-ins indépendants et vous pouvez souhaiter configurer ou paramétrer certains de ceux-ci ou les désactiver complètement..
Pour désactiver un plugin, transmettez son nom dans vos options pour cssnano en appliquant le paramètre «false». Par exemple, si vous ne souhaitez pas optimiser le poids des polices, définissez les paramètres suivants dans votre fichier Gulpfile / Gruntfile:
// Dans le tableau 'processeurs' de Gulpfile, cssnano (minifyFontWeight: false) // Dans le tableau 'processeurs' de Gruntfile, require ('cssnano') (minifyFontWeight: false)Vous pouvez suivre la même approche pour configurer les options d'un plugin, en donnant d'abord le nom du plugin, puis en définissant ses options..
Par exemple, vous pouvez définir la précision (nombre de décimales), que le plug-in calc doit utiliser. Par défaut calc (100% / 2,76) vous donnerais 36,23188%. Mais si vous voulez réduire cette précision à deux décimales, vous pouvez le faire comme suit:
// Dans le tableau 'processeurs' de Gulpfile cssnano (calc: précision: 2) // Dans le tableau 'processeurs' de Gruntfile, besoin ('cssnano') (calc: précision: 2)La valeur de calcul serait maintenant sortie à 36,23%.
Pour plus d'informations sur les options de cssnano, visitez: http://cssnano.co/options
Ayons un aperçu de ce que nous avons couvert ci-dessus:
Dans le prochain tutoriel, nous allons nous intéresser à l’utilisation de PostCSS pour le prétraitement via un excellent pack de plug-ins appelé PreCSS. Ce pack donne un accès immédiat à la syntaxe et aux fonctionnalités de type Sass, avec des variables, des mixins, des conditions, des extensions et bien plus encore..
A bientôt dans le prochain tutoriel!
