Share
Dans le dernier tutoriel, nous avons expliqué comment utiliser PostCSS instantanément avec CodePen ou Prepros. Ces options sont excellentes, mais restrictives en ce sens que vous ne pouvez pas contrôler les plugins à utiliser..
Dans ce didacticiel, nous verrons comment utiliser PostCSS avec le gestionnaire de tâches Gulp, vous permettant de choisir vous-même les plug-ins que vous souhaitez utiliser et de tirer parti de l'écosystème de plug-ins..
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.
Étant donné que nous allons travailler avec Gulp, nous supposerons que les conditions préalables à son utilisation sont déjà installées:
Si vous n'êtes pas sûr de les avoir installés, suivez le didacticiel Ligne de commande pour la conception Web: Contracter des packages tiers, car il vous guidera dans la mise en place de ces conditions préalables..
Assurez-vous également de bien comprendre les bases de l'utilisation de Gulp en suivant le tutoriel Ligne de commande pour la conception Web: Automatisation avec Gulp. De plus, suivez les instructions de la section «Projet de configuration pour Gulp» du didacticiel. Avant de continuer, vous devriez avoir un dossier de projet avec:
Dans votre dossier de projet, créez deux sous-dossiers, l’un nommé «src» et l’autre «dest». Le dossier «src» va contenir vos fichiers CSS non traités, tandis que le dossier «dest» contiendra vos fichiers traités par PostCSS..
Vous devez ensuite installer le plug-in gulp-postcss dans votre projet. Nous l'utilisons pour gérer notre traitement PostCSS..
Dans une invite de terminal / commande pointée dans le dossier de votre projet, exécutez la commande suivante:
npm installer --save-dev gulp-postcss
Une fois l’installation terminée, la structure de votre projet devrait ressembler à ceci:
Ouvrez maintenant votre fichier Gulp pour l'édition et créez des variables à appeler dans les modules «gulp» et «gulp-postcss» en ajoutant le code suivant:
Accentsconagua
var gulp = require ('gulp'); var postcss = require ('gulp-postcss');Nous pouvons maintenant configurer une tâche pour lire un fichier CSS source et le traiter via PostCSS.
Ajouter ce qui suit:
gulp.task ('css', function () processeurs var = =]; renvoyer gulp.src ('./ src / *. css') .pipe (postcss (processeurs)) .pipe (gulp.dest ('. / dest ')););Décomposons ce que nous avons dans le code ci-dessus.
Dans la première ligne, nous avons configuré une tâche d'absorption nommée css. Cette tâche exécute une fonction et à l'intérieur de cette fonction, nous avons créé un tableau nommé processeurs. Pour le moment, ce tableau est vide, mais dans un instant nous allons le remplir avec les plugins PostCSS que nous voulons utiliser..
Après le processeurs tableau nous avons spécifié les fichiers que nous voulons cibler pour le traitement: tous les fichiers CSS dans le dossier “src”.
Dans la première des deux lignes utilisant le tuyau() fonction, nous configurons PostCSS pour s’exécuter via la fonction postcss (). Comme argument à travers cette fonction, nous passons notre processeurs tableau, qui, plus tard, dira à PostCSS quels plugins nous voulons utiliser.
Enfin, avec le deuxième des deux tuyau() fonctions, nous avons notre code traité écrit dans un nouveau fichier CSS dans notre dossier "dest".
Allez-y et créez un nouveau fichier “style.css” dans votre dossier “src” et ajoutez-y quelques tests CSS, tels que:
.test fond: noir;
Maintenant, dans votre invite de terminal / commande, toujours dirigée vers votre dossier de projet, exécutez la commande:
gulp css
Ceci exécutera la tâche que vous venez de configurer et vous devez maintenant trouver un nouveau fichier “style.css” dans votre dossier “dest”..
Lorsque vous ouvrez ce nouveau fichier, vous y verrez un code identique à celui de votre fichier source. Le code n'a pas changé car nous n'avons encore utilisé aucun plugin PostCSS, et comme vous le savez grâce à un précédent tutoriel, ce sont les plugins qui effectuent les manipulations CSS proprement dites..
Nous allons maintenant ajouter une sélection de plugins et de packs PostCSS: préfixe automatique (ajoute des préfixes de fournisseur), cssnext (active la syntaxe future) et precss (extension avec des fonctionnalités similaires à Sass).
Exécutez les commandes suivantes pour installer chaque plugin 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 définirons ensuite les variables à charger dans chacune d’elles dans notre projet. Ajoutez le code suivant sous les deux variables existantes en haut de votre fichier Gulp:
var autoprefixer = require ('autoprefixer'); var cssnext = require ('cssnext'); var precss = require ('precss');Ensuite, nous allons ajouter ces trois plugins à la processeurs tableau dans notre tâche d'avance. Mettez à jour le tableau comme suit:
processeurs var = [autoprefixer, cssnext, precss];
Avec les trois plugins ajoutés à notre tableau de processeurs, PostCSS saura que nous souhaitons appliquer chacun d'eux à notre CSS source.
Nous sommes maintenant prêts à ajouter du code de test à notre fichier «src / style.css» et à vérifier que tout fonctionne correctement. 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 gulp css 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
Comme indiqué ci-dessus, vous devriez voir que des préfixes de vendeurs ont été ajoutés à la première classe par Autoprefixer, un rgba () la couleur a été sortie par cssnext dans la deuxième classe, et le @sinon check a été évalué par PreCSS en troisième classe.
Remarque: si vous souhaitez configurer les options d’un plug-in, ajoutez une paire de crochets après son nom dans le tableau des préprocesseurs et transmettez-y les options. Par exemple, vous pouvez spécifier la liste de navigateurs sur laquelle vous souhaitez que Autoprefixer fonctionne, comme ceci:
var processors = [autoprefixer (navigateurs: ['dernière 1 version']), cssnext, 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.
Pour résumer ce qui précède:
processeurs tableaupostcss () fonction, avec le processeurs tableau passé en argumentÀ 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 var autoprefixer = require ('autoprefixer'); pré-processeurs tableau.Consultez le dépôt Github pour les fichiers de démarrage et les exemples complétés.
Dans le prochain didacticiel, nous verrons comment configurer un projet PostCSS dans l’autre des deux grands coureurs: Grunt. On se voit là-bas!
