Du code Wordpress

Automatisez vos mises à jour de code via FTP avec git + npm + gulp + vinyl-ftp .

L’idée principale derrière cette optimisation est se concentrer sur le code plutôt que des sur de problemes de synchronisation de code.

Il faudra bien entendu ajouter un .gitignore afin de ne pas inclure des informations de configuration.

Ce billet est le premier d’une série sur l’automatisation de mon process de production, sur l’automatisation de wordpress et l’adoption de gitlab.

GIT + NPM + GULP + VINYL-FTP = ❤️️

Git est un système de gestion de version imaginé par Linus Torvalds initialement crée pour gérer le noyaux de Linux. Il est très facile a prendre en main.

Pour l’installer, vous pouvez vous rendre sur cette page :

Git

NPM (pour node package manager) est — comme son nom l’indique — un système de gestion des packets pour node.js , il faut donc installer node.

Node.js

Vous pouvez ensuite vérifier votre version de node.js en ouvrant votre terminal et en tappant :

npm install npm@latest -g

Vous avez maintenant une installation à jour du package manager de node et git installé sur votre machine, mais il manque quelque chose, git étant un système de gestion de version décentralisé, il vous faut répertoire distant.

Afin de créer ce répertoire distant je vous conseille d’utiliser gitlab, qui permet d’avoir un nombre illimité de répertoires privés gratuitement.

De plus gitlab a des fonctions d’intégration continue et de déploiement continu qui pourraient nous êtres utiles par la suite, c’est donc une très bonne solution afin de l’intégrer avec travis-ci par exemple.

Rendez vous donc sur le site web de gitlab, créez un compte. et enfin un premier projet.

Pour créer pouvoir synchroniser votre code sur gitlab, il vous faut créer une clé SSH permettant au serveur de gitlab de vérifier que vous êtes bien celui qui modifie le code.

Pour générer une clé SSH, dans votre terminal, entrez la commande suivante :

ssh-keygen -t rsa -C “GitLab” -b 4096

Renseignez les infos demandées, vous pouvez renseigner un mot de passe, mais il vous sera demandé a chaque commit (synchronisation du code avec le serveur distant sur gitlab).

Ensuite, copiez cette clé SSH dans le presse papier :

pbcopy < ~/.ssh/id_rsa.pub

Et enfin, rendez vous sur gitlab afin de coller cette clé publique ici : https://gitlab.com/profile/keys

Une fois votre clé copié, le message stipulant que vous n’avez pas de clé ssh disparait et vous pourrer récupérer le code de votre projet.

git clone git@gitlab.com:<votre-nom-d’utilisateur/>/<votre-projet/>

Une fois le projet copié, placez vous dans le répertoire en tappant

cd <votre-projet/>

Puis initialisez npm

sudo npm init 

Rentrez les informations demandées (pour entry point et test command vous pouvez laissez vide) cela crée un fichier package.json

Installez npm au sein de votre projet

sudo npm install

Notre projet contient maintenant un repo Git, avec Npm.

Il faut donc ajouter Gulp et Vinyl-FTP

Gulp est un outil qui permet d’automatiser des taches en lançant une simple commande dans le terminal.

Vinyl-Ftp est un package qui permet de mettre à jour via ftp des fichiers.

Puis installez Gulp et les outils de gulp :

sudo npm install gulp-cli -g 
sudo npm install --save-dev gulp
sudo npm install gulp -D 
sudo npm install --save-dev gulp-util vinyl-ftp

créez un gulpfile.js

touch gulpfile.js

Pour écrire le gulpfile.js correspondant à votre configuration il vous suffit de copier le code suivant dans le fichier gulpfile.js

var gulp = require( 'gulp' );
var gutil = require( 'gulp-util' );
var ftp = require( 'vinyl-ftp' );

gulp.task( 'deploy', function () {
var conn = ftp.create( {
// Entrez vos informations ici 
host:     'mywebsite.tld', 
user:     'me',
password: 'mypass',
parallel: 10,
log:      gutil.log
} );
var globs = [
'src/**',
'css/**',
'js/**',
'fonts/**',
'index.html'
];
// using base = '.' will transfer everything to /public_html correctly
// turn off buffering in gulp.src for best performance
return gulp.src( globs, { base: '.', buffer: false } )
.pipe( conn.newer( '/public_html' ) ) // only upload newer files
.pipe( conn.dest( '/public_html' ) );
} );

Pour lancer le deploiement, ouvrez le temrinal et lancez la commande suivante

gulp deploy

Attendez que l’upload soit fini.

N’oubliez pas de mettre à jour votre code sur gitlab ;)

git add . 
git commit -m “votre message de commit”
git push -u origin master

Et voilà !