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.

 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.

10 cadres pour créer une application mobile avec HTML, CSS et JavaScript

Pour de nombreux développeurs Web, qui ne connaissent peut-être que HTML, CSS et JavaScript, le développement d'une application mobile native pourrait être un territoire inconnu . Techniquement parlant, les applications mobiles sous Android, iOS et Windows Phone sont construites en utilisant des langages de programmation complètement différents; une application Android utilise Java, une application iOS utilise Objective-C, tandis qu'une application Windows Phone utilise .NET.M

(Conseils techniques et de conception)

15 plugins jQuery pour faire des éléments collants intelligents

Il est maintenant courant de voir certains éléments d'un site fixé à une position lorsque vous faites défiler le site vers le haut ou vers le bas, par exemple le menu de navigation, l'en-tête ou la barre latérale. Cela permet à l'élément d'être facilement disponible quelle que soit la position de l'utilisateur.Appelé un

(Conseils techniques et de conception)