Codez plus efficacement avec Gulp
Voilà déjà un petit moment que j’utilise Gulp et que je voulais écrire un petit article. Le problème est que les sources que je souhaite proposer ne sont pas encore finalisées et que j’aimerai les mettre à jour. Mais bon si j’attends que tout soit à jour l’article n’apparaîtra pas avant Noël ! Voilà donc un article sur Gulp qui sera mis à jour ainsi que les sources qui évoluent au grès de mes projets.
Gulp et Bower amis des développeurs web frontend
Je ne vais pas entrer dans les détails car vous trouverez des infos sur le net à propos de Gulp et Bower. Concrètement, ce que ces outils m’apportent au quotidien : je développe plus rapidement et plus proprement.
Bower est un gestionnaire bien utile pour importer les librairies souvent utilisées pour le développement frontend : Bootstrap , Jquery, fontawesome en ce qui me concerne. Il suffit donc de rentrer les dépendances (nom de la librairie et la version) puis de faire lancer « bower install » et c’est bon on est prêt à commencer…enfin presque.
Gulp permet de réaliser des tâches comme la concaténation et la minification de vos fichiers Js / Css. Mais le gros plus de Gulp c’est BrowserSync. Il existe aussi Livereload mais je préfère le premier choix car Livereload recharge la page alors que BrowserSync injecte le css dans la page sans aucun rechargement. BrowserSync permet de développer en temps réel (what ?). En effet désormais quand je développe en Sass, Gulp compile mes fichiers en Css et BrowserSync les injecte dans mon navigateur sans que la page soit rechargée.
Exemple : je tape dans mon fichier .scss « body {color : $my-red-color;} » => dans mon navigateur le fond passe au rouge automatiquement sans aucune action de ma part.
Si je prend l’exemple d’un projet sur CMS avec Symfony2 où la page prend 2 ou 3 secondes à s’afficher en développement cela implique qu’à chaque ligne Sass écrite j’attends 2 ou 3 secondes.
Donc pour 200 lignes de code on passe pas loin de 10 minutes à attendre… quand on sait le nombre de lignes qu’on écrit/efface par jour je vous laisse faire les comptes…
L’inconvénient de Gulp est qu’il faut le mettre en place et que cela prend un peu de temps. Mais les ressources sur le net existent et je vous partage mon travail pour mettre en place Gulp sur différents type de projet. Un merci spécial àRémi Barraquand avec qui j’ai pu travailler sur Gulp et dont le travail m’a beaucoup servi pour mettre en place les architectures ci-dessous.
Prérequis : Pour installer Bower, Gulp et ses packages, il faut préalablement installer NodeJs.
Gulp et Symfony2
Quand on installe Symfony2 on commence naturellement avec Assetic et Less. Tout d’abord, si vous développez avec Less je vous conseille de commencer à considérer Sass en remplacement. Il ya beaucoup de raisons pour considérer Sass au lieu de Less (Sass vs Less dans Google…) pour ma part j’ai l’impression de générer moin de code. Bootstrap v4 a fait le même choix ce qui me conforte dans mon idée. Bien qu’initialement ces éléments semblent suffisants j’ai noté une certaine lenteur à développer le frontend sur une application importante utilisant notamment un CMS. Pour tous mes projets j’utilise désormais Gulp. Voici les sources qui me servent de base pour un projet. Ces sources ne sont pas finalisées mais fonctionnent en l’état. Il manque notamment la dissociation d’une tâche pour le développement en dev et pour la prod. Je tacherai de les mettre à jour rapidement.
Présentation de l’architecture
Dans ce projet on retrouve donc le fichier gulpefile.js qui contient les tâches automatisées telles que la compilation de fichiers Sass en fichiers Css et la mise en place de browserSync. Le fichier gulp.json contient la configuration. Dans src/ on retrouve un exemple de AppBundle qui permet de définir une structure de base utilisable dans votre projet. La tâche principale pour compiler vos fichiers, ouvrir un navigateur synchronisé avec browserSync est « gulp serve:dev » .
Pour plus de détails ou si vous avez des questions n’hésitez pas à me les poser.
Site internet ou maquette Html5
Sources : https://github.com/fundup/Templating-Front-End-Stack
Lorsqu’on réalise une maquette Html pour une démo ou bien que l’on développe un site simple comme mon site web uniquement en Html avec éventuellement quelques pages php, on est souvent tenté de faire basic c’est à dire notepad++, un fichier html, un fichier css et let’s go. Le résultat est bien souvent un projet non maintenable sur la durée et de la duplication de code. Une solution : Gulp et Swig. Swig est l’équivalent de twig (php) mais pour javascript. Une fois de plus le projet est utilisable mais pas terminé. Le premier point qu’il faut que je corrige c’est de retirer l’utilisation de Stylus (faut bien essayer des choses) au profit de Sass.
L’objectif du projet est de compiler vos sources dans un dossier dist/ qui inclura les fichiers html , les Css minifiés et les fichiers Js prêts à être envoyés sur votre serveur.
Fonctionnement
Au niveau de vos sources, Swig vous permet d’utiliser la fonction bien utile « extend » qui vous permet de définir un layout et de l’étendre (pas mal si vous avez plusieurs pages) ainsi que la fonction « include » qui permet d’inclure des portions d’Html. Swig permet également d’utiliser des variables renseignées dans un fichier Json.
Le peu de configuration est en début de gulpefile.js. La tâche principale à lancer est « gulp ».
Gulp et wordpress
Sources : https://github.com/fundup/wordpress-gulp-bower-sass
J’ai toujours juré ne jamais faire de wordpress. Enfin j’ai rien juré mais pour moi wordpress n’était pas du développement mais uniquement un amas de fichiers entassés qui permettent à des non développeurs de mettre en place des sites internet (non je ne parlerai pas des agences web qui se disent créateurs de sites internet et qui savent tous juste mettre un thème en place !). Pour moi les seuls CMS viables étant ceux basés sur un framework ( voir cet article). Forcé de constater que la demande wordpress est forte et constatant qu’on pouvait développer des sites simples assez rapidement je m’y suis mis malgré moi. Mais pas question de faire n’importe quoi n’importe comment !
Ma conception d’un Thème WordPress
Règle numéro 1 : faire light, ne pas inclure 35 plugins comme dans tous les thèmes que l’on trouve. Cela évite des sites lents ne dépassant pas les 25/100 sur google page speed !
Règle numéro 2 : ne pas coder sur des fichiers entassés non minifiés etc. Et pour cela la solution s’appelle une fois de plus Gulp. Le projet est un fork que j’ai amélioré (selon mes besoins) en ajoutant bootstrap 3 et en modifiant un peu la gestion des librairies externes. La documentation initiale faisant à peu près le job je passe les détails. Si vous avez des questions une fois de plus n’hésitez pas à me les poser.
Codez plus rapidement et plus proprement
Tous est dans le titre de ma conclusion. Tous les projets que je vous présente sont là pour vous aider à démarrer. A vous de les améliorer et/ou de me faire part de vos suggestions. Un autre plugin disponible sur les principaux IDE et pour moi indispensable pour le développement frontend : http://emmet.io/ .
A vos commentaires, merci de votre lecture.
