Travaillant sur un projet nécessitant la création de plusieurs landing pages et de micro-sites one-page, j'ai mis en place un ficher Gulp pour automatiser différentes tâches rébarbatives en développement front-end. J'en ai fait un boilerplate disponible sur GitHub.

Pourquoi utiliser un task runner

Ma stack habituelle pour ce genre de travaux tourne plutôt autour de Ruby et Middleman. Ce dernier dispose de nombreux plugins pour automatiser les tâches orientées front-end et permet donc de se passer d'un task runner comme Gulp.

Middleman était un bon candidat mais j'avais besoin d'une solution un peu plus véloce, concernant notament la compilation des CSS et le refresh navigateur. J'ai donc choisi Gulp qui, avec sa myriade de plugins, me permet de couvrir mes besoins.

Si vous n'avez aucune idée de ce qu'est Gulp, je vous invite à lire cet article de putain de code ! qui vous expliquera en détail de quoi il s'agit.

Il y a quoi dans le Gulpfile

Mes besoins sont les suivants :

  • Pendant le développement : un langage de template à la Slim parce qu'une fois habitué c'est dur de revenir en arrière, la compilation, concaténation et minification des fichiers CSS et JavaScript et un affichage navigateur qui se rafraichit quand les fichiers changent. L'accès à un fichier data contenant les données à inclure dans la page.
  • Pour la production : les mêmes tâches plus un nettoyage du fichier CSS final et une optimisation automatique des images.

Le templating avec Jade

Quitte à être dans l'univers JS, autant choisir un langage de template en rapport. Comme je suis habitué à la syntaxe de Slim, c'est tout naturellement que Jade à trouvé sa place dans le Gulpfile.js.

Browser Sync, what else ?

J'utilise habituellement LiveReload qui est inclut dans l'installation de Middleman mais ce dernier souffre parfois de quelques lenteurs et dans le cadre d'intégrations avec pas mal de boulot niveau responsive Browser Sync se montre diablement efficace!

Les datas

Le contenu des pages est créé par quelqu'un qui n'est pas très tech-savvy et cherchant un moyen de faciliter les échanges et les mises à jour, il s'est avéré que le plus simple soit de mettre le contenu dans un bon vieux fichier Excel.

Le fichier Excel est ensuite converti en JSON grâce à Mr Data Converter. Il existe un plugin Gulp pour ça mais Mr Data Converter permet d'examiner rapidement la sortie et d'adapter en fonction.

Le données de database.json peut ensuite être appelé dans la page en conservant la séparation du contenu et du template.

Installation et utilisation

J'ai crée un dépôt GitHub qui contient la structure de dossiers utilisée dans le Gulpfile, structure que j'utilise dans mes projets Middleman et qui est calquée sur celle de Ruby On Rails.

Cloner le dépôt :

 
git clone https://github.com/SamuelBourdon/gulp-jade.git your_project

Installer les modules Node :

npm install

Les 3 commandes Gulp :

gulp : démarre une session de BrowserSync compile les fichiers Jade, CSS et JavaScript.

gulp prod : à utiliser en fin de développement pour générer le build final avec les optimisations pour les CSS et les images.

gulp clean: qui efface le dossier build/ si besoin.

Les choses manquantes

Il manque encore une chose dans ce Gulpfile c'est la conversion de d'icônes svg en iconfont. Il existe bien sur un plugin pour ça mais étant en pleine réflexion suite à la conférence de @iamvdo à la kiwi party 2015, je ne l'ai pas ajouté.

Article précédent : Dynamiser un site statique Middleman avec AngularJS

Je suis disponible pour des missions longues / CDD / CDI Cliquez pour en savoir plus