Share
Dans ce tutoriel, je vais vous montrer comment utiliser Grunt et PurifyCSS pour créer une feuille de style ultra-légère avec un minimum d'effort. Nous allons l'installer, puis apprendre à le faire fonctionner avec et sans Grunt, pour nous donner des styles beaucoup plus performants.
PurifyCSS est un outil JavaScript qui analyse vos fichiers de balisage (HTML, PHP ou même JavaScript), puis les référence croisée avec le CSS que vous utilisez. Tous les sélecteurs de votre CSS qui ne sont pas utilisés seront supprimés, vous ne laissant que les styles dont vous avez réellement besoin.
Pour installer PurifyCSS, vous pouvez soit récupérer le dépôt directement à partir de GitHub, soit l'installer via npm (plus de détails sur la procédure à suivre via ce tutoriel de Kezz).
Installation via npmLes fichiers que nous allons utiliser pour démontrer PurifyCSS sont une feuille de style Bootstrap complète et un index.html. Vous pouvez les récupérer dans le dépôt source. Le fichier index.html est assez simple; il n'y a qu'une section héros, avec des boutons, des éléments de formulaire et la grille Bootstrap; nous n'avons certainement pas besoin de toute la bibliothèque de styles Bootstrap.
La feuille de style Bootstrap complètePour exécuter PurifyCSS sur cette feuille de style, accédez à l'invite de ligne de commande, accédez au dossier du projet et exécutez une commande avec les éléments suivants:
Accentsconagua
purifier commande pour lancer les choses--min si nous voulons que le CSS résultant soit minifié--en dehors après quoi nous pouvons spécifier où nous voulons que le fichier résultant soit sauvegardé--Info si nous voulons que le processus soit connecté au terminal--rejeté qui, lorsqu'il est inclus, enregistre tous les sélecteurs qui ont été rejetés de la feuille de style sourceNotre commande finale ressemble à ceci:
purifycss css / bootstrap-full.css index.html --min --out css / bootstrap-purify.css --info --rejected
La feuille de style source a été réduite de plus de 100 Ko, bon travail!
Pour automatiser encore plus notre processus, nous pouvons utiliser un gestionnaire de tâches comme Grunt. Pour revenir à notre point de départ, nous devons ajouter un package.json à notre projet. L'exécution de npm init à partir de notre dossier nous mènera à travers un processus de création package.json, produisant essentiellement un fichier contenant les détails suivants:
"name": "purifycss", "version": "1.0.0", "description": "Un fichier pour tester Grunt PurifyCSS", "main": "index.js", "scripts": "test" : "echo \" Erreur: aucun test spécifié \ "&& exit 1", "author": "Adi Purdila", "license": "ISC",
Ensuite, si nous ne l'avons pas déjà, nous devons installer Grunt:
npm installer grunt --save
Ceci fait, vous verrez qu'un dossier «node_modules» a été ajouté à votre projet..
Ensuite, nous devons installer le plugin Grunt pour PurifyCSS.
npm installer grunt-purifycss --save
Nous devons maintenant créer un fichier appelé gruntfile.js. Examinez les fichiers source pour voir ce qu’il contient, mais la tâche Grunt elle-même est particulièrement intéressante:
purifycss: cible: src: ['* .html', 'js / *. js'], css: ['css / bootstrap-full.css'], dest: 'css / bootstrap-grunt.css'
Les options de l’objet cible doivent vous être familières depuis notre précédent exercice et, avec ces paramètres définis, notre fichier est prêt..
Pour exécuter Grunt, entrez dans le terminal:
grunt purifycss
Et nous avons fini! Nous avons examiné deux approches différentes pour utiliser PurifyCSS pour nettoyer nos feuilles de style. N'oubliez pas: il est inutile de charger les navigateurs en kilo-octets de styles qui ne sont même pas utilisés, la performance compte!
