Fedora-Fr - Communauté francophone Fedora - Linux

Planet de Fedora-Fr : la communauté francophone autour de la distribution Linux Fedora

A propos

Cette page est actualisée toutes les heures.

Cette page est une sélection de blogs autour de Fedora. Fedora-Fr.org décline toute responsabilité au sujet des propos tenus par les auteurs des blogs de ce planet. Leurs propos sont leur entière responsabilité.

Le contenu de ce planet appartient à leurs auteurs respectifs. Merci de consulter leur blogs pour obtenir les licences respectives.

Mot-clefs : Développement

Data URIs VS CSS Sprites

Guillaume Kulakowski

J'ai profité de la sortie de la branche 2.7 de Dotclear et de l'arrivée de Twig comme moteur de template pour faire quelques modifications sur le blog :

  • Migration vers des templates utilisant la syntaxe Twig et utilisation au maximum de l'héritage (la killer feature de Twig !).
  • Utilisation encore plus massive de Less.
  • Mise à jour des librairies JS et CSS (merci Bower).
  • Suppression des sprites CSS pour utiliser des images en data URI au sein de mes CSS.

Et c'est sur ce dernier point que je souhaitais discourir...

Les sprites CSS c'est bien... mais c'est chi**t !!!

En effet, les sprites CSS c'est bien pour les performances web client side (notamment : Minimize HTTP Requests & Preload Components). Le problème, c'est que c'est chi**t à manipuler ! Il existe des générateurs de sprites, mais ce n'est pas la panacée. Bilan : j'y réfléchi à 2 fois avant de changer une image et dans certains cas il est même obligatoire de mixer plusieurs images sprites (sur des background-repeat bien complexes).

Data URI, L'alternative ?

La solution alternative c'est d'utiliser des data URIs, c'est à dire de mettre le code base64 de l'image directement dans la CSS (où une CSS séparée). Vous me direz que faire un sprite CSS ou faire un base64 c'est aussi pénible et je vous répondrais oui... Si on travaille en pure CSS ! Mais si on utilise Less (et c'est surement aussi possible en Sass) il y a une fonction qui fait ça automatiquement !

Y a-t-il que des avantages ?

Malheureusement non.

  • Un fichier CSS avec du base64 pèse 25% (10% si on utilise compression gzip) de plus qu'un sprite.
  • Les data URI's ne sont pas supportées par IE6/7 (ça je m'en fous un peu :-)).
  • Les performances sont quelques peu en dessous d'un sprite.

En conclusion

J'ai déjà pas mal optimisé mon site, le fait de passer par data-uri me permet de :

  • Réduire le poids général de ma CSS (j'embarquais déjà quelques data-uri que je viens de délocaliser dans une CSS à part).
  • Pouvoir rapidement faire évoluer mon image sprites (retirer les images inutiles par exemple) et gagner en time to market.

Bref : adopté !

Passage d'Eclipse à Netbeans

Guillaume Kulakowski

Après des années et des années de bons et loyaux services, j'ai décidé d'arrêter d'utiliser Eclipse.

Les raisons sont multiples :

  • Eclipse est de plus en plus lourd alors que la mode est aux IDE de plus en plus légers (SublimeText, Atom.io, etc...).
  • Je ne fais plus de Java depuis longtemps. J'ai besoin d'un IDE qui permette de faire du web (CSS, HTML, JS, Less, etc...), PHP, Node, Ruby, shell. Or Eclipse devient de plus en plus inadapté pour cela.
  • J'ai besoin d'un IDE avec une thème dark. Alors sous Linux pas de problème, mais au travail, sous Windows (sniff), je n'ai jamais pu avoir de thème dark sans un détourage désagréable des icônes.

C'est pour toutes ces raisons que j'ai souhaité changer de crèmerie. Mais je n'étais pas prêt pour passer à un truc trop light, je suis donc allé chercher la solution d'en face : Netbeans. Alors ne nous emballons pas, avec Netbeans tout n'est pas rose :

  • Netbeans permet d'avoir une syntaxe par langage, mais ça veut direz coder tous les frameworks PHP de la même façon... Du Drupal et du Symfony2, ça ne se code pas pareil (hélas).
  • Le plugin GIT est simple et efficace mais un peu trop simple quand même.

Mais il y a des trucs qui sont en train de me devenir indispensables :

  • Terminal intégré nativement.
  • Plugin Vagrant.
  • Stack d'outils PHP qui fonctionnent sans PEAR.
  • Support de Composer, NPM, Bower et du Less out-of-the-box.

Après avoir changé le moteur, j'ai également changé la carrosserie :

Et voici le résultat :

Netbeans.png

Koschei : intégration continue de la pile PHP dans Fedora

Remi Collet

L'intégration Continue est une préoccupation naturelle de tous développeurs.

La plupart des projets utilisent des outils comme Travis (disponible sous github.com). PHP dispose de sa propre suite de tests. Cela permet de vérifier que les modifications apportées au code source n'apportent pas de régression.

Cela semble suffisant pour une projet, mais pour la "pile PHP" dans sont ensemble, il faut pouvoir :

  • vérifier que la mise à jour d'une dépendance ne casse pas les projets l'utilisant
  • vérifier que la mise à jour de PHP n'entraine pas de régression dans les projets, dès les Release Candidate (les versions de PHP disponibles dans travis/github sont souvent en retard)
  • vérifier que les modifications liés au packaging ne cassent rien

Le projet Koschei permet de répondre à ces besoins en supervisant les mises à jour dans rawhide (la branche développement de Fedora) et en déclenchant une construction à blanc de tous les paquets dépendants.

Comme de nombreux outils et bibliothèques sont disponibles dans Fedora, nous les avons ajoutés pour qu'ils soient surveillés, en particulier :

  • PHP (uniquement la version 5.6 pour l'instant)
  • PHPUnit et toutes ses dépendances
  • Symfony
  • Doctrine
  • Horde
  • etc

Adresse de l'instance : http://koschei.cloud.fedoraproject.org/

Ce nouvel outil aurait pu nous permettre de détecter au plus tôt les régressions introduites dans PHP version 5.4.29 et 5.5.13. Je prévois donc d'importer les prochaines Release Candidate au plus tôt afin de bénéficier de l'outil.

Par exemple, il vient de permettre de détecter un FTBFS de symfony suite à la mise à jour de PHPUnit 4.2.0 (il s'agissait d'un problème spécifique au paquet et déjà corrigé).

Évidement, il est donc nécessaire de disposer de suite de test pour chaque projet et de les exécuter lors de la construction des paquets, mais cela fait, depuis longtemps, partie des bonnes pratiques.

Nous verrons à l'avenir comment l'outil se comporte, mais je pense qu'il apporte un vrai progrès pour l'intégration continue de l'ensemble de la pile PHP.

Il s'agit aussi et surtout d'un outil dont les résultats doivent bénéficier à chaque projet, prouvant l'utilité de la collaboration inter-projets (upstream / downstream), et donnant encore plus d'intérêt, pour chaque projet, à être intégré dans une distribution comme Fedora.

Grunt, Bower, LESS & Bootstrap

Guillaume Kulakowski
Dans mon dernier billet, j'avais évoqué mon engouement pour Bower, une solution de gestion de dépendances web. J'avais alors regretté le fait de ne pas pouvoir exécuter des tâches post-installation afin de retravailler la version distribuée de Bootstrap pour lalléger (comme on peut le faire ici). Comme j'en avais émis l'idée dans ce même billet, j'ai entrepris de ne plus utiliser Bower directement mais de lutiliser au travers de Grunt.

grunt-bower.png

Si vous ne connaissez pas encore Grunt, il s'agit d'un ordonnanceur au même titre que Maven, ant, ou encore Phing, mais basé sur nodejs et utilisant une syntaxe JavaScript.

Installation de Bower & Grunt sous Fedora 20

Après avoir installé nodejs et npm via yum, il faudra installer Bower et Grunt avec npm. En effet, Bower est absent des dépôts Fedora et Grunt est bien disponible mais sans grunt-cli, ce qui en enlève tout lintérêt...

sudo yum install npm -y
sudo npm install bower grunt grunt-cli -g

Notez au passage le fait que l'on fasse l'installation avec l'option -g pour avoir Grunt et Bower installés au niveau du système (/usr/lib/node_modules). Les autres installations se feront toujours à l'aide de npm mais sans cette option. Ceci permet de tout avoir à la racine du projet web, dans un répertoire node_modules (qu'il faudra exclure de la gestion de sources).

Voila, maintenant on rajoute un fichier packages.json et on installe les dépendances avec un npm install :

{
  "name": "Boldy",
  "version": "1.1.2",
  "description": "The Boldy theme for Dotclear",
  "repository": {
    "type": "git",
  },
  "author": "Guillaume Kulakowski",
  "homepage": "http://www.llaumgui.com",
  "devDependencies": {
    "bower": "latest",
    "grunt": "~0.4.2",
    "grunt-contrib-uglify": "latest",
    "grunt-contrib-concat": "latest",
    "grunt-contrib-less": "latest",
    "grunt-bower-task": "latest",
    "grunt-contrib-watch": "latest"
    "grunt-contrib-cssmin": "latest"
  }
}

J'ai maintenant un environnement de travail avec Bower et Grunt ainsi que les plugins nécessaires à mon projet.

Le fichier Gruntfile.js

La configuration des tâches Grunt passe par le fichier Gruntfile.js, j'ai mis le mien et vais en détailler les tâches :

module.exports = function(grunt) {
  'use strict';
 
  // Force use of Unix newlines
  grunt.util.linefeed = '\n';
 
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    bowerrc: grunt.file.readJSON('.bowerrc'),
 
    // Path configuration from Gruntfile.js
    dirs: {
      'vendor': '<%= bowerrc.directory %>',
      'bootstrap': {
        'js': '<%= dirs.vendor %>/bootstrap/js',
        'less': '<%= dirs.vendor %>/bootstrap/less'
      },
      'css': 'css',
      'less': 'less',
      'js': 'js'
    },
 
    src: {
      output: {
        'bootstrap': {
          'js': '<%= dirs.vendor %>/bootstrap/my/js/bootstrap.js',
          'css': '<%= dirs.vendor %>/bootstrap/my/css/bootstrap.css'
        },
        'boldy': {
          css: {
            'screen': '<%= dirs.css %>/screen.css',
            'indefero': '<%= dirs.css %>/indefero.css'
          },
          js: '<%= dirs.js %>/global.js'
        }
      },
 
      input: {
        bootstrap: {
          'js': [
            '<%= dirs.bootstrap.js %>/dropdown.js',
            '<%= dirs.bootstrap.js %>/tooltip.js',
            '<%= dirs.bootstrap.js %>/collapse.js',
            '<%= dirs.bootstrap.js %>/transition.js',
            '<%= dirs.bootstrap.js %>/carousel.js'
          ],
          'less': [
            '<%= dirs.less %>/bootstrap.less'
          ]
        },
        indefero: '<%= dirs.css %>/indefero.src.css',
        less: '<%= dirs.less %>/boldy_boot.less',
        js: [
          '<%= dirs.vendor %>/jquery-cookie/jquery.cookie.js',
          '<%= src.output.bootstrap.js %>',
          '<%= dirs.vendor %>/scroll-to-top/jquery.scrollToTop.min.js',
          '<%= dirs.js %>/js/post.js',
          '<%= dirs.vendor %>/async-gravatars/async-gravatars.js',
          '<%= dirs.vendor %>/jquery-colorbox/jquery.colorbox-min.js',
          '<%= dirs.vendor %>/nwxforms/src/nwxforms.js',
          '<%= dirs.js %>/boldy.js'
        ]
      },
    },
 
    // Banner
    banner: '/*!\n' +
              ' * Boldy for Dotclear v<%= pkg.version %>\n' +
              ' * Original theme by Site5 (http://www.s5themes.com)\n' +
              ' * Under a GPLv2 http://www.gnu.org/licenses/gpl-2.0.txt\n' +
              ' * Ported on Dotclear by <%= pkg.author %> (<%= pkg.homepage %>)\n' +
              ' * Copyright 2012-<%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
              ' */',
 
 
 
    /********************************** Task **********************************/
    // Bower
    bower: {
      install: {
        options: {
          targetDir: '<%= dirs.vendor %>',
          cleanTargetDir: true,
          layout: 'byComponent',
          install: true,
          copy: false,
          verbose: true
        }
      }
    },
 
 
    // Concatenation
    concat: {
      bootstrap: {
        src: '<%= src.input.bootstrap.js %>',
        dest: '<%= src.output.bootstrap.js %>'
      },
    },
 
 
    // LESS
    less: {
      boldy: {
        options: {
          compress: true,
          cleancss: true,
          report: 'gzip',
          strictImports: true,
        },
        files: { '<%= src.output.boldy.css.screen %>': '<%= src.input.less %>'},
      },
      boldy_debug: {
          options: {
            compress: false,
            cleancss: false,
            report: 'none',
            strictImports: true,
          },
          files: { '<%= src.output.boldy.css.screen %>': '<%= src.input.less %>'},
      },
      bootstrap: {
        files: { '<%= src.output.bootstrap.css %>': '<%= src.input.bootstrap.less %>'}
      }
    },
 
 
    // Watcher
    watch: {
      boldy: {
        files: ['less/*.less'],
        tasks: ['less:boldy_debug'],
        options: {
          spawn: false,
        },
      },
    },
 
 
    // CSSmin
    cssmin: {
      boldy: {
        options: {
          report: 'gzip',
          banner: '<%= banner %>'
        },
        files: {
          '<%= src.output.boldy.css.indefero %>': '<%= src.input.indefero %>'
        }
      }
    },
 
 
    // Uglify
    uglify: {
      boldy: {
        options: {
          report: 'gzip',
          banner: '<%= banner %>'
        },
        files: {
          '<%= src.output.boldy.js %>': '<%= src.input.js %>',
        }
      }
    }
 
  });
 
 
  // Load plugins
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-bower-task');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
 
 
  // Callable tasks
  grunt.registerTask('default', ['boldy', 'cssmin', 'concat:bootstrap', 'uglify']);
  grunt.registerTask('w', ['watch:boldy']);
 
  grunt.registerTask('bootstrap', ['concat:bootstrap', 'less:bootstrap']);
  grunt.registerTask('boldy', ['less:boldy']);
 
  grunt.registerTask('full', ['bower', 'bootstrap', 'default']);
  grunt.registerTask('all', ['full']); // Alias
};

Tâche bower

Via le plugin grunt-bower-task.

Cette tâche est là pour exécuter Bower au travers de Grunt, notez que le plugin n'interprète pas le .bowerrc, je l'ai donc chargé moi même (bowerrc: grunt.file.readJSON('.bowerrc')) afin de passer les mêmes options à la tâche Grunt qu'à Bower.

Tâche Bootstrap

Via les plugins grunt-contrib-less & grunt-contrib-concat.

Le but de cette tâche est de ne pas utiliser la version distribuée de Bootstrap mais de reconstruire ma propre version. Pour celà,

  • je reconstruis le JavaScript à partir des sources et du plugin concat,
  • je recompile les CSS à partir d'une version allégée du bootstrap.less :
/* -- BEGIN LICENSE BLOCK ---------------------------------------
# This file is part of Boldy, a theme for Dotclear
#
# Theme by Site5 (http://www.s5themes.com)
# under a GPLv2 http://www.gnu.org/licenses/gpl-2.0.txt
# Ported on Dotclear by Guillaume Kulakowski (http://www.llaumgui.com)
#
# -- END LICENSE BLOCK ----------------------------------------- */
 
// Core variables and mixins
@import "../vendor/bootstrap/less/variables.less";
@import "../vendor/bootstrap/less/mixins.less";
 
// My override
@import "bootstrap_variables.less";
//@import "bootstrap_mixins.less";
 
// Reset
@import "../vendor/bootstrap/less/normalize.less";
@import "../vendor/bootstrap/less/print.less";
 
// Core CSS
@import "../vendor/bootstrap/less/scaffolding.less";
@import "../vendor/bootstrap/less/type.less";
@import "../vendor/bootstrap/less/code.less";
@import "../vendor/bootstrap/less/grid.less";
//@import "../vendor/bootstrap/less/tables.less";
@import "../vendor/bootstrap/less/forms.less";
@import "../vendor/bootstrap/less/buttons.less";
 
// Components
@import "../vendor/bootstrap/less/component-animations.less";
//@import "../vendor/bootstrap/less/glyphicons.less";
@import "../vendor/bootstrap/less/dropdowns.less";
//@import "../vendor/bootstrap/less/button-groups.less";
//@import "../vendor/bootstrap/less/input-groups.less";
@import "../vendor/bootstrap/less/navs.less";
@import "../vendor/bootstrap/less/navbar.less";
//@import "../vendor/bootstrap/less/breadcrumbs.less";
@import "../vendor/bootstrap/less/pagination.less";
@import "../vendor/bootstrap/less/pager.less";
//@import "../vendor/bootstrap/less/labels.less";
//@import "../vendor/bootstrap/less/badges.less";
//@import "../vendor/bootstrap/less/jumbotron.less";
@import "../vendor/bootstrap/less/thumbnails.less";
@import "../vendor/bootstrap/less/alerts.less";
//@import "../vendor/bootstrap/less/progress-bars.less";
//@import "../vendor/bootstrap/less/media.less";
@import "../vendor/bootstrap/less/list-group.less";
@import "../vendor/bootstrap/less/panels.less";
@import "../vendor/bootstrap/less/wells.less";
//@import "../vendor/bootstrap/less/close.less";
 
// Components w/ JavaScript
//@import "../vendor/bootstrap/less/modals.less";
@import "../vendor/bootstrap/less/tooltip.less";
//@import "../vendor/bootstrap/less/popovers.less";
@import "../vendor/bootstrap/less/carousel.less";
 
// Utility classes
@import "../vendor/bootstrap/less/utilities.less";
@import "../vendor/bootstrap/less/responsive-utilities.less";

Remarquez que j'utilise mes propres variables après celles de Bootstrap afin de les écraser et de modifier Bootstrap directement à la source.

Tâche Boldy

Via les plugins grunt-contrib-uglify, grunt-contrib-less & grunt-contrib-cssmin.

Comme en recompilant Bootstrap à partir des sources LESS j'ai adhéré au concept de LESS, j'ai réécrit le thème de mon blog en LESS.

Cette tâche boldy sert donc :

  • à générer le CSS minifié à partir des sources LESS (grunt-contrib-less),
  • à minifier la CSS pour mon thème indefero qui reste en CSS (grunt-contrib-cssmin),
  • et à minifier les Javascripts (grunt-contrib-uglify).

Tâche watch

Via le plugin grunt-contrib-watch.

Pour compiler du LESS en CSS, il y a 2 méthodes.

  • soit passer par le less.js qui va parser en JS les fichiers LESS à chaque chargement de page (2 à 3 secondes pour mon blog),
  • soit passer par une tâche watch dans Grunt, qui va écouter les modifications sur les fichiers LESS et recompiler un CSS.

C'est cette dernière solution que j'ai retenu et donc c'est à cela que sert la tâche watch.

En conclusion

Pour conclure, je dirais que la mise en place de ces outils (surtout pour la première fois) est certes chronophage, mais une fois que ça tourne, pour mettre à jour les libs (Bootstrap, jQuery, etc.), une seule ligne de commande suffit (grunt full). De plus, une fois Grunt et Bower en place (et maîtrisés), passer de CSS à LESS a été super simple.

Pour finir, je regrette presque que nodejs n'ait pas été inclus dans Fedora plus tôt car il propose de formidables outils indispensables aux développeurs (front) web.

Et pour voir ce que ça donne, une petite vidéo:

Grunt, Bower, LESS & Bootstrap

Guillaume Kulakowski
Dans mon dernier billet, j'avais évoqué mon engouement pour Bower, une solution de gestion de dépendances web. J'avais alors regretté le fait de ne pas pouvoir exécuter des tâches post-installation afin de retravailler la version distribuée de Bootstrap pour lalléger (comme on peut le faire ici). Comme j'en avais émis l'idée dans ce même billet, j'ai entrepris de ne plus utiliser Bower directement mais de lutiliser au travers de Grunt.

grunt-bower.png

Si vous ne connaissez pas encore Grunt, il s'agit d'un ordonnanceur au même titre que Maven, ant, ou encore Phing, mais basé sur nodejs et utilisant une syntaxe JavaScript.

Installation de Bower & Grunt sous Fedora 20

Après avoir installé nodejs et npm via yum, il faudra installer Bower et Grunt avec npm. En effet, Bower est absent des dépôts Fedora et Grunt est bien disponible mais sans grunt-cli, ce qui en enlève tout lintérêt...

sudo yum install npm -y
sudo npm install bower grunt grunt-cli -g

Notez au passage le fait que l'on fasse l'installation avec l'option -g pour avoir Grunt et Bower installés au niveau du système (/usr/lib/node_modules). Les autres installations se feront toujours à l'aide de npm mais sans cette option. Ceci permet de tout avoir à la racine du projet web, dans un répertoire node_modules (qu'il faudra exclure de la gestion de sources).

Voila, maintenant on rajoute un fichier packages.json et on installe les dépendances avec un npm install :

{
  "name": "Boldy",
  "version": "1.1.2",
  "description": "The Boldy theme for Dotclear",
  "repository": {
    "type": "git",
  },
  "author": "Guillaume Kulakowski",
  "homepage": "http://www.llaumgui.com",
  "devDependencies": {
    "bower": "latest",
    "grunt": "~0.4.2",
    "grunt-contrib-uglify": "latest",
    "grunt-contrib-concat": "latest",
    "grunt-contrib-less": "latest",
    "grunt-bower-task": "latest",
    "grunt-contrib-watch": "latest"
    "grunt-contrib-cssmin": "latest"
  }
}

J'ai maintenant un environnement de travail avec Bower et Grunt ainsi que les plugins nécessaires à mon projet.

Le fichier Gruntfile.js

La configuration des tâches Grunt passe par le fichier Gruntfile.js, j'ai mis le mien et vais en détailler les tâches :

module.exports = function(grunt) {
  'use strict';
 
  // Force use of Unix newlines
  grunt.util.linefeed = '\n';
 
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    bowerrc: grunt.file.readJSON('.bowerrc'),
 
    // Path configuration from Gruntfile.js
    dirs: {
      'vendor': '<%= bowerrc.directory %>',
      'bootstrap': {
        'js': '<%= dirs.vendor %>/bootstrap/js',
        'less': '<%= dirs.vendor %>/bootstrap/less'
      },
      'css': 'css',
      'less': 'less',
      'js': 'js'
    },
 
    src: {
      output: {
        'bootstrap': {
          'js': '<%= dirs.vendor %>/bootstrap/my/js/bootstrap.js',
          'css': '<%= dirs.vendor %>/bootstrap/my/css/bootstrap.css'
        },
        'boldy': {
          css: {
            'screen': '<%= dirs.css %>/screen.css',
            'indefero': '<%= dirs.css %>/indefero.css'
          },
          js: '<%= dirs.js %>/global.js'
        }
      },
 
      input: {
        bootstrap: {
          'js': [
            '<%= dirs.bootstrap.js %>/dropdown.js',
            '<%= dirs.bootstrap.js %>/tooltip.js',
            '<%= dirs.bootstrap.js %>/collapse.js',
            '<%= dirs.bootstrap.js %>/transition.js',
            '<%= dirs.bootstrap.js %>/carousel.js'
          ],
          'less': [
            '<%= dirs.less %>/bootstrap.less'
          ]
        },
        indefero: '<%= dirs.css %>/indefero.src.css',
        less: '<%= dirs.less %>/boldy_boot.less',
        js: [
          '<%= dirs.vendor %>/jquery-cookie/jquery.cookie.js',
          '<%= src.output.bootstrap.js %>',
          '<%= dirs.vendor %>/scroll-to-top/jquery.scrollToTop.min.js',
          '<%= dirs.js %>/js/post.js',
          '<%= dirs.vendor %>/async-gravatars/async-gravatars.js',
          '<%= dirs.vendor %>/jquery-colorbox/jquery.colorbox-min.js',
          '<%= dirs.vendor %>/nwxforms/src/nwxforms.js',
          '<%= dirs.js %>/boldy.js'
        ]
      },
    },
 
    // Banner
    banner: '/*!\n' +
              ' * Boldy for Dotclear v<%= pkg.version %>\n' +
              ' * Original theme by Site5 (http://www.s5themes.com)\n' +
              ' * Under a GPLv2 http://www.gnu.org/licenses/gpl-2.0.txt\n' +
              ' * Ported on Dotclear by <%= pkg.author %> (<%= pkg.homepage %>)\n' +
              ' * Copyright 2012-<%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
              ' */',
 
 
 
    /********************************** Task **********************************/
    // Bower
    bower: {
      install: {
        options: {
          targetDir: '<%= dirs.vendor %>',
          cleanTargetDir: true,
          layout: 'byComponent',
          install: true,
          copy: false,
          verbose: true
        }
      }
    },
 
 
    // Concatenation
    concat: {
      bootstrap: {
        src: '<%= src.input.bootstrap.js %>',
        dest: '<%= src.output.bootstrap.js %>'
      },
    },
 
 
    // LESS
    less: {
      boldy: {
        options: {
          compress: true,
          cleancss: true,
          report: 'gzip',
          strictImports: true,
        },
        files: { '<%= src.output.boldy.css.screen %>': '<%= src.input.less %>'},
      },
      boldy_debug: {
          options: {
            compress: false,
            cleancss: false,
            report: 'none',
            strictImports: true,
          },
          files: { '<%= src.output.boldy.css.screen %>': '<%= src.input.less %>'},
      },
      bootstrap: {
        files: { '<%= src.output.bootstrap.css %>': '<%= src.input.bootstrap.less %>'}
      }
    },
 
 
    // Watcher
    watch: {
      boldy: {
        files: ['less/*.less'],
        tasks: ['less:boldy_debug'],
        options: {
          spawn: false,
        },
      },
    },
 
 
    // CSSmin
    cssmin: {
      boldy: {
        options: {
          report: 'gzip',
          banner: '<%= banner %>'
        },
        files: {
          '<%= src.output.boldy.css.indefero %>': '<%= src.input.indefero %>'
        }
      }
    },
 
 
    // Uglify
    uglify: {
      boldy: {
        options: {
          report: 'gzip',
          banner: '<%= banner %>'
        },
        files: {
          '<%= src.output.boldy.js %>': '<%= src.input.js %>',
        }
      }
    }
 
  });
 
 
  // Load plugins
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-bower-task');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
 
 
  // Callable tasks
  grunt.registerTask('default', ['boldy', 'cssmin', 'concat:bootstrap', 'uglify']);
  grunt.registerTask('w', ['watch:boldy']);
 
  grunt.registerTask('bootstrap', ['concat:bootstrap', 'less:bootstrap']);
  grunt.registerTask('boldy', ['less:boldy']);
 
  grunt.registerTask('full', ['bower', 'bootstrap', 'default']);
  grunt.registerTask('all', ['full']); // Alias
};

Tâche bower

Via le plugin grunt-bower-task.

Cette tâche est là pour exécuter Bower au travers de Grunt, notez que le plugin n'interprète pas le .bowerrc, je l'ai donc chargé moi même (bowerrc: grunt.file.readJSON('.bowerrc')) afin de passer les mêmes options à la tâche Grunt qu'à Bower.

Tâche Bootstrap

Via les plugins grunt-contrib-less & grunt-contrib-concat.

Le but de cette tâche est de ne pas utiliser la version distribuée de Bootstrap mais de reconstruire ma propre version. Pour celà,

  • je reconstruis le JavaScript à partir des sources et du plugin concat,
  • je recompile les CSS à partir d'une version allégée du bootstrap.less :
/* -- BEGIN LICENSE BLOCK ---------------------------------------
# This file is part of Boldy, a theme for Dotclear
#
# Theme by Site5 (http://www.s5themes.com)
# under a GPLv2 http://www.gnu.org/licenses/gpl-2.0.txt
# Ported on Dotclear by Guillaume Kulakowski (http://www.llaumgui.com)
#
# -- END LICENSE BLOCK ----------------------------------------- */
 
// Core variables and mixins
@import "../vendor/bootstrap/less/variables.less";
@import "../vendor/bootstrap/less/mixins.less";
 
// My override
@import "bootstrap_variables.less";
//@import "bootstrap_mixins.less";
 
// Reset
@import "../vendor/bootstrap/less/normalize.less";
@import "../vendor/bootstrap/less/print.less";
 
// Core CSS
@import "../vendor/bootstrap/less/scaffolding.less";
@import "../vendor/bootstrap/less/type.less";
@import "../vendor/bootstrap/less/code.less";
@import "../vendor/bootstrap/less/grid.less";
//@import "../vendor/bootstrap/less/tables.less";
@import "../vendor/bootstrap/less/forms.less";
@import "../vendor/bootstrap/less/buttons.less";
 
// Components
@import "../vendor/bootstrap/less/component-animations.less";
//@import "../vendor/bootstrap/less/glyphicons.less";
@import "../vendor/bootstrap/less/dropdowns.less";
//@import "../vendor/bootstrap/less/button-groups.less";
//@import "../vendor/bootstrap/less/input-groups.less";
@import "../vendor/bootstrap/less/navs.less";
@import "../vendor/bootstrap/less/navbar.less";
//@import "../vendor/bootstrap/less/breadcrumbs.less";
@import "../vendor/bootstrap/less/pagination.less";
@import "../vendor/bootstrap/less/pager.less";
//@import "../vendor/bootstrap/less/labels.less";
//@import "../vendor/bootstrap/less/badges.less";
//@import "../vendor/bootstrap/less/jumbotron.less";
@import "../vendor/bootstrap/less/thumbnails.less";
@import "../vendor/bootstrap/less/alerts.less";
//@import "../vendor/bootstrap/less/progress-bars.less";
//@import "../vendor/bootstrap/less/media.less";
@import "../vendor/bootstrap/less/list-group.less";
@import "../vendor/bootstrap/less/panels.less";
@import "../vendor/bootstrap/less/wells.less";
//@import "../vendor/bootstrap/less/close.less";
 
// Components w/ JavaScript
//@import "../vendor/bootstrap/less/modals.less";
@import "../vendor/bootstrap/less/tooltip.less";
//@import "../vendor/bootstrap/less/popovers.less";
@import "../vendor/bootstrap/less/carousel.less";
 
// Utility classes
@import "../vendor/bootstrap/less/utilities.less";
@import "../vendor/bootstrap/less/responsive-utilities.less";

Remarquez que j'utilise mes propres variables après celles de Bootstrap afin de les écraser et de modifier Bootstrap directement à la source.

Tâche Boldy

Via les plugins grunt-contrib-uglify, grunt-contrib-less & grunt-contrib-cssmin.

Comme en recompilant Bootstrap à partir des sources LESS j'ai adhéré au concept de LESS, j'ai réécrit le thème de mon blog en LESS.

Cette tâche boldy sert donc :

  • à générer le CSS minifié à partir des sources LESS (grunt-contrib-less),
  • à minifier la CSS pour mon thème indefero qui reste en CSS (grunt-contrib-cssmin),
  • et à minifier les Javascripts (grunt-contrib-uglify).

Tâche watch

Via le plugin grunt-contrib-watch.

Pour compiler du LESS en CSS, il y a 2 méthodes.

  • soit passer par le less.js qui va parser en JS les fichiers LESS à chaque chargement de page (2 à 3 secondes pour mon blog),
  • soit passer par une tâche watch dans Grunt, qui va écouter les modifications sur les fichiers LESS et recompiler un CSS.

C'est cette dernière solution que j'ai retenu et donc c'est à cela que sert la tâche watch.

En conclusion

Pour conclure, je dirais que la mise en place de ces outils (surtout pour la première fois) est certes chronophage, mais une fois que ça tourne, pour mettre à jour les libs (Bootstrap, jQuery, etc.), une seule ligne de commande suffit (grunt full). De plus, une fois Grunt et Bower en place (et maîtrisés), passer de CSS à LESS a été super simple.

Pour finir, je regrette presque que nodejs n'ait pas été inclus dans Fedora plus tôt car il propose de formidables outils indispensables aux développeurs (front) web.

Et pour voir ce que ça donne, une petite vidéo:

Grunt, Bower, LESS & Bootstrap

Guillaume Kulakowski
Dans mon dernier billet, j'avais évoqué mon engouement pour Bower, une solution de gestion de dépendances web. J'avais alors regretté le fait de ne pas pouvoir exécuter des tâches post-installation afin de retravailler la version distribuée de Bootstrap pour lalléger (comme on peut le faire ici). Comme j'en avais émis l'idée dans ce même billet, j'ai entrepris de ne plus utiliser Bower directement mais de lutiliser au travers de Grunt.

grunt-bower.png

Si vous ne connaissez pas encore Grunt, il s'agit d'un ordonnanceur au même titre que Maven, ant, ou encore Phing, mais basé sur nodejs et utilisant une syntaxe JavaScript.

Installation de Bower & Grunt sous Fedora 20

Après avoir installé nodejs et npm via yum, il faudra installer Bower et Grunt avec npm. En effet, Bower est absent des dépôts Fedora et Grunt est bien disponible mais sans grunt-cli, ce qui en enlève tout lintérêt...

sudo yum install npm -y
sudo npm install bower grunt grunt-cli -g

Notez au passage le fait que l'on fasse l'installation avec l'option -g pour avoir Grunt et Bower installés au niveau du système (/usr/lib/node_modules). Les autres installations se feront toujours à l'aide de npm mais sans cette option. Ceci permet de tout avoir à la racine du projet web, dans un répertoire node_modules (qu'il faudra exclure de la gestion de sources).

Voila, maintenant on rajoute un fichier packages.json et on installe les dépendances avec un npm install :

{
  "name": "Boldy",
  "version": "1.1.2",
  "description": "The Boldy theme for Dotclear",
  "repository": {
    "type": "git",
  },
  "author": "Guillaume Kulakowski",
  "homepage": "http://www.llaumgui.com",
  "devDependencies": {
    "bower": "latest",
    "grunt": "~0.4.2",
    "grunt-contrib-uglify": "latest",
    "grunt-contrib-concat": "latest",
    "grunt-contrib-less": "latest",
    "grunt-bower-task": "latest",
    "grunt-contrib-watch": "latest"
    "grunt-contrib-cssmin": "latest"
  }
}

J'ai maintenant un environnement de travail avec Bower et Grunt ainsi que les plugins nécessaires à mon projet.

Le fichier Gruntfile.js

La configuration des tâches Grunt passe par le fichier Gruntfile.js, j'ai mis le mien et vais en détailler les tâches :

module.exports = function(grunt) {
  'use strict';
 
  // Force use of Unix newlines
  grunt.util.linefeed = '\n';
 
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    bowerrc: grunt.file.readJSON('.bowerrc'),
 
    // Path configuration from Gruntfile.js
    dirs: {
      'vendor': '<%= bowerrc.directory %>',
      'bootstrap': {
        'js': '<%= dirs.vendor %>/bootstrap/js',
        'less': '<%= dirs.vendor %>/bootstrap/less'
      },
      'css': 'css',
      'less': 'less',
      'js': 'js'
    },
 
    src: {
      output: {
        'bootstrap': {
          'js': '<%= dirs.vendor %>/bootstrap/my/js/bootstrap.js',
          'css': '<%= dirs.vendor %>/bootstrap/my/css/bootstrap.css'
        },
        'boldy': {
          css: {
            'screen': '<%= dirs.css %>/screen.css',
            'indefero': '<%= dirs.css %>/indefero.css'
          },
          js: '<%= dirs.js %>/global.js'
        }
      },
 
      input: {
        bootstrap: {
          'js': [
            '<%= dirs.bootstrap.js %>/dropdown.js',
            '<%= dirs.bootstrap.js %>/tooltip.js',
            '<%= dirs.bootstrap.js %>/collapse.js',
            '<%= dirs.bootstrap.js %>/transition.js',
            '<%= dirs.bootstrap.js %>/carousel.js'
          ],
          'less': [
            '<%= dirs.less %>/bootstrap.less'
          ]
        },
        indefero: '<%= dirs.css %>/indefero.src.css',
        less: '<%= dirs.less %>/boldy_boot.less',
        js: [
          '<%= dirs.vendor %>/jquery-cookie/jquery.cookie.js',
          '<%= src.output.bootstrap.js %>',
          '<%= dirs.vendor %>/scroll-to-top/jquery.scrollToTop.min.js',
          '<%= dirs.js %>/js/post.js',
          '<%= dirs.vendor %>/async-gravatars/async-gravatars.js',
          '<%= dirs.vendor %>/jquery-colorbox/jquery.colorbox-min.js',
          '<%= dirs.vendor %>/nwxforms/src/nwxforms.js',
          '<%= dirs.js %>/boldy.js'
        ]
      },
    },
 
    // Banner
    banner: '/*!\n' +
              ' * Boldy for Dotclear v<%= pkg.version %>\n' +
              ' * Original theme by Site5 (http://www.s5themes.com)\n' +
              ' * Under a GPLv2 http://www.gnu.org/licenses/gpl-2.0.txt\n' +
              ' * Ported on Dotclear by <%= pkg.author %> (<%= pkg.homepage %>)\n' +
              ' * Copyright 2012-<%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
              ' */',
 
 
 
    /********************************** Task **********************************/
    // Bower
    bower: {
      install: {
        options: {
          targetDir: '<%= dirs.vendor %>',
          cleanTargetDir: true,
          layout: 'byComponent',
          install: true,
          copy: false,
          verbose: true
        }
      }
    },
 
 
    // Concatenation
    concat: {
      bootstrap: {
        src: '<%= src.input.bootstrap.js %>',
        dest: '<%= src.output.bootstrap.js %>'
      },
    },
 
 
    // LESS
    less: {
      boldy: {
        options: {
          compress: true,
          cleancss: true,
          report: 'gzip',
          strictImports: true,
        },
        files: { '<%= src.output.boldy.css.screen %>': '<%= src.input.less %>'},
      },
      boldy_debug: {
          options: {
            compress: false,
            cleancss: false,
            report: 'none',
            strictImports: true,
          },
          files: { '<%= src.output.boldy.css.screen %>': '<%= src.input.less %>'},
      },
      bootstrap: {
        files: { '<%= src.output.bootstrap.css %>': '<%= src.input.bootstrap.less %>'}
      }
    },
 
 
    // Watcher
    watch: {
      boldy: {
        files: ['less/*.less'],
        tasks: ['less:boldy_debug'],
        options: {
          spawn: false,
        },
      },
    },
 
 
    // CSSmin
    cssmin: {
      boldy: {
        options: {
          report: 'gzip',
          banner: '<%= banner %>'
        },
        files: {
          '<%= src.output.boldy.css.indefero %>': '<%= src.input.indefero %>'
        }
      }
    },
 
 
    // Uglify
    uglify: {
      boldy: {
        options: {
          report: 'gzip',
          banner: '<%= banner %>'
        },
        files: {
          '<%= src.output.boldy.js %>': '<%= src.input.js %>',
        }
      }
    }
 
  });
 
 
  // Load plugins
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-bower-task');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
 
 
  // Callable tasks
  grunt.registerTask('default', ['boldy', 'cssmin', 'concat:bootstrap', 'uglify']);
  grunt.registerTask('w', ['watch:boldy']);
 
  grunt.registerTask('bootstrap', ['concat:bootstrap', 'less:bootstrap']);
  grunt.registerTask('boldy', ['less:boldy']);
 
  grunt.registerTask('full', ['bower', 'bootstrap', 'default']);
  grunt.registerTask('all', ['full']); // Alias
};

Tâche bower

Via le plugin grunt-bower-task.

Cette tâche est là pour exécuter Bower au travers de Grunt, notez que le plugin n'interprète pas le .bowerrc, je l'ai donc chargé moi même (bowerrc: grunt.file.readJSON('.bowerrc')) afin de passer les mêmes options à la tâche Grunt qu'à Bower.

Tâche Bootstrap

Via les plugins grunt-contrib-less & grunt-contrib-concat.

Le but de cette tâche est de ne pas utiliser la version distribuée de Bootstrap mais de reconstruire ma propre version. Pour celà,

  • je reconstruis le JavaScript à partir des sources et du plugin concat,
  • je recompile les CSS à partir d'une version allégée du bootstrap.less :
/* -- BEGIN LICENSE BLOCK ---------------------------------------
# This file is part of Boldy, a theme for Dotclear
#
# Theme by Site5 (http://www.s5themes.com)
# under a GPLv2 http://www.gnu.org/licenses/gpl-2.0.txt
# Ported on Dotclear by Guillaume Kulakowski (http://www.llaumgui.com)
#
# -- END LICENSE BLOCK ----------------------------------------- */
 
// Core variables and mixins
@import "../vendor/bootstrap/less/variables.less";
@import "../vendor/bootstrap/less/mixins.less";
 
// My override
@import "bootstrap_variables.less";
//@import "bootstrap_mixins.less";
 
// Reset
@import "../vendor/bootstrap/less/normalize.less";
@import "../vendor/bootstrap/less/print.less";
 
// Core CSS
@import "../vendor/bootstrap/less/scaffolding.less";
@import "../vendor/bootstrap/less/type.less";
@import "../vendor/bootstrap/less/code.less";
@import "../vendor/bootstrap/less/grid.less";
//@import "../vendor/bootstrap/less/tables.less";
@import "../vendor/bootstrap/less/forms.less";
@import "../vendor/bootstrap/less/buttons.less";
 
// Components
@import "../vendor/bootstrap/less/component-animations.less";
//@import "../vendor/bootstrap/less/glyphicons.less";
@import "../vendor/bootstrap/less/dropdowns.less";
//@import "../vendor/bootstrap/less/button-groups.less";
//@import "../vendor/bootstrap/less/input-groups.less";
@import "../vendor/bootstrap/less/navs.less";
@import "../vendor/bootstrap/less/navbar.less";
//@import "../vendor/bootstrap/less/breadcrumbs.less";
@import "../vendor/bootstrap/less/pagination.less";
@import "../vendor/bootstrap/less/pager.less";
//@import "../vendor/bootstrap/less/labels.less";
//@import "../vendor/bootstrap/less/badges.less";
//@import "../vendor/bootstrap/less/jumbotron.less";
@import "../vendor/bootstrap/less/thumbnails.less";
@import "../vendor/bootstrap/less/alerts.less";
//@import "../vendor/bootstrap/less/progress-bars.less";
//@import "../vendor/bootstrap/less/media.less";
@import "../vendor/bootstrap/less/list-group.less";
@import "../vendor/bootstrap/less/panels.less";
@import "../vendor/bootstrap/less/wells.less";
//@import "../vendor/bootstrap/less/close.less";
 
// Components w/ JavaScript
//@import "../vendor/bootstrap/less/modals.less";
@import "../vendor/bootstrap/less/tooltip.less";
//@import "../vendor/bootstrap/less/popovers.less";
@import "../vendor/bootstrap/less/carousel.less";
 
// Utility classes
@import "../vendor/bootstrap/less/utilities.less";
@import "../vendor/bootstrap/less/responsive-utilities.less";

Remarquez que j'utilise mes propres variables après celles de Bootstrap afin de les écraser et de modifier Bootstrap directement à la source.

Tâche Boldy

Via les plugins grunt-contrib-uglify, grunt-contrib-less & grunt-contrib-cssmin.

Comme en recompilant Bootstrap à partir des sources LESS j'ai adhéré au concept de LESS, j'ai réécrit le thème de mon blog en LESS.

Cette tâche boldy sert donc :

  • à générer le CSS minifié à partir des sources LESS (grunt-contrib-less),
  • à minifier la CSS pour mon thème indefero qui reste en CSS (grunt-contrib-cssmin),
  • et à minifier les Javascripts (grunt-contrib-uglify).

Tâche watch

Via le plugin grunt-contrib-watch.

Pour compiler du LESS en CSS, il y a 2 méthodes.

  • soit passer par le less.js qui va parser en JS les fichiers LESS à chaque chargement de page (2 à 3 secondes pour mon blog),
  • soit passer par une tâche watch dans Grunt, qui va écouter les modifications sur les fichiers LESS et recompiler un CSS.

C'est cette dernière solution que j'ai retenu et donc c'est à cela que sert la tâche watch.

En conclusion

Pour conclure, je dirais que la mise en place de ces outils (surtout pour la première fois) est certes chronophage, mais une fois que ça tourne, pour mettre à jour les libs (Bootstrap, jQuery, etc.), une seule ligne de commande suffit (grunt full). De plus, une fois Grunt et Bower en place (et maîtrisés), passer de CSS à LESS a été super simple.

Pour finir, je regrette presque que nodejs n'ait pas été inclus dans Fedora plus tôt car il propose de formidables outils indispensables aux développeurs (front) web.

Et pour voir ce que ça donne, une petite vidéo:

Grunt, Bower, LESS & Bootstrap

Guillaume Kulakowski
Dans mon dernier billet, j'avais évoqué mon engouement pour Bower, une solution de gestion de dépendances web. J'avais alors regretté le fait de ne pas pouvoir exécuter des tâches post-installation afin de retravailler la version distribuée de Bootstrap pour lalléger (comme on peut le faire ici). Comme j'en avais émis l'idée dans ce même billet, j'ai entrepris de ne plus utiliser Bower directement mais de lutiliser au travers de Grunt.

grunt-bower.png

Si vous ne connaissez pas encore Grunt, il s'agit d'un ordonnanceur au même titre que Maven, ant, ou encore Phing, mais basé sur nodejs et utilisant une syntaxe JavaScript.

Installation de Bower & Grunt sous Fedora 20

Après avoir installé nodejs et npm via yum, il faudra installer Bower et Grunt avec npm. En effet, Bower est absent des dépôts Fedora et Grunt est bien disponible mais sans grunt-cli, ce qui en enlève tout lintérêt...

sudo yum install npm -y
sudo npm install bower grunt grunt-cli -g

Notez au passage le fait que l'on fasse l'installation avec l'option -g pour avoir Grunt et Bower installés au niveau du système (/usr/lib/node_modules). Les autres installations se feront toujours à l'aide de npm mais sans cette option. Ceci permet de tout avoir à la racine du projet web, dans un répertoire node_modules (qu'il faudra exclure de la gestion de sources).

Voila, maintenant on rajoute un fichier packages.json et on installe les dépendances avec un npm install :

{
  "name": "Boldy",
  "version": "1.1.2",
  "description": "The Boldy theme for Dotclear",
  "repository": {
    "type": "git",
  },
  "author": "Guillaume Kulakowski",
  "homepage": "http://www.llaumgui.com",
  "devDependencies": {
    "bower": "latest",
    "grunt": "~0.4.2",
    "grunt-contrib-uglify": "latest",
    "grunt-contrib-concat": "latest",
    "grunt-contrib-less": "latest",
    "grunt-bower-task": "latest",
    "grunt-contrib-watch": "latest"
    "grunt-contrib-cssmin": "latest"
  }
}

J'ai maintenant un environnement de travail avec Bower et Grunt ainsi que les plugins nécessaires à mon projet.

Le fichier Gruntfile.js

La configuration des tâches Grunt passe par le fichier Gruntfile.js, j'ai mis le mien et vais en détailler les tâches :

module.exports = function(grunt) {
  'use strict';
 
  // Force use of Unix newlines
  grunt.util.linefeed = '\n';
 
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    bowerrc: grunt.file.readJSON('.bowerrc'),
 
    // Path configuration from Gruntfile.js
    dirs: {
      'vendor': '<%= bowerrc.directory %>',
      'bootstrap': {
        'js': '<%= dirs.vendor %>/bootstrap/js',
        'less': '<%= dirs.vendor %>/bootstrap/less'
      },
      'css': 'css',
      'less': 'less',
      'js': 'js'
    },
 
    src: {
      output: {
        'bootstrap': {
          'js': '<%= dirs.vendor %>/bootstrap/my/js/bootstrap.js',
          'css': '<%= dirs.vendor %>/bootstrap/my/css/bootstrap.css'
        },
        'boldy': {
          css: {
            'screen': '<%= dirs.css %>/screen.css',
            'indefero': '<%= dirs.css %>/indefero.css'
          },
          js: '<%= dirs.js %>/global.js'
        }
      },
 
      input: {
        bootstrap: {
          'js': [
            '<%= dirs.bootstrap.js %>/dropdown.js',
            '<%= dirs.bootstrap.js %>/tooltip.js',
            '<%= dirs.bootstrap.js %>/collapse.js',
            '<%= dirs.bootstrap.js %>/transition.js',
            '<%= dirs.bootstrap.js %>/carousel.js'
          ],
          'less': [
            '<%= dirs.less %>/bootstrap.less'
          ]
        },
        indefero: '<%= dirs.css %>/indefero.src.css',
        less: '<%= dirs.less %>/boldy_boot.less',
        js: [
          '<%= dirs.vendor %>/jquery-cookie/jquery.cookie.js',
          '<%= src.output.bootstrap.js %>',
          '<%= dirs.vendor %>/scroll-to-top/jquery.scrollToTop.min.js',
          '<%= dirs.js %>/js/post.js',
          '<%= dirs.vendor %>/async-gravatars/async-gravatars.js',
          '<%= dirs.vendor %>/jquery-colorbox/jquery.colorbox-min.js',
          '<%= dirs.vendor %>/nwxforms/src/nwxforms.js',
          '<%= dirs.js %>/boldy.js'
        ]
      },
    },
 
    // Banner
    banner: '/*!\n' +
              ' * Boldy for Dotclear v<%= pkg.version %>\n' +
              ' * Original theme by Site5 (http://www.s5themes.com)\n' +
              ' * Under a GPLv2 http://www.gnu.org/licenses/gpl-2.0.txt\n' +
              ' * Ported on Dotclear by <%= pkg.author %> (<%= pkg.homepage %>)\n' +
              ' * Copyright 2012-<%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
              ' */',
 
 
 
    /********************************** Task **********************************/
    // Bower
    bower: {
      install: {
        options: {
          targetDir: '<%= dirs.vendor %>',
          cleanTargetDir: true,
          layout: 'byComponent',
          install: true,
          copy: false,
          verbose: true
        }
      }
    },
 
 
    // Concatenation
    concat: {
      bootstrap: {
        src: '<%= src.input.bootstrap.js %>',
        dest: '<%= src.output.bootstrap.js %>'
      },
    },
 
 
    // LESS
    less: {
      boldy: {
        options: {
          compress: true,
          cleancss: true,
          report: 'gzip',
          strictImports: true,
        },
        files: { '<%= src.output.boldy.css.screen %>': '<%= src.input.less %>'},
      },
      boldy_debug: {
          options: {
            compress: false,
            cleancss: false,
            report: 'none',
            strictImports: true,
          },
          files: { '<%= src.output.boldy.css.screen %>': '<%= src.input.less %>'},
      },
      bootstrap: {
        files: { '<%= src.output.bootstrap.css %>': '<%= src.input.bootstrap.less %>'}
      }
    },
 
 
    // Watcher
    watch: {
      boldy: {
        files: ['less/*.less'],
        tasks: ['less:boldy_debug'],
        options: {
          spawn: false,
        },
      },
    },
 
 
    // CSSmin
    cssmin: {
      boldy: {
        options: {
          report: 'gzip',
          banner: '<%= banner %>'
        },
        files: {
          '<%= src.output.boldy.css.indefero %>': '<%= src.input.indefero %>'
        }
      }
    },
 
 
    // Uglify
    uglify: {
      boldy: {
        options: {
          report: 'gzip',
          banner: '<%= banner %>'
        },
        files: {
          '<%= src.output.boldy.js %>': '<%= src.input.js %>',
        }
      }
    }
 
  });
 
 
  // Load plugins
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-bower-task');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
 
 
  // Callable tasks
  grunt.registerTask('default', ['boldy', 'cssmin', 'concat:bootstrap', 'uglify']);
  grunt.registerTask('w', ['watch:boldy']);
 
  grunt.registerTask('bootstrap', ['concat:bootstrap', 'less:bootstrap']);
  grunt.registerTask('boldy', ['less:boldy']);
 
  grunt.registerTask('full', ['bower', 'bootstrap', 'default']);
  grunt.registerTask('all', ['full']); // Alias
};

Tâche bower

Via le plugin grunt-bower-task.

Cette tâche est là pour exécuter Bower au travers de Grunt, notez que le plugin n'interprète pas le .bowerrc, je l'ai donc chargé moi même (bowerrc: grunt.file.readJSON('.bowerrc')) afin de passer les mêmes options à la tâche Grunt qu'à Bower.

Tâche Bootstrap

Via les plugins grunt-contrib-less & grunt-contrib-concat.

Le but de cette tâche est de ne pas utiliser la version distribuée de Bootstrap mais de reconstruire ma propre version. Pour celà,

  • je reconstruis le JavaScript à partir des sources et du plugin concat,
  • je recompile les CSS à partir d'une version allégée du bootstrap.less :
/* -- BEGIN LICENSE BLOCK ---------------------------------------
# This file is part of Boldy, a theme for Dotclear
#
# Theme by Site5 (http://www.s5themes.com)
# under a GPLv2 http://www.gnu.org/licenses/gpl-2.0.txt
# Ported on Dotclear by Guillaume Kulakowski (http://www.llaumgui.com)
#
# -- END LICENSE BLOCK ----------------------------------------- */
 
// Core variables and mixins
@import "../vendor/bootstrap/less/variables.less";
@import "../vendor/bootstrap/less/mixins.less";
 
// My override
@import "bootstrap_variables.less";
//@import "bootstrap_mixins.less";
 
// Reset
@import "../vendor/bootstrap/less/normalize.less";
@import "../vendor/bootstrap/less/print.less";
 
// Core CSS
@import "../vendor/bootstrap/less/scaffolding.less";
@import "../vendor/bootstrap/less/type.less";
@import "../vendor/bootstrap/less/code.less";
@import "../vendor/bootstrap/less/grid.less";
//@import "../vendor/bootstrap/less/tables.less";
@import "../vendor/bootstrap/less/forms.less";
@import "../vendor/bootstrap/less/buttons.less";
 
// Components
@import "../vendor/bootstrap/less/component-animations.less";
//@import "../vendor/bootstrap/less/glyphicons.less";
@import "../vendor/bootstrap/less/dropdowns.less";
//@import "../vendor/bootstrap/less/button-groups.less";
//@import "../vendor/bootstrap/less/input-groups.less";
@import "../vendor/bootstrap/less/navs.less";
@import "../vendor/bootstrap/less/navbar.less";
//@import "../vendor/bootstrap/less/breadcrumbs.less";
@import "../vendor/bootstrap/less/pagination.less";
@import "../vendor/bootstrap/less/pager.less";
//@import "../vendor/bootstrap/less/labels.less";
//@import "../vendor/bootstrap/less/badges.less";
//@import "../vendor/bootstrap/less/jumbotron.less";
@import "../vendor/bootstrap/less/thumbnails.less";
@import "../vendor/bootstrap/less/alerts.less";
//@import "../vendor/bootstrap/less/progress-bars.less";
//@import "../vendor/bootstrap/less/media.less";
@import "../vendor/bootstrap/less/list-group.less";
@import "../vendor/bootstrap/less/panels.less";
@import "../vendor/bootstrap/less/wells.less";
//@import "../vendor/bootstrap/less/close.less";
 
// Components w/ JavaScript
//@import "../vendor/bootstrap/less/modals.less";
@import "../vendor/bootstrap/less/tooltip.less";
//@import "../vendor/bootstrap/less/popovers.less";
@import "../vendor/bootstrap/less/carousel.less";
 
// Utility classes
@import "../vendor/bootstrap/less/utilities.less";
@import "../vendor/bootstrap/less/responsive-utilities.less";

Remarquez que j'utilise mes propres variables après celles de Bootstrap afin de les écraser et de modifier Bootstrap directement à la source.

Tâche Boldy

Via les plugins grunt-contrib-uglify, grunt-contrib-less & grunt-contrib-cssmin.

Comme en recompilant Bootstrap à partir des sources LESS j'ai adhéré au concept de LESS, j'ai réécrit le thème de mon blog en LESS.

Cette tâche boldy sert donc :

  • à générer le CSS minifié à partir des sources LESS (grunt-contrib-less),
  • à minifier la CSS pour mon thème indefero qui reste en CSS (grunt-contrib-cssmin),
  • et à minifier les Javascripts (grunt-contrib-uglify).

Tâche watch

Via le plugin grunt-contrib-watch.

Pour compiler du LESS en CSS, il y a 2 méthodes.

  • soit passer par le less.js qui va parser en JS les fichiers LESS à chaque chargement de page (2 à 3 secondes pour mon blog),
  • soit passer par une tâche watch dans Grunt, qui va écouter les modifications sur les fichiers LESS et recompiler un CSS.

C'est cette dernière solution que j'ai retenu et donc c'est à cela que sert la tâche watch.

En conclusion

Pour conclure, je dirais que la mise en place de ces outils (surtout pour la première fois) est certes chronophage, mais une fois que ça tourne, pour mettre à jour les libs (Bootstrap, jQuery, etc.), une seule ligne de commande suffit (grunt full). De plus, une fois Grunt et Bower en place (et maîtrisés), passer de CSS à LESS a été super simple.

Pour finir, je regrette presque que nodejs n'ait pas été inclus dans Fedora plus tôt car il propose de formidables outils indispensables aux développeurs (front) web.

Et pour voir ce que ça donne, une petite vidéo:

Bower pour gérer les dépendances du thème de mon blog

Guillaume Kulakowski

C'est à la lecture de cet excellent article de Raphaël Goetter (dont le livre "CSS avancées vers HTML5 et CSS3" fut un de mes livres de chevet) sur Alsacreations que j'ai décidé de mettre en place Bower pour gérer les dépendances du thème de mon blog.

Pour ceux qui ne connaissent pas (encore) Bower et qui n'ont pas eu la curiosité de cliquer sur les liens ci-dessus: sachez juste que Bower est un gestionnaire de paquets pour le web (JS, CSS, etc). On pourrait même faire le raccourci en disant que Bower est au web ce que Composer est à PHP.

Les avantages immédiats que j'y trouve :

  • Un simple bower update et je mets à jour toutes les librairies tierces.
  • Le cloisonnement entre mon code et le code tiers. En effet, ce dernier se trouve dans un répertoire séparé: vendor (les habitudes de symfony2 ;-)).
  • Comme au travail je fais beaucoup de Symfony2 et d'eZ Publish 5, j'utilise pas mal composer, avec Bower je ne suis donc pas perdu.

Les inconvénients que j'y trouve :

  • Bower ne fait que récupérer les dépendances. Il ne permet pas (encore), comme (entre autre) Composer, de lancer des scripts post-installation ou post-mise-à-jour.
  • Bower récupère Bootstrap dans son intégralité alors que moi, j'aimerais l'optimiser et en réduire le poids.

Avant de pouvoir passer en production cette nouvelle version de mon blog, qui se doit d'être ISO avec la précédente, il me reste donc à régler quelques problèmes :

  • Optimiser ou reconstruire Bootstrap après l'avoir récupéré.
  • Minifier tout mon code.
  • Réfléchir à comment le pousser en production.
    En effet, Bower tournant sous node.js, je n'ai pas spécialement envie de déployer node sur mon serveur. Jusquà présent jutilisais GIT pour déployer le code source et je lançais juste un script shell pour minifier CSS et JS via YUI Compressor. Là je pense que je vais, soit devoir héberger les scripts minifiés sur GIT (ce qui n'est pas une bonne pratique) soit mettre en place un Jenkins (pour la construction du paquet) et un Capistrano (pour le déploiement). Autant au boulot le couple Jenkins/Capistrano m'est indispensable autant là pour déployer une fois de temps en temps une nouvelle version de mon blog, je pense que je vais opter pour les fichiers dans GIT.

Pour ceux que ça intéressent, ma configuration Bower :

# cat .bowerrc
{
    "directory": "vendor"
}
# cat bower.json
{
    "name": "Boldy",
    "version": "1.1",
    "main": [
        "css/screen.css",
        "css/indefero.css",
        "js/global.js"
    ],
    "ignore": [
        ".jshintrc",
        "**/*.txt"
    ],
    "private": true,
    "dependencies": {
        "jquery": "~1.*",
        "bootstrap": "3.0.*",
        "jquery.browser": "latest",
        "jquery-colorbox": "latest",
        "jquery-cookie": "latest",
        "scroll-to-top": "latest",
        "headjs": "latest"
    }
}

Bower pour gérer les dépendances du thème de mon blog

Guillaume Kulakowski

C'est à la lecture de cet excellent article de Raphaël Goetter (dont le livre "CSS avancées vers HTML5 et CSS3" fut un de mes livres de chevet) sur Alsacreations que j'ai décidé de mettre en place Bower pour gérer les dépendances du thème de mon blog.

Pour ceux qui ne connaissent pas (encore) Bower et qui n'ont pas eu la curiosité de cliquer sur les liens ci-dessus: sachez juste que Bower est un gestionnaire de paquets pour le web (JS, CSS, etc). On pourrait même faire le raccourci en disant que Bower est au web ce que Composer est à PHP.

Les avantages immédiats que j'y trouve :

  • Un simple bower update et je mets à jour toutes les librairies tierces.
  • Le cloisonnement entre mon code et le code tiers. En effet, ce dernier se trouve dans un répertoire séparé: vendor (les habitudes de symfony2 ;-)).
  • Comme au travail je fais beaucoup de Symfony2 et d'eZ Publish 5, j'utilise pas mal composer, avec Bower je ne suis donc pas perdu.

Les inconvénients que j'y trouve :

  • Bower ne fait que récupérer les dépendances. Il ne permet pas (encore), comme (entre autre) Composer, de lancer des scripts post-installation ou post-mise-à-jour.
  • Bower récupère Bootstrap dans son intégralité alors que moi, j'aimerais l'optimiser et en réduire le poids.

Avant de pouvoir passer en production cette nouvelle version de mon blog, qui se doit d'être ISO avec la précédente, il me reste donc à régler quelques problèmes :

  • Optimiser ou reconstruire Bootstrap après l'avoir récupéré.
  • Minifier tout mon code.
  • Réfléchir à comment le pousser en production.
    En effet, Bower tournant sous node.js, je n'ai pas spécialement envie de déployer node sur mon serveur. Jusquà présent jutilisais GIT pour déployer le code source et je lançais juste un script shell pour minifier CSS et JS via YUI Compressor. Là je pense que je vais, soit devoir héberger les scripts minifiés sur GIT (ce qui n'est pas une bonne pratique) soit mettre en place un Jenkins (pour la construction du paquet) et un Capistrano (pour le déploiement). Autant au boulot le couple Jenkins/Capistrano m'est indispensable autant là pour déployer une fois de temps en temps une nouvelle version de mon blog, je pense que je vais opter pour les fichiers dans GIT.

Pour ceux que ça intéressent, ma configuration Bower :

# cat .bowerrc
{
    "directory": "vendor"
}
# cat bower.json
{
    "name": "Boldy",
    "version": "1.1",
    "main": [
        "css/screen.css",
        "css/indefero.css",
        "js/global.js"
    ],
    "ignore": [
        ".jshintrc",
        "**/*.txt"
    ],
    "private": true,
    "dependencies": {
        "jquery": "~1.*",
        "bootstrap": "3.0.*",
        "jquery.browser": "latest",
        "jquery-colorbox": "latest",
        "jquery-cookie": "latest",
        "scroll-to-top": "latest",
        "headjs": "latest"
    }
}

Bower pour gérer les dépendances du thème de mon blog

Guillaume Kulakowski

C'est à la lecture de cet excellent article de Raphaël Goetter (dont le livre "CSS avancées vers HTML5 et CSS3" fut un de mes livres de chevet) sur Alsacreations que j'ai décidé de mettre en place Bower pour gérer les dépendances du thème de mon blog.

Pour ceux qui ne connaissent pas (encore) Bower et qui n'ont pas eu la curiosité de cliquer sur les liens ci-dessus: sachez juste que Bower est un gestionnaire de paquets pour le web (JS, CSS, etc). On pourrait même faire le raccourci en disant que Bower est au web ce que Composer est à PHP.

Les avantages immédiats que j'y trouve :

  • Un simple bower update et je mets à jour toutes les librairies tierces.
  • Le cloisonnement entre mon code et le code tiers. En effet, ce dernier se trouve dans un répertoire séparé: vendor (les habitudes de symfony2 ;-)).
  • Comme au travail je fais beaucoup de Symfony2 et d'eZ Publish 5, j'utilise pas mal composer, avec Bower je ne suis donc pas perdu.

Les inconvénients que j'y trouve :

  • Bower ne fait que récupérer les dépendances. Il ne permet pas (encore), comme (entre autre) Composer, de lancer des scripts post-installation ou post-mise-à-jour.
  • Bower récupère Bootstrap dans son intégralité alors que moi, j'aimerais l'optimiser et en réduire le poids.

Avant de pouvoir passer en production cette nouvelle version de mon blog, qui se doit d'être ISO avec la précédente, il me reste donc à régler quelques problèmes :

  • Optimiser ou reconstruire Bootstrap après l'avoir récupéré.
  • Minifier tout mon code.
  • Réfléchir à comment le pousser en production.
    En effet, Bower tournant sous node.js, je n'ai pas spécialement envie de déployer node sur mon serveur. Jusquà présent jutilisais GIT pour déployer le code source et je lançais juste un script shell pour minifier CSS et JS via YUI Compressor. Là je pense que je vais, soit devoir héberger les scripts minifiés sur GIT (ce qui n'est pas une bonne pratique) soit mettre en place un Jenkins (pour la construction du paquet) et un Capistrano (pour le déploiement). Autant au boulot le couple Jenkins/Capistrano m'est indispensable autant là pour déployer une fois de temps en temps une nouvelle version de mon blog, je pense que je vais opter pour les fichiers dans GIT.

Pour ceux que ça intéressent, ma configuration Bower :

# cat .bowerrc
{
    "directory": "vendor"
}
# cat bower.json
{
    "name": "Boldy",
    "version": "1.1",
    "main": [
        "css/screen.css",
        "css/indefero.css",
        "js/global.js"
    ],
    "ignore": [
        ".jshintrc",
        "**/*.txt"
    ],
    "private": true,
    "dependencies": {
        "jquery": "~1.*",
        "bootstrap": "3.0.*",
        "jquery.browser": "latest",
        "jquery-colorbox": "latest",
        "jquery-cookie": "latest",
        "scroll-to-top": "latest",
        "headjs": "latest"
    }
}

Bower pour gérer les dépendances du thème de mon blog

Guillaume Kulakowski

C'est à la lecture de cet excellent article de Raphaël Goetter (dont le livre "CSS avancées vers HTML5 et CSS3" fut un de mes livres de chevet) sur Alsacreations que j'ai décidé de mettre en place Bower pour gérer les dépendances du thème de mon blog.

Pour ceux qui ne connaissent pas (encore) Bower et qui n'ont pas eu la curiosité de cliquer sur les liens ci-dessus: sachez juste que Bower est un gestionnaire de paquets pour le web (JS, CSS, etc). On pourrait même faire le raccourci en disant que Bower est au web ce que Composer est à PHP.

Les avantages immédiats que j'y trouve :

  • Un simple bower update et je mets à jour toutes les librairies tierces.
  • Le cloisonnement entre mon code et le code tiers. En effet, ce dernier se trouve dans un répertoire séparé: vendor (les habitudes de symfony2 ;-)).
  • Comme au travail je fais beaucoup de Symfony2 et d'eZ Publish 5, j'utilise pas mal composer, avec Bower je ne suis donc pas perdu.

Les inconvénients que j'y trouve :

  • Bower ne fait que récupérer les dépendances. Il ne permet pas (encore), comme (entre autre) Composer, de lancer des scripts post-installation ou post-mise-à-jour.
  • Bower récupère Bootstrap dans son intégralité alors que moi, j'aimerais l'optimiser et en réduire le poids.

Avant de pouvoir passer en production cette nouvelle version de mon blog, qui se doit d'être ISO avec la précédente, il me reste donc à régler quelques problèmes :

  • Optimiser ou reconstruire Bootstrap après l'avoir récupéré.
  • Minifier tout mon code.
  • Réfléchir à comment le pousser en production.
    En effet, Bower tournant sous node.js, je n'ai pas spécialement envie de déployer node sur mon serveur. Jusquà présent jutilisais GIT pour déployer le code source et je lançais juste un script shell pour minifier CSS et JS via YUI Compressor. Là je pense que je vais, soit devoir héberger les scripts minifiés sur GIT (ce qui n'est pas une bonne pratique) soit mettre en place un Jenkins (pour la construction du paquet) et un Capistrano (pour le déploiement). Autant au boulot le couple Jenkins/Capistrano m'est indispensable autant là pour déployer une fois de temps en temps une nouvelle version de mon blog, je pense que je vais opter pour les fichiers dans GIT.

Pour ceux que ça intéressent, ma configuration Bower :

# cat .bowerrc
{
    "directory": "vendor"
}
# cat bower.json
{
    "name": "Boldy",
    "version": "1.1",
    "main": [
        "css/screen.css",
        "css/indefero.css",
        "js/global.js"
    ],
    "ignore": [
        ".jshintrc",
        "**/*.txt"
    ],
    "private": true,
    "dependencies": {
        "jquery": "~1.*",
        "bootstrap": "3.0.*",
        "jquery.browser": "latest",
        "jquery-colorbox": "latest",
        "jquery-cookie": "latest",
        "scroll-to-top": "latest",
        "headjs": "latest"
    }
}

Barcamp "Performances web"

Guillaume Kulakowski

A mon travail, on essai de faire une fois par mois un déjeuner autour d'une thématique. J'étais déjà intervenu il y a quelques mois pour présenter GIT, avec pour sanction immédiate que GIT soit devenu notre gestionnaire de sources par défaut et certain de nos grosses TMA ont déjà migré dessus.

Bref, ce mois ci la thématique était autour des performances web avec une présentation dense (plus de 1H30) ayant pour but de présenter les bonnes pratiques à nos nouveaux membres (c'est comme ça qu'on appel les salariés chez CGI) ainsi que de faire une piqure de rappel aux anciens et peut être leur rappeler pourquoi.

La présentation sous reveals est disponible sous licence Creative Commons Attribution-ShareAlike 4.0 International : Performances web.

Barcamp "Performances web"

Guillaume Kulakowski

A mon travail, on essai de faire une fois par mois un déjeuner autour d'une thématique. J'étais déjà intervenu il y a quelques mois pour présenter GIT, avec pour sanction immédiate que GIT soit devenu notre gestionnaire de sources par défaut et certain de nos grosses TMA ont déjà migré dessus.

Bref, ce mois ci la thématique était autour des performances web avec une présentation dense (plus de 1H30) ayant pour but de présenter les bonnes pratiques à nos nouveaux membres (c'est comme ça qu'on appel les salariés chez CGI) ainsi que de faire une piqure de rappel aux anciens et peut être leur rappeler pourquoi.

La présentation sous reveals est disponible sous licence Creative Commons Attribution-ShareAlike 4.0 International : Performances web.

Barcamp "Performances web"

Guillaume Kulakowski

A mon travail, on essai de faire une fois par mois un déjeuner autour d'une thématique. J'étais déjà intervenu il y a quelques mois pour présenter GIT, avec pour sanction immédiate que GIT soit devenu notre gestionnaire de sources par défaut et certain de nos grosses TMA ont déjà migré dessus.

Bref, ce mois ci la thématique était autour des performances web avec une présentation dense (plus de 1H30) ayant pour but de présenter les bonnes pratiques à nos nouveaux membres (c'est comme ça qu'on appel les salariés chez CGI) ainsi que de faire une piqure de rappel aux anciens et peut être leur rappeler pourquoi.

La présentation sous reveals est disponible sous licence Creative Commons Attribution-ShareAlike 4.0 International : Performances web.

Barcamp "Performances web"

Guillaume Kulakowski

A mon travail, on essai de faire une fois par mois un déjeuner autour d'une thématique. J'étais déjà intervenu il y a quelques mois pour présenter GIT, avec pour sanction immédiate que GIT soit devenu notre gestionnaire de sources par défaut et certain de nos grosses TMA ont déjà migré dessus.

Bref, ce mois ci la thématique était autour des performances web avec une présentation dense (plus de 1H30) ayant pour but de présenter les bonnes pratiques à nos nouveaux membres (c'est comme ça qu'on appel les salariés chez CGI) ainsi que de faire une piqure de rappel aux anciens et peut être leur rappeler pourquoi.

La présentation sous reveals est disponible sous licence Creative Commons Attribution-ShareAlike 4.0 International : Performances web.

Introduction aux Software Collections

Remi Collet

Dans le cadre l'Open Source Developers' Conference 2013 (Open World Forum 2013), j'ai pu présenter une conférence Introduction aux Software Collections.

Je pense que le sujet a intéressé les personnes présentes et j'ai pu discuté et répondre à de nombreuses questions sur les SCL sur les stands Fedora et Red Hat.

La présentation (en anglais) est disponible : Software Collections Introduction

La démonstration d'un serveur RHEL-6 avec Apache 2.4 en avant et 3 services FPM (PHP 5.3, 5.4 et 5.5) en arrière m'a semble intéressante pour démontrer l'utilité et la simplicité des SCL.

La conférence a été filmée, je posterai dès que possible, le lien.

Support de JSON dans PHP

Remi Collet

Une compagne de FUD relaie depuis quelques jours une information erronée sur la suppression du support de JSON dans PHP 5.5.

Il me semble donc important d'essayer de clarifier les choses.

L'extension PECL json offre depuis 2006 le support du format JSON. Cette extension a été intégrée dans PHP 5.2.0.

Il n'y a aucun projet de supprimer ce support de PHP.

Documentation : Notation Objet JavaScript

Exemple d'utilisation de json_encode :

php -r 'var_dump(json_encode(array("foo","bar")));'
string(13) "["foo","bar"]"

Exemple d'utilisation de json_deceode :

php -r 'var_dump(json_decode("[\"foo\",\"bar\"]"));'
array(2) {
[0] =>
string(3) "foo"
[1] =>
string(3) "bar"
}

Lors d'une revue de licence, le projet Debian a découvert un problème dans cette extension et rapporté le problème au projet PHP (Bug #63520). En effet le code provenant de json.org n'est pas libre, car il contient une restriction contraire à la liberté 0 (utilisation) : "The Software shall be used for Good, not Evil". (Inutile de discuter ce fait, la FSF a statué dans ce sens, et cet avis est suivi par la plupart des distributions Linux).

J'ai pu rapidement libérer la partie encodage en PHP 5.4.10 en supprimant du code non-libre et inutile (Bug #63588).

Pour l'analyseur, j'ai commencer l'écriture d'une nouvelle extension PECL jsonc utilisant la bibliothèque libre json-c (sous license MIT). Le code de l'encodeur est identique à celui de PHP 5.5. Ce développement a été l'occasion de contribuer directement à la bibliothèque :

  • PR51 : profondeur dynamique de l'analyseur
  • PR52 : analyse des nombres flottants indépendante de la locale
  • PR90 : les entiers ne peuvent commencer par zéro
  • PR94 : les chaines entre apostrophe ne sont ps autorisées
  • PR94 : les commentaires ne sont pas autorisés
  • PR94 : les caractères supplémentaires après les données ne sont pas autorisés
  • etc

La bibliothèque json-c offrant un analyseur incrémental, j'en ai profité pour enrichir l'extension de cette fonctionalité.

Exemple d'utilisation de la classe JsonIncrementalParser :

$parser = new JsonIncrementalParser();
$fic = fopen("somefile.json", "r");
do {
$buf = fgets($fic);
$ret = $parser->parse($buf);
} while ($buf && ($ret==JsonIncrementalParser::JSON_PARSER_CONTINUE));
$result = $parser->get();

On peut aussi analyser directement un fichier sans le charger en mémoire :

$ret = $parser->parseFile("somefile.json");
$result = $parser->get();

L'analyseur dispose aussi de 2 modes de sévérité, le mode strict, utilisé par défaut, et proche de celui originel de PHP et un mode standard plus permissif, qui autorise, par exemple, les commentaires ou des listes mal construites. L'utilisation de la nouvelle option JSON_PARSER_NOTSTRICT  permet d'accepter par exemple le fichier de configuration suivant (ce qui peut être utile) :

/*
Configuration file
*/
{
"temp": "\/tmp", // directory
"debug": true, // boolean
}

Actuellement, avec la version 1.3.1 (beta), il reste quelque différences détectées par la suite de tests de l'extension originale qui sont corrigées dans la version 1.3.2 (stable) en cours de préparation et qui devrait sortir très prochainement.

Le seule différence restant et l'implémentation partielle de l'analyse des grands entiers (et de l'option JSON_BIGINT_AS_STRING). Elle ne fonctionnera que pour les versions 32bits et pour les entiers pouvant être représentés sur 64bits (non gérés par PHP, donc récupérés en chaine ou en nombre flottant). Sachant qu'aucun encodeur ne générera ces valeurs, cela ne me semble pas un problème critique.

Distributions Linux :

Debian a supprimé l'extension non libre à partir de PHP 5.5 et fournit désormais le paquet php5-json (installé par défaut) construit à partir des sources de l'extension jsonc.

Fedora a supprimé l'extension non libre à partir de PHP 5.5 / Fedora 19 et fournit désormais le paquet php-pecl-jsonc (installé par défaut).

Mageia a remplacé l'extension non libre par l'extension jsonc (commit 442375).

Conclusion

Quelque soit la méthode d'installation de PHP ou le système utilisé, le support de PHP sera présent.

Pool de thread avec limite de parallélisation

Patrice Ferlet

Je travaillais cette semaine sur un script python qui récupérait des centaines de milliers de données depuis un serveur. Pour gagner en temps de calcul, j'ai décidé de faire des threads. Limitant la taille de mes tâches parallèles à un nombre spécifique, le script bloquait... car j'utilisais des fonctions threadées qui lançaient récursivement d'autres threads. Sauf que la Queue que j'utilisais pour faire le pool se bloquait si trop de threads se lançaient en même temps attendant indéfiniment que quelqu'un veuille bien lire la Queue... J'ai alors trouvé ma solution, et je la partage avec vous. Je vous explique le problème, je vous montre un exemple, et ensuite on voit la solution.

J'ai cherché un peu partout sur le net, et je n'ai pas trouvé de solution à mon problème. Ainsi, pour vous montrer ce qui coince, je vous ai préparé un exemple de script très simple. Le script suivant lance 5 Threads qui eux même vont en créer... Pour limiter le nombre de tâche parallèles je passe par une classe assez connue (depuis python recipes) qui utilise la classe Queue avec une limite de taille.

Chaque fois qu'on ajoute une tâche dans la classe, la Queue est remplie... les workers vont alors lire en boucle dans cette dernière pour lancer la tâche et les arguments stoqués. Tant que la Queue est remplie, il faut attendre que quelqu'un la lise... sinon l'appel à "put" reste bloqué.

Voici la classe de base que j'ai utilisée (et modifié):

# -*- encoding: utf-8 -*-
# file threadingpoolbad.py
 
import logging
from threading import Thread
from Queue import Queue
 
class ThreadPool:
 
    class _ThreadQueue(Thread):
 
        def __init__(self, pool, *args, **kwargs):
            """ Get tasks queue then launch thread """
            super(ThreadPool._ThreadQueue, self).__init__(*args, **kwargs)
            self.tasks = pool.tasks
            self.daemon = True
            self.start()
 
        def run(self):
            """ Read tasks from limited size queue, then launch task """
            while True:
                # read bloking Queue ..
                task,args = self.tasks.get(True)
                try:
                    task(*args)
                except Exception, e:
                    logging.exception(e)
                    print "Error"
                finally:
                    self.tasks.task_done()
 
    def __init__(self, num=10):
        """ Create a limited pool with "num" threads """
        self.tasks = Queue(num)
 
        for _ in range(num):
            self._ThreadQueue(self)
 
    def add_task(self, target, args):
        """ Write in unlimited size queue which will be
        read in "run" method of a thread
        Block if tasks Queue is full !
        """
        self.tasks.put((target, args))
 
    def wait_completion(self):
        """ Wait for tasks to be completed """
        self.tasks.join()

Voilà comment utiliser cette classe:

import time
from threadingpoolbad import ThreadPool
 
def test(pool, num=0):
    num += 1
    print "num is %d" % num
    if num < 5:
        pool.add_task(target=test, args=(q, num))
        time.sleep(0.5)
 
#create a pool of 2 threads, launch test function
pool = ThreadPool(2)
pool.add_task(target=test, args=(pool,))

Jusqu'ici tout va bien... mais admettons que j'ajoute 5 ou 6 appels à add_task:

# ...
#create a pool of 2 threads, launch test function
pool = ThreadPool(2)
pool.add_task(target=test, args=(pool,))
pool.add_task(target=test, args=(pool,))
pool.add_task(target=test, args=(pool,))
pool.add_task(target=test, args=(pool,))
pool.add_task(target=test, args=(pool,))

Si vous lancez le test... ça coince. Pour arrêter le script faites CTRL+Z puis "kill %%".

Tout le souci se trouve entre deux méthodes:

  • add_tasks qui tente d'écrire dans une queue, l'appel à "put" bloque si la Queue "tasks" est pleine
  • dans "run" on libère un espace au moment où la fonction "task" est terminée

Or, dans notre exemple, la fonction "test" ne libère pas la queue de suite, car elle écrit dans la Queue via add_task... mais comme d'autres threads sont aussi en cours, la Queue est pleine et aucun espace n'est libre. On se retrouve en attente indéfinie...

Pour la plupart des scripts, vous n'allez pas vous retrouver dans cette situation, mais voilà... pour moi c'est arrivé.

Comment corriger le souci ? revoir l'algo ? c'est dommage... tout ce qui nous manque c'est de pouvoir écire dans la Queue sans limite, mais limiter quand même le nombre de threads.

La classe Queue peut tout à fait ne pas bloquer, et avoir une taille indéfinie. Si on lui passe un entier en argument de constructeur elle se limite à bloquer sa taille max à ce nombre. Mais si on ne lui donne pas de paramètres, ou "0" ou un nombre négatif, alors sa taille est illimitée.

Or, je veux tout de même limiter le nombre de process simultanés. Tout ce dont j'ai besoin c'est de ne pas bloquer l'insert de tâches... vous me suivez ?

C'est alors très simple ! il suffit de gérer tout ça avec 2 Queue:

  • une qui n'est pas limitée, elle gardera toutes les taches à lancer, quelque soit le nombre
  • une qui va limiter le nombre de thread, celle-ci sera limité à nombre qui correspond au nombre de threads. C'est quasiement le même fonctionnement que la classe de threadingpoolbad.py

On y va:

# -*- encoding: utf-8 -*-
#file threadingpool.py
import logging
from threading import Thread
from Queue import Queue
 
 
class ThreadPool:
 
    class _ThreadQueue(Thread):
 
        def __init__(self, pool, *args, **kwargs):
            """ Get task and pool Queue. Then launch thread.
            """
            super(ThreadPool._ThreadQueue, self).__init__(*args, **kwargs)
            self.pool = pool.pool
            self.tasks = pool.tasks
            self.daemon = True
            self.start()
 
        def run(self):
            """ Run unlimited while Queues are not joined """
            while True:
                # reinsert the nonblocking queue 
                # in blocking queue, that should block
                # if "tasks" queue is full
                self.tasks.put(self.pool.get(True))
 
                #and read this queue...
                task,args = self.tasks.get(True)
                try:
                    task(*args)
                except Exception, e:
                    logging.exception(e)
                finally:
                    self.tasks.task_done()
                    self.pool.task_done()
 
 
    def __init__(self, num=10):
        """ Create the thread queue with "num" thread in parallel"""
        self.tasks = Queue(num)
        self.pool = Queue()
 
        for _ in range(num):
            self._ThreadQueue(self)
 
    def add_task(self, target, args):
        """ Write in unlimited size queue which will be
        read in "run" method of a thread
        That should not block !
        """
        self.pool.put((target, args))
 
 
    def wait_completion(self):
        """ Wait for the all threads to be completed """
        self.pool.join()
        self.tasks.join()

Vous voyez ici les deux queues, "tasks" et "pool". La première est limitée, l'autre non.

Et cette fois ci, ça marche: j'ai bien deux threads qui tournent mais je ne bloque plus lors de l'appel à "add_task":

import time
from threadingpool import ThreadPool
 
def test(pool, num=0):
    num += 1
    print "num is %d" % num
    if num < 5:
        pool.add_task(target=test, args=(q, num))
        time.sleep(0.5)
 
#create a pool of 2 threads, launch test function
pool = ThreadPool(2)
pool.add_task(target=test, args=(pool,))
pool.add_task(target=test, args=(pool,))
pool.add_task(target=test, args=(pool,))
pool.add_task(target=test, args=(pool,))
pool.add_task(target=test, args=(pool,))
pool.add_task(target=test, args=(pool,))
#...

Et voilà ! Désormais, mes 120 000 tâches que j'ai à lancer ne se bloquent plus, elles se placent en file l'attente et j'ai bien un nombre limité de tâches en parallèle.

Je ne vous montre pas mon script d'import, mais croyez moi, la récursion (bien contrôlée) est énorme, et avoir résolut mon problème a été un soulagement énorme.

check_bdd_request : Plugin Nagios tout terrain pour requêter des bases de données

Alexandre Frandemiche

Bonjour à tous, j'ai eu un besoin particulier concernant le monitoring en place au sein d'Opti-Time. du coup, ni une, ni deux après une brève recherche, je n'ai pas trouvé mon bonheur, alors hier soir , j'ai pris mes 2 mains et hop au boulot ! Ce fût rapide et vous le verrez il n'y a rien d'extraordinaire ! Mais voilà que ça a donnée naissance à un projet de plus : http://www.slobberbone.net/dotclear/index.php?pages/check_bdd_request

Je vous recopie la page ici même pour en faire profiter un maximum ;)" class="smiley !

Présentation

Ce projet est un projet sous licence GPL v2. Cette commande est un plugin pour Nagios 3.x, développé en PERL.

Son objectif est de permettre dexécuter n'importe quelle requête à un serveur de base de données. Dans un premier temps, cela ne fonctionne qu'avec un serveur MySQL, mais ça ne doit aps être compliqué de faire ce qu'il faut pour PostgreSQL, Oracle, etc ...

Ce plugin permet 2 choses pour le moment :

  • Retourner une information dans Nagios sans qu'elle est un impact en terme d'alerte (check_type=TEXT). Le but est de remonter par exemple la version d'un logiciel stockée en base, ou tout autre indicateur quelconque qu'il soit un chiffre ou du texte.
  • Retourner un compteur de résultat de la requête SQL exécutée (check_type=NUMERIC). D'autres plugin Nagios font déjà ce travail, hors j'ai un premier besoin qui est de pouvoir lever une alerte alors que nous passons les seuils fixés, ou à l'inverse, lorsque la valeur n'atteint pas le seuil voulu. Parcourant le résultat, cette commande pourra très facilement être adaptée pour traiter des résultats plus complexes (prochaines versions).

Pour le reste, je vous laisse parcourir le fichier, tout doit être dedans ;)  et assez explicite ! Sinon, vous savez où me trouver ;)" class="smiley

Installation

Vous l'aurez compris, pour l'utiliser, il suffit d'un serveur Nagios (Installer Nagios sur CentOS sans RPM) sur lequel vous aurez installé les packages suivant :

# yum install perl perl-DBD-MySQL perl-DBI

Une fois fais, il ne vous reste qu'à placer check_bdd_request.pl dans le répertoire libexec de votre arborescence Nagios :

# chmod +x check_bdd_request.pl

Et voilà, le tour est joué !

$ perl check_bdd_request.pl --help

Check_MySQL_request for Nagios, version 1.0
GPL licence, (c)2013 Slobberbone

Site http://www.slobberbone.net

Usage: ./check_bdd_request.pl -H <host> -u <user> -p <password> -d <database> -P <port> -q request -t check_type -o <operator> [-w <warn_level> -c <crit_level> -T <timeout>] -V
-h, --help
print this help message
-H, --hostname=HOST
name or IP address of MySQL server
-u, --user=USER
mysql user to login
-p, --password=PASSWORD
mysql password
-d, --database=DATABASE
mysql database name
-P, --port=PORT
Http port
-q, --request="REQUEST"
Request to execute on the server
-t, --check_type=TYPE
Type of return :
NUMERIC,
TEXT
-o, --operator=OPERATOR
Operator :
EQ for =,
LT for <,
GT for >,
LE for <=,
GE for >=,
DIF for !=
-w, --warn=INTEGER
number that will cause a warning completed by the OPERATOR
-1 for no warning
-c, --critical=INTEGER
number that will cause an error completed by the OPERATOR
-T, --timeout=INTEGER
timeout in seconds (Default: 15)
-V, --version
prints version number
Note :
The script will return
* With warn and critical options:
OK if we are able to connect to the MySQL server and #request count result respect <warn_level>,
WARNING if we are able to connect to the MySQL server and #request count result unrespect <warn_level>,
CRITICAL if we are able to connect to the MySQL server and #request count result unrespect <crit_level>,
UNKNOWN if we aren't able to connect to the MySQL server

Configuration

Pour que ce plugin soit opérationnel avec notre serveur de supervision Nagios (ou Shinken), il faut ajouter dans le fichier commands.cfg :

# 'check_bdd_request_numeric' command definition
define command{
    command_name    check_bdd_request_numeric
    command_line    $USER1$/check_bdd_request.pl -H $HOSTADDRESS$ -u $ARG1$ -p $ARG2$ -d $ARG3$ -P $ARG4$ -q $ARG5$ -t $ARG6$ -o $ARG7$ -w $ARG8$ -c $ARG9$
    }

# 'check_bdd_request_text' command definition
define command{
    command_name    check_bdd_request_text
    command_line    $USER1$/check_bdd_request.pl -H $HOSTADDRESS$ -u $ARG1$ -p $ARG2$ -d $ARG3$ -P $ARG4$ -q $ARG5$ -t $ARG6$
    }

Puis, il ne vous reste plus qu'à l'appeler de la manière suivante :

define service{
    use            generic-service
    host_name        my_bdd_server
    service_description    A text value for display information like a version for example
    check_command        check_bdd_request_text!user!password!database!3307!"Select column_name from my table where row_text='value'"!TEXT
    normal_check_interval    60
}

define service{
    use            generic-service
    host_name        my_bdd_server
    service_description    A numeric value for display information and compare with operator to the Warning or Critical values
    check_command        check_bdd_request_text!user!password!database!3307!"Select column_name from my table where row_text='value'"!NUMERIC!LT!2!5
    normal_check_interval    60
}

Et voilà, il ne reste plus qu'à modifier ce projet pour vos propres besoins ! Pour ça, direction SourceForge.net !
Pour le reste, les commentaires sont ouverts sur la page du projet !

Coloriser la sortie d'un programme

Patrice Ferlet

Développant sur Google Appengine en ce moment, en python, j'utilise les logs à foison. Ces logs sont pratique et ont un niveau d'information (WARNING, INFO, ERROR...). Mais la lisibilité n'est pas forcément adaptée, car en effet les logs sont simplement des lignes de texte. C'est alors qu'une idée m'a frappée (sans gravité, j'ai pas eut mal): et si je colorisai la sortie. Ma méthode fonctionne pour à peu près tous les programmes que vous utilisez dans un terminal, et peut être adaptée à pas mal de situations

L'idée est simple, il suffit de rediriger les sorties du programme dans un descripteur qui va modifier la sortie. Avant tout, laissez moi vous expliquer comment coloriser du texte dans un terminal (si vous ne savez pas comment), puis comment utiliser `sed` avec la subtilité. Enfin, on va passer par une commande `exec` qui va opérer notre transformation.

Premier point, les couleurs dans un terminal.

Bash (ou d'autres shell) permet de coloriser une chaine de caractères. Le principe étant de donner un caractère spécial, puis un code couleur, puis la chaine.

Ainsi, pour coloriser en rouge, en entre la séquence "\033[31m" puis la chaine. Il faut juste comprendre cela:

  • \033 => caractère qui prévient qu'on va changer de couleur, de poids de fonte...
  • [ => on va donner une couleur
  • 33 => code couleur du rouge
  • m => terminé

Cette séquence retourne un caractère spécial c'est important de bien le comprendre, car en réalité toute la subtilité de ce que nous allons faire repose sur ce principe. Ce caractère est invisible, il est interprété par le terminal pour changer la couleur.

Cela ne suffit pas, il faudra que le terminal sache gérer les caractères échapés, je parle du "\033". La commande "echo" sait bien le faire:

echo -e "\033[31mEt hop une couleur"

Le souci, c'est que là votre console passe en rouge... et ne revient pas au mode "normal". Pour cela, on utilise la couleur "0"

echo -e "\033[0mOn revient à la normale"

Pour faire plus simple, on peut directement activer la couleur, entrer la chaine, puis revenir à la normale:

echo -e "\033[31mHoulla une erreur en rouge\033[0m"

Les couleurs qu'on va utiliser:

  • 31 rouge => pour les erreurs
  • 33 orange => pour les warnings
  • 34 bleu => pour les infos

Bien, passons à `sed`. Cet outil permet de faire des opération sur du texte assez facilement en utilisant une syntaxe proche du perl. Ainsi, la commande "s" de sed permet de "substituer" du texte, comprennez "le remplacer"

Dans une commande sed "s", le caractère "&" correspond à la chaine trouvée. Ainsi, pour remplacer "WARNING" en "toto-WARNING-fin" on fera:

echo "WARNING there is an error" | sed 's/WARNING/toto-&-fin/'
#affiche: toto-WARNING-fin there is an error

Bon, vous avez compris, il faut remplacer maintenant "WARNING" en "\033[33mWARNING\033[0m". Sauf que voilà, sed ne sait pas utiliser le mode "échappé". Cela n'est rien, on va récupérer le caractère que retourne "echo -e" pour le placer dans la chaine de remplacement. Voilà un exemple:

NORMAL=$(echo -e "\033[0m")
ORANGE=$(echo -e "\033[33m")

echo "WARNING there is an error" | sed "s/WARNING/$ORANGE&$NORMAL/"

Simple en fait, relisez bien vous allez comprendre.

Bien, reste à faire ça pour toutes les lignes de sortie d'un programme. Reprenons notre exemple avec GAE, j'ai des message "WARNING, INFO et ERROR".

Le souci, c'est que la sortie est "en continue", mais on va utiliser une commande qui va gérer une redirection de flux: exec

Si vous ne le savez pas, un shell utilise des descripteurs connus: 1 = sortie standard, 2 = sortie d'erreur. Si je redirige une sortie dans un de ces flux, il sera traité de différente manières.

Pour rediriger dans un flux, on utilise la séquence "N>&M" où N est le flux d'entrée, et M le flux où on redirige. Ainsi:

#on redirige la sortie normale dans le flux d'erreur
echo "pouet pouet" 1>&2 
#1 est utilisé par défaut, donc cela fait la même chose:
echo "pouet pouet" >&2 

#Par exemple
echo "pouet pouet"  2>fichier_erreur 1>fichier_normal 1>&2
#ici, le fichier_normal ne contien rien, par contre fichier_erreur 
#contient pouet pouet

OK, même si cela reste obscure pour certains, ne paniquez pas... suivez juste le reste de mon article.

"exec" peut ouvrir un descripteur, simplement en lançant "exec 3> ..." On aura alors un nouveau flux portant le numéro 3.

Donc:

exec 3>fichier
echo "pouet pouet" >&3

ici, on redirige le flux 3 dans un fichier, donc en écrivant dans le flux, on écrit dans un fichier...

Autre subtilité des shells: ">(une commande)" (surtout pas d'espace après le >) la commande entre parenthèse est considéré comme un fichier

Ainsi:

exec 3> >(sed 's/toto/pouet/g')
echo "j'ai pas toto mais j'aime truc" >&3
echo "toto toto :)" >&3

Vous comprennez ce qu'il se passe: tout ce que j'écris dans le "descripteur 3" passe dans la commande "sed..." Ha... on y arrive !

NORMAL=$(echo -e "\033[0m")
ORANGE=$(echo -e "\033[33m")
RED=$(echo -e "\033[31m")
BLUE=$(echo -e "\033[34m")

exec 3> >(sed "s/WARNING/$ORANGE&$NORMAL/g,   s/ERROR/$RED&$NORMAL/g, s/INFO/$BLUE&$NORMAL/g" )

ma_commande >&3

Et voilà ! Toute mes sorties de "ma_commande" passerons dans le flux "3" et on verra un remplacement de mot par ce même mot en couleur.

Si "ma_commande" utilise les flux de sortie d'erreur, vous pouvez carrément faire:

ma_commande 2>&1 1>&3

Alors, ici, on utilise des couleurs, mais vous pouvez utiliser cette technique pour mettre des balises XML, mettre le texte en minscule, ou rediriger dans d'autre descripteurs... en gros la méthode est ouverte à pas mal de variantes.

Voilà pour aujourd'hui !