HTML5 : L’environnement de développement idéal ? ou comment lâcher définitivement le trio infernal Notepad++, zip et clé USB

I. Introduction

Après pas mal de tentatives (clé Usb, versioning sous forme de zip, Dropbox + Notepad++, GIT sur Dropbox, SVN sur Dropbox, Perforce en version gratuite, Eclipse, Aptana, ….) je suis enfin arrivé à un environnement de travail qui me satisfait plus que les autres.

Mes critères sont simples mais pas si faciles à obtenir tous en même temps.

Pour moi , la solution idéale doit:

  • accepter des projets privés (= non open source, j’ai honte de mon code)
  • être 100% gratuite ( je suis fauché )
  • être Multipostes (je dois pouvoir  bosser de n’importe où , sans galérer pour récupérer mon travail)
  • être Safe (ne pas tout perdre si ma clé USB meurt par exemple ;-))
  • être Efficace (pratique, rapide, pas lourd au jour le jour sinon je pète un câble)

Je vous propose donc le fruit de mes recherches, enjoy !

II. La recette, pas à pas

1) Créez vous un compte sur https://bitbucket.org/, c’est gratuit,  et c’est pratiquement le seul hébergeur de projets qui ne vous impose pas de mettre votre projet en Open Source

BitBucket vous propose gratuitement :

  • un dépot Mercurial (sans limite de taille il me semble)
  • une base de bug
  • un wiki pour vos docs
  • jusqu’à 5 users si vous travaillez en petite équipe.

2) Downloadez Python

http://www.python.org/download/releases/2.7/

Python va nous servir à faire des mini scripts dans Komodo Edit (des macros si vous voulez) pour, par exemple, lancer Chrome pour debugger. Cependant, je vous conseille de l’utiliser également pour automatiser certaines parties de votre process de build. Pour vous donner une idée de ce que j’en fais, je l’utilise pour générer automatiquement des fichiers javascript pour mes data, pour convertir mes data en base64, pour concatener tous mes fichiers javascript en un seul gros fichier,… mais vous aurez certainement de meilleures idées que moi.

Même si l’installeur de Python propose de modifier votre path système, pensez à vérifier/ajouter le chemin de Python à votre PATH car cela ne marche pas tout le temps. Pour ceux qui ne savent pas comment faire : Google est votre ami.

3) Downloadez Mercurial

http://mercurial.selenic.com/wiki/Download

! Pensez à ajouter Mercurial à votre PATH

4) Downloadez Komodo Edit

Komodo Edit est un des rares editeurs gratuits qui propose la complétion javascript (et le goto definition). Il est, de plus, entièrement scriptable. C’est, à mon avis, un juste milieu entre un Notepad++ et les grosses machines telles que Eclipse ou Aptana.

http://www.activestate.com/komodo-edit

Voilà, vous avez tout installé, maintenant il va falloir configurer tout ça.

III. Utilisation minimale de Mercurial

1) Petite intro sur Mercurial

Contrairement à beaucoup de source control (Perforce, SVN,…) Mercurial utilise des dépots distribués=> il n’y a pas à proprement parler de dépot principal. Votre dépot local est aussi important que celui sur BitBucket. Cela donne pas mal de souplesse et permet par exemple de faire des archivages locaux avant de “soumettre” vos modifications vers le serveur BitBucket. J’avoue c’est un peu déroutant pour les habitués de Perforce et autres source control centralisés mais, à l’usage, c’est vraiment pas mal. Nous allons donc regarder maintenant comment configurer Mercurial , créer votre dépot local ainsi que quelques commandes de base.

2) Configuration pour BitBucket

Afin de ne pas toujours rentrer l’adresse du server BitBucket, votre login et mot de passe, nous allons créer un fichier de configuration pour Mercurial:

a. Créez un fichier mercurial.ini dans votre répertoire user soit :

    • Windows XP:
      C:\Documents and Settings\MY_USER_NAME\mercurial.ini
    • Windows 7:
      C:\Users\MY_USER_NAME\mercurial.ini

b. Edition du fichier mercurial.ini

Rajoutez toutes ces infos dedans (les infos dans les lignes surlignées sont à remplacer par les vôtres)

; Votre utilisateur Bitbucket, ici j’ai mis Toto
[ui]
username = Toto

; votre proxy si vous en avez un, ou alors vous pouvez virer toute la section
[http_proxy]
host = 10.0.0.64:3128

[auth]
devzone.prefix = bitbucket.org
devzone.username = Toto
devzone.password = MotDePasseBitbubketDeToto

3) Clonage de votre base BitBucket

Pour résumer, mettez vous dans le répertoire où vous voulez travailler et faites:

hg clone http://bitbucket.org/MY_USER/MY_REPO

Pour des infos plus complètes :

http://confluence.atlassian.com/display/BITBUCKET/Getting+Started+with+Bitbucket

4) Commandes de base

Pour l’ensemble des commandes Mercurial, je vous renvoie vers la doc:
http://mercurial.selenic.com/wiki/Mercurial

ou si vous êtes allergiques aux lignes de commandes vers le principal client Mercurial, j’ai nommé TortoiseHg :  http://tortoisehg.bitbucket.org/

Cependant je vais insister sur les manips essentielles pour synchroniser son travail sur BitBucket :

a. Soumettre son travail vers BitBucket

hg addremove //Vérifie automatiquement les fichiers modifiés,
             // ajoutés ou retirés, et prépare une changelist

hg commit    // archive votre cl en cours dans votre dépot local

hg push      // Soumet vos modifs locales vers bitbucket

b. Récupérer la version de BitBucket vers son dépôt local

hg pull    //récupère les modifs bitbucket en local
           //(mais dans un dépot séparé)

hg update  //merge le dépot séparé (qui contient maintenant
           // la version bitbucket ) dans votre dépot local

IV. Améliorons encore l’environnement de travail

Nous allons encore améliorer un peu tout ça en ajoutant des macros dans Komodo Edit.

L’idée étant de pouvoir soumettre directement son travail en local et à distance (= sur BitBucket) en 1 seul clic.

Pour cela, nous allons utiliser une feature de Komodo qui permet de lancer des scripts Python .

1) Le script de Commit

import os
import shutil
import glob
import base64
import sys

argc = len(sys.argv)
print argc
print sys.argv[1]
print "launch hg addremove"
if os.system("hg addremove") != 0 :
print "error during hg addremove"
sys.exit(1)
print "launch hg commit"
if os.system("hg commit -m" + "\""+sys.argv[1]+"\"") !=0:
print "error during hg commit"
sys.exit(1)
print "launch hg push"
if os.system("hg push") != 0:
print "error during hg push"
sys.exit(1)

2) Le script de Run

import os
import shutil
import glob
import base64

#debugger
homedir = os.path.expanduser('~')
print homedir
debugger = homedir + "\\AppData\\\Local\\\Google\\Chrome\\Application\\chrome.exe  --allow-file-access-from-files --unlimited-quota-for-files"

# ### Vous pouvez ajouter vos commandes de build ici, avant de lancer chrome

os.system(debugger + " file://"+ os.getcwd()+ "/bin/index.html")


This entry was posted in Blog, Tech. Bookmark the permalink.

2 Responses to HTML5 : L’environnement de développement idéal ? ou comment lâcher définitivement le trio infernal Notepad++, zip et clé USB

  1. Alocaly says:

    Excellent !

    Et il n’y a pas de script de récupération depuis BitBucket ?

    • DomDom says:

      En fait moi je préfère faire le hg pull/hg update depuis l’explorer de windows. Mais en transformant le script de submit on peut facilement faire un bouton depuis komodo pour faire le get effectivement

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*