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 1448 jours - Il n'est peut être plus à jour !

Article écrit par Maxime BJ

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

Organisateur de WPInAlps, le meetup WordPress Grenoblois. Vous pouvez me rencontrer lors d’événements tels que WordCamp Paris et Europe. Traducteur Français de l’extension Advanced Custom Fields. Également développeur d’applications web avec MeteorJs. Je m’occupe un site pour apprendre l’informatique aux débutants gratuitement.

J’aime les jeux vidéo, la rando, la bouffe bien grasse et les voyages.

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)

9da276c5edd2e183b8f3895b40b57e5f))))))))))))))