Concaténer vos css avec le plugin usemin

Voici un petit article pour expliquer l’usage du plugin grunt-usemin afin de concaténer vos fichiers statiques avant de mettre votre application en production.

Pour pouvoir utiliser ce plugin, il faut d’abord exécuter npm install grunt-usemin –save-dev. Une fois intallé, vous avez à disposition deux nouvelles tâches Grunt :

  • useminprepare : cette tâche va parser les fichiers html (voir ci-dessous) afin de surcharger la configuration des plugins grunt-contrib-concat, grunt-contrib-cssmin et grunt-contrib-uglify.
  • usemin : cette tâche va regénérer les fichiers HTML, afin de remplacer les ressources statiques par celles optimisées.

Il faut donc inclure également les plugins suivant dans votre projet : grunt-contrib-concat, grunt-contrib-cssmin et grunt-contrib-uglify. La tâche useminprepare doit etre exécutée en premier, et usemin en dernier.

La configuration du plugin est très simple. Voici un exemple pour des feuilles de style, mais c’est identique pour des fichiers javascript.

Dans le fichier HTML que nous voulons optimiser, nous devons ajouter un commentaire indiquant le type de ressources nous manipulons, et également le nom du fichier qui sera créé.

<html>
  <head>
    <!-- build:css  style/styles.css-->
          <link href="style/style.css" rel="stylesheet" type="text/css" />
          <link href="style/emoji.min.css" rel="stylesheet" type="text/css" />
      <!-- endbuild -->
  </head>
</html>

Ensuite, dans votre fichier Gruntfile.js, il suffit de charger le plugin, grâce à la méthode loadNpmTasks, et de configurer les deux tâches décrites précédemment. Il est préférable de ne pas faire ces traitements directement dans votre application. Dans mon projet, je fais d’abord une copie du projet dans autre répertoire ‘prod’, sur lequel nous allons exécuter toutes les tâches d’optimisation définies dans Grunt.

grunt.initConfig({
    useminPrepare: {
        html: 'prod/index.html',
        options: {
            dest: 'prod'
        }
    },
    
    usemin: {
        html: 'prod/index.html'
    }
});
grunt.loadNpmTasks('grunt-usemin');

Une fois les tâches exécutées, le fichier html importera le nouveau fichier CSS créé par le plugin :

<html>
  <head>
    
      <link href="style/styles.css" rel="stylesheet" type="text/css" />  
      
  </head>
</html>

Les Liens de la Semaine

Voici les articles intéressants que j’ai lu cette semaine, et que vous pouvez retrouver sur ma timeline Twitter :

Android Maven Plugin!

Depuis quelques mois, Google préconise l’utilisation de Gradle pour tous nouveaux projets Android. Si vous êtes encore de l’ancienne version (Maven), il existe un plugin (Android Maven Plugin), qui vous proposera de nouveaux goals pour gérer le cycle de vie de votre application Android :

  • Packaging
  • Obfuscation de votre code
  • Tests
  • Installer/Désinstaller votre applications sur un Android
  • Démarrer un émulateur.

Pour bénéficier de ce plugin, il suffit de l’ajouter dans le pom.xml de votre projet:

<plugin>
  <groupId>com.jayway.maven.plugins.android.generation2</groupId>
  <artifactId>android-maven-plugin</artifactId>
  <version>3.9.0-rc.2</version>
</plugin>

Pourtant, j’ai trouvé deux limitations dans ce plugin :

  • Nous pouvons, grâce au paramètre device, définir le ou les appareils Android que nous voulons utiliser. Ce paramètre peut avoir les valeurs suivantes : emulator (tous les émulateurs seront utilisés), usb (tout les téléphones/tablettes connectés via USB) ou encore l’identifiant complet d’un appareil. Il est ainsi impossible de mixer ces configurations, pour choisir, par exemple, d’utiliser tous les émulators et 2 téléphones connectés via USB.
  • Impossible de définir des adresses IPs externes correspondant à des téléphones/tablettes/émulateurs que nous souhaitons utiliser lors de nos développements.

Grâce à deux Pull Requests, ces 2 limitations sont maintenant corrigées :

Il est maintent possible de définir une liste de target, ainsi que des adresses IP. Pour pouvoir utiliser ces adresses IP, il sera nécessaire d’exécuter le nouveau goal android:connect avant d’exécuter le goal initial.

<plugin>
  <groupId>com.jayway.maven.plugins.android.generation2</groupId>
  <artifactId>android-maven-plugin</artifactId>
  <version>3.9.0-rc.2</version>
  <configuration>
      <devices>
        <device>emulator</device>
        <device>127.0.0.1</device>
        <device>id_of_my_phone</device>
      </devices>
      <ips>
        <ip>127.0.0.1</ip>
      </ips>
  </configuration>
</plugin>

Ces fonctionnalités sont disponibles dans la dernière version du plugin.

Paris Web 2014

La conférence Paris Web 2014 aura lieu du 16 au 18 octobre. Cette année, j’ai tenté ma chance, en proposant 2 talks :

  • Les Chromes Apps : des applications desktop qui fonctionnent partout !!!
  • Code JavaScript de qualité avec ESLint

Mais malheureusement, ils n’ont pas été retenus. Ce sera pour la prochaine fois…

Depuis mercredi, le programme officiel est disponible sur le site de la conférence.

Voici les conférences qui pourraient m’intéresser :

Les Liens de la Semaine

Voici les articles intéressants que j’ai lu cette semaine, et que vous pouvez retrouver sur ma timeline Twitter :

Bonjour à tous!

Bonjour à tous ! Et bienvenue sur mon nouveau blog.

Comme beaucoup de personnes, je vais essayer d’écrire plus de 5 articles avant d’abonner. Au programme, des articles techniques sur le développement web et mobile.

Ce blog utilise Jekyll et est hébergé sur Github. Si vous voyez des petites coquilles dans mes articles, je vous invite donc à me la faire parvenir via Github.

Bonne lecture à tous.