Environnement de travail front-end

Introduction

Chez Kiubi, nous vous donnons accès à tous les templates de votre thème graphiques via un accès FTP dédié. La configuration d'un logiciel tiers pour récupérer et déposer des fichiers peut être fastidieux et s'intègre mal aux environnements de developpement front-end qu'on utilise de nos jours.

C'est pour cela que nous avons développé kiubi-sync, un module npm qui facilite la récupération et la publications de vos fichiers sur Kiubi. Ce tutoriel va vous guider à travers son installation, sa configuration et son intégration au task runner Gulp. Le but final est de se préparer un environnement de travail qui va automatiquement publier pour nous toutes les modifications qu'on va effectuer sur le thème graphique.

Avant de commencer ce tutoriel, il est nécessaire d'avoir ouvert un site Kiubi et l'avoir basculé en thème graphique personnalisé. Nous partons également du principe que vous avez installé une version à jour de Node et de Git sur votre ordinateur.

Pour les experts qui veulent tester l'environnement de travail sans passer par toutes les étapes de mises en place, rendez vous dans la section TL;DR. A noter également que les sources du module sont disponibles sur Github et qu'on acceuillera avec plaisir vos contributions.

Mise en place

Un bon premier réflèxe est de créer un dépôt GIT qui va nous permettre d'archiver toutes les modifications faites sur le thème. Pour cela, ouvrez votre terminal, créez un dossier et initialisez le dépôt à l'intérieur. On en profite également pour initialiser npm et enfin installer tous les autres modules nécessaires.

$ git init
$ npm init
$ npm install --save-dev gulp kiubi-sync
$ npm install --global gulp-cli
$ echo 'node_modules/' >> .gitignore

Il s'agit maintenant de configurer le module avec les identifiants de connection FTP du site. Pour cela créez un fichier config.json à la racine du dépôt. Et comme il va contenir des informations confidentielles, il doit être exclus des fichiers versionnés.

$ touch config.json
$ echo 'config.json' >> .gitignore

Modifiez ce fichier pour y ajouter la structure JSON suivante avec vos identifiants FTP que vous pouvez obtenir en vous connectant à votre console d'administration puis en allant dans la section : Thème graphique > Accès aux templates.

{
    "user": "kiubi-xxxx",
    "password": "yyyyyyyyyyyyy"
}

Il est temps de créer les tâches Gulp qui vont piloter des actions spécifiques du module kiubi-sync. Elles sont définies par convention dans le fichier gulpfile.js

$ touch gulpfile.js
On obtiendra trois commandes qu'on pourra lancer dans son terminal :
  • "pull" : pour télécharger les fichiers du theme graphique
  • "deploy" : pour mettre à jour le thème
  • "watch" : pour surveiller les modifications des fichiers locaux et les répliquer dans son espace FTP
Modifiez le fichier gulpfile.js pour y ajouter le code suivant :

const { watch } = require('gulp');
const kSync = require('kiubi-sync');
const config = require('./config.json');

const sync = new kSync({
    user: config.user,
    password: config.password,
});

function pullTask() {
    return sync.pullAll('theme');
}

function deployTask() {
    return sync.pushAll('theme');
}

function watchTask() {
    sync.watch(watch('theme/**', { events: 'all' }));
}

exports.pull = pullTask;
exports.deploy = deployTask;
exports.watch = watchTask;

Pou rendre la configuration plus portable, il est possible de référencer les tâches comme des scripts npm. Pour cela, modifiez l'entrée "scripts" du fichier package.json :

{
    ...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "gulp watch --silent",
    "pull": "gulp pull",
    "deploy": "gulp deploy"
  },
  ...
}

Il est temps de tester tout ça avec un "pull" qui va télécharger dans le répertoire theme tous les fichiers du thème graphique présents dans votre espace FTP.

$ npm run pull
[10:42:50] Starting 'pull'...
< theme/theme.xml
....
Transert de 8.80MiB en 99 sec
[10:44:29] Finished 'pull' after 1.63 min

Et voilà ! C'est téléchargé. Tous ces efforts méritent bien un premier commit.

$ git add .
$ git commit -m 'Commit inital'

Il est maintentant possible de travailler et de modifier les fichiers du thème localement. Pour travailler au fil de l'eau et publier les modifications locales au fur et à mesure, il suffit de lancer la commande :

$ npm run watch

La commande va rester active en arrière plan et Gulp va avertir à partir de ce moment là le module kiubi-sync de toutes les modifications de fichiers du thème (ajouts, suppressions ou modifications), ce qui va entraîner le lancement en arrière-plan des commandes FTP nécessaires pour publier ou supprimer les fichiers distants correspondants. Une fois votre travail fini, la commande s'arrête en tapant un Ctrl+C.

Enfin, pour écraser tous les fichiers distant en une fois, il suffit de lancer la commande :

$ npm run deploy

Il est dorénavant possible d'éditer son code avec l'IDE de son choix, qu'il possède ou non un module de connection FTP : toute cette partie là est gérée automatiquement par le module kiubi-sync.

Bonus : automatisation

La puissance d'un task runner vient aussi de sa capacité à automatiquer des traitements sur les fichiers. Il existe tout un ecosystème de modules npm qui peuvent optimiser, minifier, préprocesser vos fichiers HTML, CSS et JS. Nous allons voir en bonus comment automatiser la génération et la publication de ces traitements.

Pour l'exemple, nous allons choisir d'automatiser la minification et la fusion des fichiers CSS et JS du thème "Lux" fournit par Kiubi. Ce thème comporte un essemble de fichiers CSS présent dans /theme/fr/assets/css/ qui sont minifiés et fusionnés dans la fichier compact.min.css. De même pour les fichiers JS présents dans /theme/fr/assets/js/ qui sont minifiés et fusionnées dans compact.min.js.

Pour cela nous aurons besoin de modules npm complémentaires :

$ npm install --save-dev gulp-minify gulp-concat gulp-clean-css

Nous allons créer une nouvelle tâche "compress", composée d'une partie pour le traitement JS et une autre pour le traitement CSS. Il faut modifier le fichier gulpfiles.js pour importer plus de fonctions du module Gulp ainsi que les modules fraîchements installés :

const { watch, src, pipe, dest, parallel, series } = require('gulp');
const minify = require('gulp-minify');
const concat = require('gulp-concat');
const cleanCSS = require('gulp-clean-css');

Deux nouvelles fonctions vont indiquer à Gulp comment fusionner les fichiers CSS et JS et où enregistrer le résultat. C'est bien sûr à adapter à votre thème graphique, mais cela va donner quelque chose comme :

function compressJS() {
    return src([
        'jquery-3.2.1.min.js',
        'moment-with-locales.min.js',
        'bootstrap-datetimepicker.min.js',
        'lightbox.min.js',
        'owl.carousel.min.js',
        'easyzoom.min.js',
        'jarallax.min.js',
        'js.cookie.min.js',
        'underscore-min.js',
        'kiubi.js'
    ], {cwd:'theme/fr/assets/js'})
    .pipe(minify({
        ignoreFiles: ['*.min.js']
    }))
    .pipe(concat('compact.min.js'))
    .pipe(dest('theme/fr/assets/js'))
}

function compressCSS() {
    return src([
        'feather.css',
        'lightbox.min.css',
        'owl.carousel.min.css',
        'bootstrap-datetimepicker.min.css',
        'aos.min.css',
    ], {cwd:'theme/fr/assets/css'})
    .pipe(cleanCSS())
    .pipe(concat('compact.min.css'))
    .pipe(dest('theme/fr/assets/css'))
}

Enfin, la tâche "compress" elle-même, qui va lancer en parallèle les deux fonctions. Comme elles agissent sur des lots de fichiers bien distincts, il n'est pas nécessaire de les lancer l'une après l'autre, on gagne ainsi un peu de rapidité d'exécution.

exports.compress = parallel(compressJS, compressCSS);

On peut maintenant tester rapidement la compression en appellant directement la tâche Gulp :

$ gulp compress
[12:12:56] Starting 'compress'...
[12:12:56] Starting 'compressJS'...
[12:12:56] Starting 'compressCSS'...
[12:12:56] Finished 'compressCSS' after 39 ms
[12:12:57] Finished 'compressJS' after 589 ms
[12:12:57] Finished 'compress' after 591 ms

Pour ne pas à avoir à lancer cette tâche à la main à chaque modification des fichiers CSS et JS, nous allons intégrer cette tâche aux deux autres tâches "watch" et "deploy". La modification la plus simple est pour la tâche "deploy". Il suffit d'indiquer à Gulp de lancer la compression et ensuite de déployer les fichiers :

exports.deploy = series(parallel(compressJS, compressCSS), deployTask);

Maintenant, on voit bien les tâches de compression se lancer avant le déploiement :

$ npm run deploy
[12:21:05] Starting 'deploy'...
[12:21:05] Starting 'compressJS'...
[12:21:05] Starting 'compressCSS'...
[12:21:05] Finished 'compressCSS' after 34 ms
[12:21:05] Finished 'compressJS' after 549 ms
[12:21:05] Starting 'deployTask'...
> theme/theme.xml
...
Transert de 8.77MiB en 103 sec
[12:22:47] Finished 'deployTask' after 1.7 min
[12:22:47] Finished 'deploy' after 1.7 min

Pour la commande "watch", on va modifier la fonction watchTask pour demander à Gulp de surveiller spécifiquement les fichiers JS et CSS et de lancer les compressions au besoin.

function watchTask() {
    sync.watch(watch('theme/**', { events: 'all' }));

    watch(
        ['theme/fr/assets/js/*.js', '!theme/fr/assets/js/compact.min.js'], 
        { events: 'change' }, 
        compressJS
    );
    watch(
        ['theme/fr/assets/css/*.css', '!theme/fr/assets/css/compact.min.css'], 
        { events: 'change' }, 
        compressCSS
    );
}

Ainsi, quand par exemple un fichier CSS est modifié, kiubi-sync le publie sur le serveur distant puis Gulp compresse les fichiers CSS et produit un nouveau fichier compact.min.css. Cette modification est réinterceptée par kiubi-sync qui va également publier ce fichier sur le serveur distant. Au final, les fichiers sources et les versions compressés sont publiées automatiquement !

$ npm run watch
Publication des modifications...
> theme/fr/assets/css/custom.css
Transert de 19.74KiB en 1 sec
Publication des modifications...
> theme/fr/assets/css/compact.min.css
Transert de 50.64KiB en 1 sec

Le fichier guylpfile.js contentant toutes les étapes de ce tuto est disponible dans le dépot github.

TL;DR

Pour un déploiement express de cet environnement de travail, bonus compris, vous pouvez récupérer les fichiers suivants et les déposer dans un dossier de votre choix :

Pour initaliser toutes les dépendances :

$ npm install

Il n'y a plus qu'à renseignez vos identifiants FTP dans le fichier config.json et récupérer le thème avec la commande :

$ npm run pull

Et pour initier la synchronisation automatique et commencer à travailler sur le thème :

$ npm run watch