Nouveau site internet, dernière partie

March 2016

html5 gulpjs hugo

Une partie intéressante de hugo, c’est la mise en place des fichiers générés. Pour ça j’utilise une technique très basique, une simple copie de fichiers via rsync au travers d’openssh.

J’utilise pour me simplifier la vie un fichier Makefile dans les sources de mon site:

all: gulp hugo

hugo:
    .go/bin/hugo -s src/

gulp:
    ./node_modules/.bin/gulp build

upload: all
    rsync -r --delete src/public/ ed@ed.zehome.com:www/ed.zehome.com/

.PHONY: hugo gulp upload

La partie qui nous intéresse c’est upload qui dépend de gulp et hugo.

Donc pour lancer l’upload:

make upload

Gulpjs

Gulp est un système de construction écrit en javascript pour nodejs.

Il est similaire à grunt que j’utilise aussi, mais cette fois j’ai décidé d’utiliser quelque chose d’autre. Gulp à l’avantage de pouvoir en très peu de lignes décrire un pipeline de tâches à executer selon des déclencheurs.

Par exemple, pour mon site, j’ai besoin de recompiler les fichiers .less de bootstrap avec mes modifications, puis de les copier dans les répertoires de source qu’attend Hugo.

var gulp = require('gulp');
var less = require('gulp-less');
var path = require('path');

var scripts = [
    path.join(__dirname, 'node_modules/bootstrap/dist/js/bootstrap.min.js'),
    path.join(__dirname, 'node_modules/jquery/dist/jquery.min.js'),
];

gulp.task('watch', ['build:styles'], function() {
    gulp.watch(['src/static/less/**/*.less'], ['build:styles', ]);
});

gulp.task('build', ['build:styles', 'build:js']);

gulp.task('build:js', function() {
    return gulp.src(scripts)
        .pipe(gulp.dest('src/static/js/'));
});

gulp.task('build:styles', function () {
    return gulp.src('src/static/less/**/*.less')
        .pipe(less({
            paths: [path.join(__dirname, 'node_modules', 'bootstrap', 'less')]
        }))
        .pipe(gulp.dest('src/static/css'));
});

gulp.task('default', ['watch']);

Ce fichier source me permet de lancer par défaut une tâche qui réagit lorsqu’un fichier source est modifié (tout fichier src/statc/less/*.less) et lancer la tâche “build:less”.

Les fichiers arrivent alors uen fois la compilation réalisée dans src/static/css.

Gérer l’environnement

Avec ces nouveaux projets, il faut souvent utiliser des binaires externe au système d’exploitation et donc gérer l’environnement qui leur est nécessaire.

Par exemple, il faut rajouter les binaires installés par npm et par go dans le PATH.

J’utilise ZSH qui offre une fonctionnalité permettant d’executer du code lorsque le chemin courrant du shell change. (lorsque vous faites cd blabla/)

Voici ce que ça donne: Attention cela peut être dangeureux d’utiliser ce snippet. Si vous ne comprenez pas complètement ce que vous faites, ne l’utilisez PAS.

function chpwd {
    # Go modules in .go
    if [ -d .go/bin ]; then
        export GOPATH=$(readlink -f .go)
        export PATH=$PATH:$(readlink -f .go/bin)
    fi
    if [ -d node_modules/.bin ]; then
        export NPMPATH=$(readlink -f node_modules)
        export PATH=$PATH:$(readlink -f node_modules/.bin)
    fi
}

Cette fonction est très incomplète et simplifiée pour les besoins de la démonstration mais globalement, chaque fois que vous entrez dans un répertoire contenant un répertoire .go/bin GOPATH sera défini de PATH sera ajusté. De même pour node_modules/.bin.