preprocesseurs

Préprocesseurs

Un préprocesseur est une aide à la saisie de code informatique.

Appelé parfois compilateur ou transpilateur, on le rencontre dans beaucoup de langages.

Dans nos exercices, nous utiliserons des préprocesseurs pour écrire :

  • Du code html
  • Du code css
  • Du code javaScript

Nous allons commencer à utiliser le préprocesseur pour html : le langage slim.


Principe de fonctionnement :

  • On crée un fichier slim, par exemple 'projet.slim'
  • On écrit du code simplifié
  • Chaque fois que le fichier est physiquement modifié (enregistré), le préprocesseur le transforme en fichier 'projet.html'
  • Finalement, c'est ce fichier produit qui sera utilisé par le navigateur.
  • Par ailleurs, si le code slim comporte des erreurs syntaxiques, elles seront affichées.
    • Si celles-ci sont graves, la compilation n'aura pas lieu.

On comprend bien, selon ce principe, que le préprocesseur est un programme et qu'il doit être lancé avant de commencer son codage slim.


Exemple de code ( c'est celui de la page présentant des albums-photos ) :

Voici le code slim

code_slim

... et voici le code html produit automatiquement par le préprocesseur :

code_html


Localisation des fichiers sur le disque dur :

L'assistant Gulp s'occupe de tout en créant les fichiers slim au bon endroit.

Les fichiers slim du dossier www\<projet>\gulp\slim\htm
... seront compilées en html dans le dossier www\<projet>\htm
C'est très simple, supprimez de la source (slim) la partie écrite en rouge, qui sera toujours "\gulp\slim" et vous obtenez le chemin de la destination (html).

Exemple :

  • Source slim : www\prepros\gulp\slim\htm\ville\troyes
  • Cible html : www\prepros\htm\ville\troyes

Exercice pratique :

Nous allons simplement reproduire le code slim illustré précédemment :

  • Lancez l'assistant Gulp, paramétrez-le comme ceci :
  • Fenêtre d'accueil :
    • Dossier contenant le projet : www\exe003\prepros
    • Nom du projet : Préprocesseur Slim
    • 2 cases cochées : "Livereload" et "Compiler les slim en html"
    • Vérifiez puis cliquez sur "Suivant"
  • Page finale, 4 cases cochées :
    • SLIM
    • jQuery
    • CSS
    • JS
    • Vérifiez (comptez bien les 4 cases) puis cliquez sur "Terminer"
    • ... attendez la fin, fermez l'assistant.
  • Double-clic sur www\exe003\prepros\htm\index.html pour l'afficher dans le navigateur.
  • Double-clic sur www\exe003\prepros\Robot pour lancer la console-robot, attendre le démarrage.
  • Activez le livereload dans le navigateur Firefox
  • Double-clic sur www\exe003\prepros\gulp\slim\htm\index.slim :
    • Si ce n'est déjà fait, associez l'extension ".slim" à "Sublime Text"
    • Le fichier slim s'affiche dans Sublime Text
  • Clic droit sur www\exe003\prepros\htm\index.html pour l'afficher dans "Sublime Text"
    • Il ne faudra pas toucher à ce fichier car il est entièrement construit par le robot.
      • D'ailleurs, toute modification serait écrasée au prochain changement du slim.
    • On ne l'affiche que pour observer le bon fonctionnement du préprocesseur en live.
    • Pour ce faire, on affichera côte à côte le slim et le html (2 colonnes dans Sublime Text).

Voilà, nous sommes prêts pour commencer à coder notre premier slim.
État initial :

  • Une page ne contenant que le titre est affichée dans le navigateur.
    • Le client "Livereload" est bien lancé dans le navigateur.
  • Le fichier index.slim est affiché dans "Sublime Text"
  • Le fichier index.html est affiché dans "Sublime Text"
  • Le robot-Gulp est lancé :
    • Il est en attente de modifications des fichiers de notre projet en cours.
  • Si possible ayez à la vue ces 4 éléments : utilisez plusieurs écrans si nécessaire.
    • Sachez dès à présent qu'en cas d'erreur de syntaxe de slim, le robot vous l'affichera.

C'est parti ... vous ne devez modifier que le fichier slim (nous nous occuperons du css plus tard) :

  • Modifiez le titre en 2 endroits :
    • Dans le head -> title : remplacez 'Préprocesseur Slim' par 'Photos'
    • Dans le body -> h2 : remplacez 'Préprocesseur Slim' par 'Mes albums-photos : Animaux'
  • Enregistrez (Ctrl + s) :
    • Observez le fichier à côté (index.html) : Les modifications on bien été répercutées.
    • Évidemment, le navigateur s'est auto-actualisé grâce à Livereload.
  • Continuez pour reproduire tout le code illustré au dessus.
    • Attention, le code slim est basé sur des tabulations.
    • Ce sont les tabulations qui définissent la hiérarchie.

Terminez en créant les fichiers projet.css et projet.js

0 réponses

Un commentaire, une suggestion ?

Participez à la discussion.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *