Même si aujourd’hui, les constructeurs de thèmes pour wordpress simplifient la création de sites, il suffit de se pencher sur le code source pour se faire une idée de la qualité générale du projet : on charge d’innombrables et inutiles ressources coté client et en général, seul 10% des fonctionnalités du « theme builder » sont utilisés.

Niveau optimisation SEO, le résultat est peu optimisé. Je ne suis vraiment pas fan et à part la rapidité de mise en place, je ne vois que des désavantages à utiliser des templates builders : les sites  produits n’ont véritablement aucune utilité / valeur ajoutée pour une société qui voudrait se faire une place sur le web.

C’est pourquoi, quand je prends en charge le développement d’un site WordPress pour l’un de mes clients, je crée toujours un thème dédié, en rajoutant en général des champs personnalisés et un plugin métier dédié en fonction de l’activité de mon client.

Je propose ainsi à mes clients des thèmes inédits, performants, avec un SEO facilement maintenables via des custom fields.

L’objectif de cet article, qui s’adresse aux intégrateurs et développeurs front-end WordPress, c’est :

  • Tirer parti de la puissance de gulp.js et de ses modules pour coder le front-end de notre template dans des conditions optimales.
  • Utiliser le préprocesseur SCSS
  • Optimiser les assets pour la mise en production (images, js, css, etc…)
  • Avoir une structure de thème propre et maintenable dans le temps !

 

Le fichier gulpfile.js :

var gulp = require('gulp');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var sourcemaps = require ('gulp-sourcemaps');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var imagemin = require('gulp-imagemin'); 
var cleanCSS = require('gulp-clean-css'); 
//var babel = require('gulp-babel');
var newer = require('gulp-newer');

gulp.task('optim_images', function( ) {
    
    gulp.src('_img/*')
        .pipe(newer('img'))
        .pipe(imagemin())
        .pipe(gulp.dest('img'));
     
});    
 
gulp.task('sass', function() {
  
    return gulp.src('_scss/style.scss')
            .pipe(sourcemaps.init())
            .pipe(sass())
            .on('error', function(err) {console.log(err.toString()); this.emit('end');})
            .pipe(sourcemaps.init({loadMaps: true}))
            .pipe(cleanCSS({rebase:false}))
            .pipe(sourcemaps.write('/maps'))
            .pipe(gulp.dest('css'))
            .pipe(reload({stream:true}));
});

gulp.task('scripts', function( ) { 
    return gulp.src('_js/*.js')
           .pipe(concat('all.js'))
           .pipe(gulp.dest('js'))
           .pipe(uglify())
           .pipe(gulp.dest('js'));
});
  

gulp.task('watch', function( ) { 
   
   gulp.watch('_js/*.js', ['scripts']);
   gulp.watch('_scss/*.scss', ['sass']);
   gulp.watch('_img/*',['optim_images']);
     
});

gulp.task('browser-sync', function( ) { 
    //watch files
    var files = [
    './css/style.css',
    './js/*.js',
    './*.php',
    './*.html'
    ];
 
    //initialize browsersync
    browserSync.init(files, {
    //browsersync with a php server
    browser: "chrome",
    proxy: "http://localhost/preprod.tsip/", 
    notify: false,
    port: 3004
    });
});

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

gulp.task('default', ['sass', 'optim_images','browser-sync'], function () {
    gulp.watch("_scss/*.scss", ['sass']);
    gulp.watch('_js/*.js', ['scripts']);
    gulp.watch('_img/*', ['optim_images']);
});
gulp.js

Suite en cours de rédaction… 🙂