Yeoman, AngularJS and Bower, bower-install : gestion de dépendance

Dans le billet précédent, on a préparé l'environment de travail. Nous allons voir ici comment gérer les dépendances javascript.

Avant, il fallait

• aller trouver sa librairie javascript et ses dépendances
• les télécharger
• les placer dans l'arborescence,
• modifier son index.html pour référencer les fichiers
• ...

Et si vous avez fait du Java avant l'existance de Maven, vous vous souvenez de l'enfer que pouvait être le conflis de version, la mise à jour d'une librairie ...

Bower va nous aider à resorber quelques uns de ces problèmes.

Pour se faire, il vous faut l'environment du billet précédent ainsi que grunt-bower-install

Step 1

npm install

Installer grunt-bower-install pour commencer. Ouvrir une console dans votre répertoire de travail et lancer la commande:

npm install grunt-bower install --save-dev

Gruntfile.js

Chargement de bower-install

Modifier le fichier Gruntfile.js de votre projet comme suit. Vous devriez avoir une fonction declarée :

module.export = function (grunt) {

...

}

Il faut charger grunt-bower-install dans ces environs. A la fin de la succession de 'require', ajouter la ligne magique pour avoir :

...

require('load-grunt-tasks')(grunt);

require('time-grunt')(grunt);

grunt.loadNpmTasks('grunt-bower-install');

...

Déclaration de bower-install

Si vous n'êtes pas perdu ici, il faudra ensuite declarer la tache bower-install dans le bloc grunt.initConfig.

Vous devrez passer de :

  grunt.initConfig({

    yeoman: {

      // configurable paths

      app: require('./bower.json').appPath || 'app',

      dist: 'dist'

    },

    watch: {

      coffee: {

        files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],

        tasks: ['coffee:dist']

      },

...

A ce qui suit:

grunt.initConfig({

      'bower-install': {

        target: {

          // Point to the html file that should be updated

          // when you run `grunt bower-install`

          html: 'app/index.html',

          // Optional:

          // If your file paths shouldn't contain a certain

          // portion of a url, it can be excluded

          ignorePath: 'app/',

          // Customize how your stylesheets are included on

          // your page.

          //

          //   default: '<link rel="stylesheet" href="{{filePath}}" />'

          cssPattern: '<link href="{{filePath}}" rel="stylesheet">',

          // Customize how your <script>s are included into

          // your HTML file.

          //

          //   default: '<script src="{{filePath}}"></script>'

          jsPattern: '<script type="text/javascript" src="{{filePath}}"></script>'

        }

      },

    yeoman: {

      // configurable paths

      app: require('./bower.json').appPath || 'app',

      dist: 'dist'

    },

    watch: {

      coffee: {

        files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],

        tasks: ['coffee:dist']

      },

index.html

Une dernière modification est à faire du coté de votre fichier index.html. Il faudra ajouter le tag suivant :

<!-- bower:js -->

<!-- endbower -->

Terminé!

Step 2

Ajoutons à présent une dépendance comme ngUpload

Dans la console :

bower install ngUpload --save

Cette commande installera le nécessaire pour vous mettre à dispo la librairie ngUpload et modifiera le fichier bower.json.

il faudra enfin lancer la commande:

grunt bower-install

Vous aurez à la fin la librairie ainsi que ses dépendances de telechargées. Elles seront aussi déclarées dans votre index.html.

PS : il est possible que vous tombiez sur un message "building is not supported on win32" sous Windows lors de l'utilisation de la commande npm install. Le bug est connu est une solution temporaire existe.