LiveReload pour Sublime Text 3

Installer le package LiveReload pour l’éditeur de texte Sublime Text 3

Voici une petite démo pour mettre en place le package LiveReload pour Sublime Text 3 et google Chrome pour de l’édition de code sans recharger votre page internet !

Pourquoi j’aurais besoin de ça ?

Personnellement, pour écrire du code simple (comme PHP ou CSS) qui n’a pas besoin de compilation, mon éditeur de texte préféré est Sublime Text, pour ceux qui ne connaissent pas je vous vous le recommande fortement, car l’essayer c’est l’adopter ! Il permet une édition de code très souple avec beaucoup de petit raccourcis clavier vraiment bien pensés, très modulable avec une console pour utiliser des commandes, etc. Une merveille !

Vous avez sur la page d’accueil du site officiel une petite animation vous montrant quelque atouts que posséde sublime text :

http://www.sublimetext.com/

Le package LiveReload vous permet de faire du « live editing », en clair la moindre modification que vous faîtes sur votre code s’affiche directement, d’un coup d’un seul, sans recharger la page, instantanément, sur votre page web ! Vous pouvez appelé ça de la paresse, j’appelle cela de l’optimisation des outils de travail.

Package indispensable donc, encore plus terrible avec un combo de double écrans.

Sublime Text

Bien sûr vous avez tous Sublime Text d’installé sur votre machine, mais on va reprendre depuis une installation vierge pour installer ce fameux package. Il vous faut donc Sublime Text, la version 3 ici, téléchargeable sur le site officiel :

http://www.sublimetext.com/3

Package Control

Package Control permet de gérer vos packet avec une interface en ligne de commande, très pratique, c’est un incontournable pour Sublime Text, il vous le faut impérativement.

Une fois Sublime Text installé, installez Package Control, pour cela, copiez les quelques lignes de code se trouvant sur le site web du Package Control dans la console de Sublime Text.

  • le site web du Package Control

https://packagecontrol.io/installation

  • Ouvrir la console Sublime Text
 View > Show Console

Une fois installé, relancez Sublime Text (je vous conseille de l’épingler à votre barre des tâches de façon à le retrouver plus vite).

C’est avec lui que vous téléchargerez le package, il s’occupera de tout. Avec lui vous pouvez téléchargé n’importe quel package enregistré dans ses répertoires, vous pouvez ajouté quelque packages supplémentaire si vous le voulez c’est très simple

Évidement s’il suffisait de lui demander d’installer LiveReload ça serait trop facile ! La version actuellement disponible sur Package Control est celle pour Sublime Text 2, pour Sublime Text 3 il vous faudra faire quelques manipulations …

Voici ce qui à fonctionner pour moi : un Fork du projet initial, encore en version de développement, créer par Grafikart. Il faudra aller chercher la page GitHub de ce projet, l’ajouter en tant que répertoire et télécharger le package depuis celui-ci :

Installation de Live Reload

Ajouter la page Github du projet

Ajoutez la comme ressource de téléchargement : ouvrez le Package Control avec la commande Ctrl + Shift + p et taper « PCAR » (Package Control: Add Repository ») et validez.

pcar

Ensuite collez l’adresse de la page GitHub, ci-dessous, validez :

https://raw.github.com/Grafikart/ST3-LiveReload/master/package.json

pcarlr

Installer le package

Après avoir ajoutez la page GitHub aux répertoires, installez le package depuis celle-ci avec Package Control, tapez « PCIP » (Package Control: Install Package) et patientez le temps que les répertoires soit chargés.
pcip

Rechercher « LiveReload » et validez, faites bien attention à ce que le package sélectionné soit le fork de Graphikart.
pcipr

Configurer le package

Une fois le package installé, allez dans

Preferences > Package Settings > LiveReload > Setting - Default

Et insérer dans le fichier qui s’ouvre les lignes suivantes (n’oubliez pas de sauvegarder puis de relancer Sublime Text) :

{ 
	"enabled_plugins": [ 
		"SimpleReloadPlugin", 
		"SimpleRefresh" 
	]
}

prefpc

Maintenant Sublime Text devrait être correctement configuré, après ça il vous faut simplement l’extension pour navigateur qui va actualiser la page en cas de modifications.

L’extension pour navigateur

Pour l’installer vous pouvez aller directement dans les magasins prévu à cet effet, ou suivez directement les liens vers les pages d’ajout des extensions pour les navigateurs suivant :

Pour les autres navigateurs tels que Safari ou Opera, consultez le site officiel :

http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions

Personnellement j’utilise chrome, une fois l’installation terminée vous devriez voir l’icône de l’extension apparaître dans le coin supérieur droit du navigateur.

ext

Pour activer l’extension, cliquez simplement dessus, si tout se passe bien le centre du petit cercle au milieu des flèches se remplie, signifiant que l’extension est activé. S’il y a une erreur un pop-up apparaîtra vous en informant.

Et après ceci, vous avez normalement tout configuré correctement et LiveReload devrait fonctionné !

It works !

comme dirait apache …

Ouvrez votre ficher dans Sublime Text et dans votre navigateur, et cliquer sur l’icone de l’extension LiveReload pour l’activer, modifier votre code, sauvegardez et normalement vous devriez voir les modification apparaître !

Un petit plus, Auto-save

Maintenant que tout fonctionne, vous pouvez installez un package pour sublime text qui va sauvegarder votre fichier à chaque entrée clavier sur votre fichier (oui oui, là c’est vraiment de la paresse). Personnellement je trouve ça pratique mais c’est plutôt invasif, à vous de voir :

Ouvrez le Package Control et tapez « PCIP » pour installer le package, vous connaissez bien maintenant ;). Et cherchez « auto-save » et validez.
autosave

Ensuite il y a juste une petite configuration à faire, comme vous l’indique le message à l’installation, allez dans

Preferences > Key Bindings - User

et copiez y les quelques lignes suivantes :

[
	{
		"keys": ["ctrl+shift+s"], "command": "auto_save"
	}
]

keybind

Et voilà ! Pour activer auto-save, faites Ctrl + Shift + s et votre fichier sera sauvegardé à chaque entrée clavier !

Évidement vous pouvez, si vous aimez le danger, modifier ce raccourcis clavier à votre guise, c’est votre Sublime Text.

LiveReload en quelques mots

En fait, LiveReload va comparer, grâce à votre extension navigateur, le code source du serveur et votre code dans Sublime Text, s’il repère une différence, il actualise la page. C’est tout simple.


J’espère que cette démo fut claire et que LiveReload va faciliter votre vie de développeur !

7 réflexions au sujet de « LiveReload pour Sublime Text 3 »

  1. LA METHODE FINALE 2015 SUBLIME TEXT 3 à faire pour LIVERELOAD
    Avant-Propos
    Mais pour les NOOBYS comme moi il nous faut un truc « terre-à-terre »
    Voilà pourquoi j’ai décidé de modifié une bonne partie de ce tuto afin de permettre à tout le monde de pouvoir le faire sans aucun souci….Merci à tous les prédecesseurs tels que toi Anthony Lozano, Grafikart, Djony (voir son repertoire Github), et bien d’autres qui ont bien voulu travailler sur ce truc merveilleux.

    Bon on commence les choses sérieuses:

    LA METHODE FINALE 2015 SUBLIME TEXT 3 à faire pour LIVERELOAD

    Avant-Propos

    Être connecté à internet pour suuivre ces différentes étapes obligatoires
    Pratiquez cela si vous êtes un utilisateur de Windows OS

    1) téléchargez sublimetext sur http://www.sublimetext.com/3 pour la version 3

    2) téléchargez le fork de Graphikart sur https://github.com/Grafikart/ST3-LiveReload
    ou sur https://github.com/Grafikart/ST3-Preferences pour la version 3
    Toutefois la première adresse est la celle recommandée pour suivre les étapes suivantes
    — dézippez-le puis renommez-le LiveReload
    — copiez-le dans C:\Users\ROOTOOR225\AppData\Roaming\Sublime Text 3\Packages
    3) copier le Package Control valable pour la version de ST3 téléchargée
    sur https://packagecontrol.io/installation
    puis
    — cliquer sur l’onglet View
    — aller sur Show Console (ctrl+`)
    — coller la copie du fichier « import urllib.request,os,hashlib; …… »
    —appuyer sur ENTRER pour valider
    4) Allez dans préférences et ensuite dans  » Package Control  » et choisissez  » Add Repository  » et ajouter l’url : https://raw.github.com/Grafikart/ST3-LiveReload/master/package.json
    5) Installer le package en faisant ctrl+shift+P puis en tapant PCIP
    6) Patientez le temps que l’installation des packages finisse (environ 15min ou moins)
    7) Rechercher « LiveReload » et validez, faites bien attention à ce que le package sélectionné soit le fork de Graphikart.
    NB: si c’est bien fait vous verez l’alerte du parfeu Windows apparaître
    demandant de confirmer des trucs. cliquez OUI ou autoriser l’accès et continuez
    8)Configurer le package

    Une fois le package installé, allez dans

    Preferences > Package Settings > LiveReload > Setting – Default

    Et insérer dans le fichier qui s’ouvre les lignes suivantes (n’oubliez pas de sauvegarder puis de relancer Sublime Text) :

    {
    « enabled_plugins »: [
    « SimpleReloadPlugin »,
    « SimpleRefresh »
    ]
    }

    9)téléchargez les extensions LiveReload convenables pour votre navigateur
    ATTENTION : voici où aller les chercher :===== http://livereload.com/extensions/

    Personnellement j’utilise firefox edition developper, une fois l’installation terminée
    vous devriez voir l’icône de l’extension apparaître dans le coin supérieur droit du navigateur.
    Càd dans la barre des onglets.

Laisser un commentaire

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