Share
Dans le dernier tutoriel, nous avons expliqué comment configurer un projet PostCSS avec Gulp. Dans ce tutoriel, nous allons atteindre les mêmes objectifs, en utilisant Grunt. À la fin de ce didacticiel, vous saurez comment configurer un projet PostCSS + Grunt avec la sélection de plugins de votre choix..
Remarque: Si vous n'avez jamais travaillé avec des coureurs de ligne de commande ou de tâche auparavant, je vous recommande de consulter notre série gratuite avant de commencer ce didacticiel: La ligne de commande pour la conception de sites Web.
Comme nous allons travailler avec Grunt, nous supposerons que les conditions préalables à son utilisation sont déjà installées:
Si vous n'êtes pas sûr de l’avoir installé, suivez le didacticiel Ligne de commande pour la conception de sites Web: Maîtriser les packages tiers.
Assurez-vous que la CLI de Grunt est installée dans le monde entier et comprenez son utilisation de base en suivant la ligne de commande pour la conception Web: Automatisation avec Grunt. De plus, suivez les instructions de la section «Projet d'installation pour Grunt» du didacticiel. Avant de continuer, vous devriez avoir un dossier de projet avec:
Dans votre dossier de projet, ajoutez deux sous-dossiers, l'un nommé "src" et l'autre nommé "dest". Le dossier «src» contiendra vos fichiers CSS non traités et PostCSS écrira vos fichiers CSS compilés dans le dossier «dest»..
La prochaine chose à faire est d’installer le plugin Grunt pour PostCSS dans votre projet: nous utiliserons grunt-postcss pour gérer la compilation..
Dans une invite de terminal / commande pointée dans le dossier de votre projet, exécutez la commande suivante:
npm installer grunt-postcss --save-dev
À ce stade, la structure de votre projet devrait ressembler à ceci:
Ouvrez votre Gruntfile pour l'édition et commencez par ajouter le shell de code de base requis par tous les Gruntfiles:
module.exports = function (grunt) ;
À l'intérieur de cela, nous allons utiliser le grunt.loadNpmTasks () fonction à charger dans notre grunt-postcss plugin comme si:
Accentsconagua
module.exports = function (grunt) grunt.loadNpmTasks ('grunt-postcss'); ;Nous sommes maintenant prêts à commencer à configurer la tâche Grunt que nous utiliserons pour exécuter postcss. Tout d'abord, ajoutez le grunt.initConfig () fonction au-dessus de la ligne que nous venons d'ajouter:
module.exports = fonction (grunt) grunt.initConfig (); grunt.loadNpmTasks ('grunt-postcss'); ;A l'intérieur de cela, configurez un objet nommé postcss ainsi:
module.exports = function (grunt) grunt.initConfig (postcss: ); grunt.loadNpmTasks ('grunt-postcss'); ;À l'intérieur du nouveau postcss objet, nous allons ajouter deux autres objets imbriqués, l'un nommé options et un nommé dist:
module.exports = fonction (grunt) grunt.initConfig (postcss: options: , dist: ); grunt.loadNpmTasks ('grunt-postcss'); ;le options objet contiendra la configuration pour PostCSS, et le dist objet contiendra des informations sur l'endroit où nos fichiers CSS doivent être lus de et écrit à.
Allez-y maintenant et créez un fichier CSS nommé “style.css” dans le dossier “src” de votre projet. Ajoutez-y du code de test, tel que:
.test fond: noir;
Maintenant, mettez à jour le dist objet pour spécifier “src / style.css” en tant que fichier source et “dest / style.css” en tant que fichier à générer:
dist: src: 'src / style.css', dest: 'dest / style.css'
Puis, à l'intérieur du options objet, ajouter un tableau vide nommé processeurs. C'est ici que nous allons configurer les plugins PostCSS pour les utiliser un peu plus tard. Pour l'instant, il suffit de le mettre à jour pour:
options: processeurs: [],
Votre base postcss La tâche est maintenant prête à partir. Pour le tester, avec votre terminal / invite de commande toujours dirigé vers votre dossier de projet, exécutez la commande:
grunt postcss
Dans votre terminal, vous devriez voir ce message:
Exécution de la tâche "postcss: dist" (postcss) >> 1 feuille de style traitée créée.
Et maintenant, dans votre dossier «dest», vous devriez trouver un nouveau fichier «style.css», contenant le même code que le fichier «style.css» dans votre dossier «src»..
Nous ajouterons ensuite une sélection de plugins et de packs PostCSS: préfixe automatique (ajout du préfixe du fournisseur), cssnext (activation de la syntaxe future) et precss (extension avec la fonctionnalité Sass).
Exécutez les commandes suivantes pour installer chacune d’elles dans votre projet:
npm installer autoprefixer --save-dev npm installer cssnext --save-dev npm installer precss --save-dev
Remarque: Le cssnext et précss les installations peuvent prendre un peu de temps car ce sont des packs de plusieurs plugins.
Nous sommes maintenant prêts à charger chacun des plugins via le processeurs tableau que nous avons créé plus tôt. Mettez à jour ce tableau comme suit:
processeurs: [require ('autoprefixer') (), require ('cssnext') (), require ('precss') ()]Continuons maintenant, ajoutons du code de test à notre fichier source «style.css» et vérifions que nos plugins PostCSS récemment installés fonctionnent comme prévu..
Supprimez ce que vous avez déjà dans le fichier et ajoutez ce CSS à la place:
/ * Test du préfixe automatique * / .autoprefixer display: flex; / * Test de cssnext * / .cssnext background: color (alpha rouge (-10%)); / * Test precss * / .precss @if 3 < 5 background: green; @else background: blue;
Exécuter le grunt postcss commande à nouveau maintenant et le fichier résultant dans votre dossier «dest» devrait avoir le contenu suivant:
/ * Test du préfixe automatique * / .autoprefixer display: -webkit-box; afficher: -webkit-flex; display: -ms-flexbox; affichage: flex; / * Test de cssnext * / .cssnext background: rgba (255, 0, 0, 0.9); / * Test precss * / .precss background: green
Vous verrez dans le .préfixe automatique classe, les préfixes de vendeurs ont été ajoutés par Autoprefixer. dans le .cssnext classe, un rgba () la couleur a été générée par cssnext. Et enfin dans le .précss classe, la @sinon conditionnel a été évalué par PreCSS.
Notez que si vous souhaitez configurer les options d’un plug-in, transmettez-les par la deuxième paire de crochets après le exiger() fonctionner pour ce plugin. Par exemple, vous pouvez spécifier la liste de navigateurs sur laquelle vous souhaitez que Autoprefixer fonctionne, comme ceci:
processeurs: [require ('autoprefixer') (navigateurs: ['1 dernière version'])), require ('cssnext') (), require ('precss') ()]La beauté de PostCSS réside dans sa capacité à être configuré avec n’importe quelle combinaison de plugins. Le défi que cela pose, cependant, est de s'assurer que les autres personnes souhaitant travailler sur un projet ont la même configuration de plugins PostCSS. Grâce à npm, ce défi est géré via son système de gestion des dépendances..
Parce que vous utilisez le --save-dev marquer chaque fois que vous installez un plugin dans votre projet, il sera ajouté à votre fichier «project.json» en tant que dépendance de dev. Cela signifie que si vous souhaitez partager votre projet avec d'autres personnes, elles peuvent exécuter la commande npm installer sur le paquet que vous partagez avec eux et que tous les mêmes plugins sont automatiquement installés.
Pour en savoir plus sur le fonctionnement de la gestion des dépendances avec NPM, consultez le didacticiel La ligne de commande pour la conception Web: Contrôles maîtrisés tiers.
En résumé de tout ce qui précède:
grunt.loadNpmTasks ('grunt-postcss'); options objet contenant un processeurs tableaudist objet spécifiant vos fichiers source et la destination des fichiers compilésÀ partir de là, vous pouvez suivre les mêmes étapes essentielles pour activer n’importe quel plugin PostCSS dans votre projet:
npm installer --save-dev pré-processeurs tableau utilisant la fonction require ()exiger('') () .Consultez le dépôt Github pour les fichiers de démarrage et les exemples complétés.
Vous savez maintenant comment utiliser Gulp ou Grunt pour utiliser PostCSS avec tous les plugins de votre choix. La prochaine chose dont vous avez besoin est un moyen d'explorer l'écosystème de plug-in PostCSS et de trouver d'excellents plug-ins qui conviennent parfaitement au type de projet que vous souhaitez créer..
Nous verrons exactement comment vous pouvez le faire dans le prochain tutoriel; «Guide de démarrage rapide: Exploration des plugins».
