hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Comment décharger CSS inutile avec Grunt

L'utilisation d'un framework, comme Bootstrap et Foundation, est l'un des moyens les plus rapides de créer un site Web réactif. Ces frameworks ont tous les éléments nécessaires, y compris les composants Grid et Interface utilisateur pour construire un site web décent et fonctionnel.

Mais, les cadres visent à répondre à autant de scénarios web que possible. Ainsi, ils incluent des charges de CSS prédéfinies que vous ne pouvez pas utiliser sur votre site Web .

Tous les styles ne sont pas utiles à tous les usages, mais les avoir partout augmente inutilement la taille de votre feuille de style, ce qui finit par affecter les performances de votre site Web. Dans cet article, nous allons vous montrer comment décharger ces styles inutiles des feuilles de style .

Commencer

Pour accomplir cette idée, nous avons besoin de Grunt CLI . Assurez-vous donc qu'il est installé sur votre ordinateur. Vous pouvez vous référer à ces deux articles précédents pour en savoir plus:

  • Comment faire pour supprimer les modules inutiles dans jQuery
  • Résolution d'une erreur "Command Not Found" de Grunt dans le terminal

Je suppose que vous avez un répertoire de projet prêt, contenant HTML et CSS.

Comme vous pouvez le voir dans la capture d'écran suivante, j'ai deux dossiers nommés build - ceci est utilisé pour sauvegarder les feuilles de style à l'étape du développement; et css - ce sera le dossier de destination de la sortie finale de la feuille de style.

Ensuite, naviguez jusqu'au répertoire du projet via Terminal et tapez la commande suivante de manière consécutive. Ces deux commandes installent Grunt et grunt-uncss, le plugin Grunt dont nous avons besoin pour exécuter la tâche de suppression de CSS inutilisé.

 npm installer grunt --save-deve npm installer grunt-uncss --save-deve 

Configuration de base

Créez un fichier nommé Gruntfile.js dans votre répertoire de projet. Ouvrez le fichier dans un éditeur de code et placez les codes suivants.

 module.exports = function (grunt) {grunt.initConfig ({uncss: {dist: {fichiers: {'css / style.css': ['index.html']}}}); grunt.loadNpmTasks ('grunt-uncss'); grunt.registerTask ('default', 'uncss'); } 

Le code ci-dessus est la configuration de base du plugin; grunt-uncss les liens de la feuille de style depuis le .html, localiser les sélecteurs CSS qui ne sont pas utilisés dans le .html spécifié. html, et envoyez la sortie à css/style.css .

Configuration optionnelle

grunt-uncss est livré avec un certain nombre d'options. Supposons que vous souhaitiez ignorer des sélecteurs particuliers, vous pouvez inclure un paramètre ignore et spécifier les sélecteurs, comme cela.

 module.exports = function (grunt) {grunt.initConfig ({uncss: {dist: {fichiers: {'css / style.css': ['index.html']}}, options: {ignore: ['#id -to-ignore ', ' .auto-generated-class ', ' .ignore-this-class '], }}}); grunt.loadNpmTasks ('grunt-uncss'); grunt.registerTask ('default', 'uncss'); } 

Vous pouvez également contrôler grunt-css de ne traiter que des feuilles de style particulières à la place de celles qui sont extraites du fichier HTML avec le paramètre stylesheets .

 module.exports = function (grunt) {grunt.initConfig ({uncss: {dist: {fichiers: {'css / style.css': ['index.html']}}, options: {ignore: ['#id -to-ignore ', ' .auto-generated-class ', ' .ignore-this-class '], stylesheets: [' build / style.css ']}}}); grunt.loadNpmTasks ('grunt-uncss'); grunt.registerTask ('default', 'uncss'); } 

Configurez le chemin de sortie selon les exigences de votre projet.

Exécuter UnCSS

Voici le contenu de mon fichier HTML.

 CSS déchargé 

Décharger CSS

1er

2ème

3ème

... et ceci le contenu de ma feuille de style.

 .wrapper {largeur: 960px; marge: 60px auto; } .page-title {couleur: rouge; }. first-div, .second-div, .third-div, .fourth-div {largeur: 100px; hauteur: 100px; } .first-div {background-color: # 000; couleur: #fff; } .second-div {background-color: # 555; couleur: #ccc; } .third-div {background-color: #ccc; couleur: # f3f3f3; } .fourth-div {background-color: #aaa; couleur: # 777; position: absolue; } 

La seule classe qui n'est pas présente dans le fichier HTML est .fourth-div . La classe a été supprimée de la feuille de style. Lancez Terminal et tapez grunt pour exécuter la tâche configurée dans Gruntfile.js.

Ouvrez les deux fichiers CSS. Vous verrez que le sélecteur de classe .fourth-div est déjà supprimé car il n'est pas utilisé dans le code HTML.

Lorsque vous avez plein de styles inutilisés, cette astuce peut vous aider à réduire considérablement la taille du fichier de feuille de style.

Fonds d'écran de la Terre qui vous captivent

Fonds d'écran de la Terre qui vous captivent

L'espace est quelque chose de merveilleux n'est-ce pas? Et avec la possibilité que le voyage spatial devienne commercial à l'avenir, il y a diverses choses que nous, en tant qu'êtres humains, pourrions potentiellement expérimenter et observer. Vous ne le croiriez pas vraiment mais l' une des choses les plus étonnantes que vous pourriez jamais regarder est notre planète Terre . Aprè

(Conseils techniques et de conception)

10 Faits aléatoires sur la Saint-Valentin que vous ne saviez probablement pas

10 Faits aléatoires sur la Saint-Valentin que vous ne saviez probablement pas

La Saint-Valentin arrive bientôt et l'échange obligatoire de roses, de chocolats, de dîners et de rendez-vous rituels débutera à la mi-février. Pendant ce temps, je me suis lancé un défi d'écrire 10 choses intéressantes que je ne savais pas sur la Saint-Valentin.Les mauvaises nouvelles sont que je ne peux pas écrire sur les choses habituelles comme comment la Saint-Valentin a eu son nom ou ce que la couleur ou le nombre de roses dans un bouquet symbolise. Les bonne

(Conseils techniques et de conception)