Développement Outils

Première contrib Github : Une boite à outils pour développeur frontend

Je vous propose aujourd’hui une « boite à outils » pour développeurs front-end. J’ai découvert un dépôt assez sympa nommé Harvest avec tout ce qu’il faut pour le développement frontend. Utilisation de SASS, automatisation des tâches chiantes (traitement des fichiers SASS par exemple) via des plugins gulp, affichage du contenu en temps réel via browsersync… Le tout fonctionne vraiment bien cependant il ne me convenait pas à 100%.

J’ai donc forké le dépôt et modifié l’ensemble afin qu’il convienne à ma façon de travailler sur mes intégrations front-end à savoir que j’utilise Bootstrap (version SASS) et jQuery (j’ai supprimé Normalize et HTML5 Boilerplate dans la manip), j’ai modifié le système de templating HTML (la découpe des fichiers html est gérée via le plugin gulp-file-include), les fichiers dev « traités » sont sauvegardés dans un dossier « dev » et j’ai fait 2/3 autres modifications que j’ai oublié de lister. En gros :

  • Toute la partie intégration se passe dans le dossier « app/ »
  • Une fois la commande « gulp » exécutée, tout bascule dans le dossier « dev/ », bootstrap et jQuery importés, vos pages html construites…
  • Browsersync vous affiche le résultat dans votre navigateur, un watcher est programmé sur l’ensemble des fichiers du dossier « app/ » de façon à ce que votre navigateur se rafraîchisse automatiquement à chaque modification.
  • Une fois votre intégration front-end terminée, vous pouvez exécuter la commande « gulp deploy ». Vous pourrez alors récupérer votre travail dans le dossier « dist/ ». La différence étant que vos fichiers css/js/images sont compressés et que l’ensemble des fichiers « classiques » sont également présents (robots.txt, sitemap…).

Il doit y avoir des trucs à corriger et/ou à améliorer, je corrigerai ça au fil du temps !

Vous trouverez le dépôt forké ici : https://github.com/matejicekme/frontend-toolbox

Installation (Windows)

  1. Installez node.js
  2. Installez Gulp et Bower : lancez l’invite de commandes et tapez « npm install -g gulp bower »
  3. Installez git
  4. Clonez le dépôt sur votre disque local : dans l’invite de commandes tapez « git clone https://github.com/matejicekme/frontend-toolbox »
  5. Rendez-vous dans le dossier ou le dépôt a été cloné et lancez la commande « npm install » puis « bower install ». La première commande va installer tous les plugins nécessaires (présents dans le dossier package.json) la seconde va importer bootstrap et jQuery dans votre projet.
  6. L’installation est terminée

Commandes gulp disponibles

Deux commandes sont disponibles :

  • En phase de développement, lancez simplement la commande « gulp ». Cette dernière exécutera les « watchers » qui se chargeront de traiter les fichiers du dossier « app/ » à chaque modification. Browsersync est également lancé.
  • Quand vous êtes prêt à déployer, exécutez la commande gulp deploy. Tous les fichiers seront copiés dans le dossier « dist/ ».

Comme indiqué précédemment, l’ensemble est basé sur le dépôt Harvest maintenu par un certain Ryan Benson, n’hésitez pas à aller voir son taff ;).

A propos de l'auteur

Jordan

Développeur javascript spécialisé dans le déploiement de solutions crossplatform, je suis CTO et associé chez Owlie, une petite startup Messine / Parisienne qui facilite l’innovation et le développement agile de solutions web & mobile créatives, robustes et performantes.

Laissez un commentaire