Middleman est un outil en ligne de commande permettant la création de sites web statiques tout en utilisant les raccourcis et outils mis à notre disposition par un environnement de développement moderne.
Middleman requière quelques connaissances dans l'utilisation de la ligne de commande. Cet outil est basé sur Ruby et sur le framework web Sinatra. Etre familié des deux ne pourra que vous aider à comprendre comment Middleman fonctionne.
Bien que cette introduction puisse vous décourager, ne partez pas tout de suite. J'ai moi même commencé à utiliser Middleman en n'ayant que quelques bases de Ruby.
Middleman est distribué via le gestionnaire de paquets Rubygems. Cela signifie que vous devez avoir installé le langage Ruby ainsi que Rubygems pour commencer à utiliser Middleman.
Si vous êtes sur Mac, sachez que Mac OS X est prepackagé avec Ruby et Rubygems. Cependant, certaines dépendances de Middleman doivent être compilées durant l'installation. Pour la compilation, vous devez avoir installé XCode, ce dernier pouvant être installé depuis le Mac App Store.
Si vous êtes sur Windows, il existe un programme nommé RubyInstaller. Téléchargez la dernière version ainsi que le Development Kit (pour la compilation).
Enfin si vous êtes sur Linux, j'imagine que vous saurez installer Ruby si ce n'est déjà fait.
Pour vérifier votre installation, tapez les commandes suivantes :
$ ruby -v ruby 1.9.2p290 (2011-07-09 revision 32553) [x86_64-darwin11.0.0] $ gem -v 1.8.6
Vos versions peuvent différer, ce n'est pas grave, l'important étant d'avoir une réponse.
Passons à l'installation de Middleman. Tapez la commande suivante :
$ gem install middleman
Cette commande installera Middleman ainsi que ses dépendances et l'outil pour la ligne de commande.
Vous disposez maintenant d'une nouvelle commande dans votre terminal, middleman. Elle peut prendre 3 paramètres différents :
L'utilisation de chacune de ces commandes est expliquée plus bas.
Pour commencer, nous allons avoir besoin d'un dossier à partir duquel Middleman travaillera. Vous pouvez utiliser un dossier préexistant ou demander à Middleman d'en créer un pour vous à l'aide de la commande middleman init.
Ouvrez un terminal et déplacez vous jusqu'au dossier de votre choix. Middleman y créera le squelette du projet (et le dossier en lui-même si besoin).
$ middleman init mon_projet
Chaque nouveau projet crée un squelette de développement web basique pour vous. Cela permet d'automatiser la construction d'une hierarchie de dossiers et fichiers que vous pourrez réutiliser dans tous vos projets.
Tout nouveau projet contient un dossier source ainsi qu'un fichier config.rb.
Le dossier source est l'endroit où vous construirez votre site web. Le squelette contient des dossiers pour les fichiers javascript, css et pour les images. Vous pouvez cependant effectuer des changements pour répondre à vos besoins.
Le fichier config.rb contient des paramètres pour configurer Middleman ainsi que de la documentation vous expliquant comment activer certaines fonctionnalités avancées de Middleman telle que la compression à la compilation ou encore le "mode blog".
Un fichier config.ru décrit la façon dont le site doit être chargé par le serveur Rack. Ce fichier est fourni pour simplifier la vie des utilisateurs souhaitant heberger leur site en mode de développement sur un hebergeur supportant Rack tel que Heroku.
Pour inclure un fichier config.rb générique à votre projet, ajoutez le flag --rack à la commande init :
$ middleman init mon_nouveau_projet --rack
Middleman respectera les consignes d'un fichier Gemfile de Bundler pour verouiller vos dépendances. Pour utiliser un Gemfile, vous devez d'abord installer Middleman.
$ gem install bundler
Lors de la création d'un nouveau projet, Middleman peut générer un Gemfile pour vous :
$ middleman init mon_nouveau_projet --bundler
Ceci aura pour effet de créer un Gemfile contenant la version de Middleman que vous utilisez. Cela verouillera Middleman à sa série de releases (serie 2.x par exemple).
En plus du squelette par défaut, Middleman est livré avec un template de projet optionnel basé sur le projet HTML5 Boilerplate. Les templates alternatifs sont accessibles en utilisant le flag -t ou --template en ligne de commande.
Par exemple, pour commencer un nouveau projet basé sur HTML5 Boilerplate, executez la commande suivante :
$ middleman init mon_nouveau_projet_boilerplate --template=html5
Enfin, vous pouvez créer vos propres squelettes de templates personnalisés en créant des dossiers dans le répertoire ~/.middleman/. Par exemple, je peux créer un dossier ~/.middleman/mobile/ et y mettre des fichiers que j'utiliserai sur des projets mobile.
Si vous lancez la commande init avec le flag help, vous verrez une liste de tous les templates qui ont été détectés.
$ middleman init --help
Cette commande listera tous mes squelettes de templates et je pourrais les utiliser comme vu un peu plus haut.
$ middleman init my_new_mobile_project --template=mobile
Middleman sépare votre code de développement et votre code de production dès le début. Cette separation a pour objectif de vous permettre d'utiliser tout un attirail d'outils (comme Haml, Sass, CoffeeScript, etc) pendant votre phase de développement et qui ne sont pas nécessaires voire même indésirables en production. Ces environnements sont appelés Cycle de développement et Site statique respectivement.
La majorité du temps pendant lequel vous utiliserez Middleman sera pendant le Cycle de développement.
Toujours depuis la ligne de commande, déplacez vous dans le dossier créé par Middleman si vous n'y êtes pas déjà et entrez la commande suivante :
$ cd mon_projet $ middleman server
La seconde commande aura pour effet de démarrer un serveur local sur le port 4567. Vous pouvez accéder à ce serveur depuis n'importe quel navigateur en tapant http://localhost:4567/ depuis l'ordinateur sur lequel fonctionne le serveur.
Vous pouvez maintenant ajouter et modifier les fichiers présents dans le répertoire source et recharger la page pour voir s'afficher les modifications.
Si cependant, vous veniez à faire des modifications dans le fichier de configuration config.rb, vous devriez redémarrer le serveur pour que ces changements prennent effet. Pour arrêter le serveur, selectionnez le terminal dans lequel il tourne puis appuyez sur CTRL + C. Relancez la dernière commande pour démarrer de nouveau le serveur.
Lancer la commande middleman sans aucun argument revient à lancer le serveur.
$ middleman
Ceci fait exactement la même chose que middleman server.
Etape ultime du développement avec Middleman, la construction du site statique. Une fois prêt à livrer le code statique de votre site, la mise en production de votre site n'est plus qu'à une commande prêt, c'est le côté génial de Middleman.
Depuis le répertoire du projet (comme pour lancer le serveur), lancez la commande suivante :
$ cd mon_projet $ middleman build
Cette commande va compiler chaque fichier du répertoire source un à un avec les options que vous aurez éventuellement précisé dans le fichier config.rb et les copier dans un nouveau répertoire nommé build situé à la racine de votre projet.
Si vous avez beaucoup de fichiers, la compilation peut prendre un peu de temps mais c'est de l'ordre de quelques secondes rassurez vous.
J'espère que cette introduction vous aura donné envie d'utiliser Middleman. J'écrirai d'autres tutoriels sur l'utilisation avancée de ce formidable outil prochainement.
N'hésitez pas à laisser un commentaire sur le tutoriel, ou à le partager sur les réseaux sociaux, ça me fait toujours plaisir et m'encourage à continuer mon oeuvre pour un monde meilleur.
Si le tutoriel contient un point que vous ne comprenez pas, sur lequel vous aimeriez avoir des explications, n'hésitez pas à poser votre question sur le Google Group de Syrinxoon Tuts, je viendrai rapidement répondre à votre question.
Enfin, signe ultime de remerciement, vous pouvez me faire un don pour m'aider à payer les frais du serveur en cliquant sur le bouton Donate ci-dessous ⇓
Abonnez vous au flux des tutoriels
Enregistrez vous pour commenter
Marquer ce tutoriel comme lu