Tout savoir sur WordPress

Codez et testez votre design en local sur tous vos périphériques avec Codekit 2

La version 2 de Codekit apporte tout un lot de fonctionnalités pratiques, dont une en particulier qui va vous permettre de coder votre responsive en local et voir le résultat à l’enregistrement en live sur votre ordinateur et tous vos périphériques mobiles sans avoir à recharger la page à chaque fois.

Cette manipulation très simple va vous permettre de :

  • Tester votre responsive web design en local sur tous vos périphériques
  • Bénéficier du rechargement automatique de la page lors d’un changement dans votre CSS

Codekit 2 pour Mac

Codekit est une application pour développeurs web pour Mac exclusivement qui vous permet entre autre de compiler à l’enregistrement votre CSS en Sass ou Less, Bourbon, minifier vos scripts, vérifier la syntaxe js …

Très pratique pour gagner du temps, prise en charge de toutes les nouvelles technologies pour mieux coder et gagner du temps… Mais aujourd’hui je vais m’attarder sur la nouvelle fonctionnalité du Live reload et l’external server qui ont vu le jour avec la version 2 de Codekit sortie il y a un peu plus d’un mois.

Codekit coute seulement 29$ et peut être acheté ici : https://incident57.com/codekit/

Si vous n’êtes pas à l’aise avec Sass/Compass, je vous conseille d’aller faire un petit tour sur le site officiel et suivre les tutos : http://sass-lang.com/. c’est quasiment devenu incontournable et fait gagner du temps de développement.

Configuration

  • Ajoutez votre projet à Codekit, en faisant glisser le dossier de votre thème dans Codekit. Libre à vous d’activer les fonctionnalités Sass ou Less.

step1-codekit-project

  • Cliquez sur les paramètres (la roue crantée), une fois dans les options, cliquez sur Browser Refreshing : 

step2-config

  • Activez External Server Required et indiquez l’adresse actuelle de votre site local. Généralement http://localhost/monsite/ ou encore http://monsite:8888/ selon votre serveur de dev local.
  • Cliquez sur Preview en haut à droite de l’application

codekit-live-reload

  • Remarquez que Codekit met à disposition sur une URL spécifique. Ici http://macbook-pro-de-maxime.local:5757/ Entrez cette adresse sur tous vos périphériques connectés au même réseau : votre smartPhone, votre tablette, un autre ordinateur …

Et la magie opère

Essayez maintenant de faire un changement dans votre fichier CSS et enregistrez. Le site se recharge automatiquement sur chacun de vos périphériques. Cette technique vous permettra de gagner énormément de temps dans votre développement.

ipad-iphone-mac

Et vous, vous faites comment ? Avez-vous mieux ? N’hésitez pas à en débattre dans les commentaires !

Cet article a été mis à jour il y a 3108 jours - Il n'est peut être plus à jour !

Article écrit par Maxime BJ

Développeur, bloggeur et formateur Web spécialisé WordPress. 36 ans. Grenoblois. Co-fondateur de WPChef, l’organisme de formation WordPress.

Co-fondateur de WPChef, la formation WordPress pour les débutants. Vous pouvez me rencontrer lors d’événements tels que les WordCamp. Traducteur Français de l’extension Advanced Custom Fields. Je m’occupe un site pour apprendre l’informatique aux débutants gratuitement.

5 Commentaires

  1. Salut
    Je suis un gros fan de Codekit suite à la démo que tu m’as faite au WordCamp (2011?).
    Je vais essayer ta technique. Par contre, est-ce que la version 2 de Codekit est déjà stable?

  2. Oui c’est la V2 officielle. Elle a longtemps été en beta mais elle est sortie en stable il y a un mois environ donc tu peux y aller sans souci.

    Je commence à me familiariser avec il y a l’air d’avoir plein de trucs au top (encore plus qu’avant)

  3. Merci beaucoup pour cette astuce qui me semble très utile pour tester le responsive web design. Au top votre astuce vraiment :)

  4. Je ne connaissais pas du tout ce soft ! Vraiment pratique, moi j’ai pour habitude d’utiliser Coda 2 qui est plutôt pas mal sur MAC