I. Ajouter des dépendances avec Bower

Ce tutoriel concerne vraiment YeomanYeoman, Bower et Grunt, parce que j'ai le sentiment qu'il est utile d'étudier le système de génération que j'ai présenté pour ce projet AngularJS. Je me rends compte que le nombre des fichiers installés par Yeoman est un peu déroutant, donc nous allons faire un pas hors de AngularJS et regarder comment fonctionnent les dépendances et l'ajout de nouvelles dépendances à un projet.

Même si Yeoman permet de démarrer un nouveau projet, il faut aller fort en profondeur pour comprendre comment tout est aménagé. Par exemple : supposons que nous voulions ajouter sass-bootstrapsass-bootstrap à djsreaderdjsreader. Comment faisons-nous cela ?

Yeoman utilise BowerBower pour la gestion des dépendances et Bower utilise component.json (ou bower.json par défaut dans les versions plus récentes). Pour ajouter sass-bootstrap au projet, ouvrez le fichier component.json et ajoutez "sass-bootstrap": "2.3.x" à la propriété dependencies :

 
Sélectionnez
{
  "name": "djsreader",
  "version": "0.0.0",
  "dependencies": {
    "angular": "~1.0.5",
    "json3": "~3.2.4",
    "es5-shim": "~2.0.8",
    "angular-resource": "~1.0.5",
    "angular-cookies": "~1.0.5",
    "angular-sanitize": "~1.0.5",
    "sass-bootstrap": "2.3.x"
  },
  "devDependencies": {
    "angular-mocks": "~1.0.5",
    "angular-scenario": "~1.0.5"
  }
}

Ensuite, exécutez bower install pour installer les dépendances dans app/components. Si vous regardez à l'intérieur de app/components, vous devriez y voir sass-bootstrap.

Maintenant que le package est installé, comment s'en sert-on réellement avec notre projet ? Le plus simple est de créer une tâche Grunt appropriée.

II. Grunt

GruntGrunt exécute le serveur de développement djsreader et compile les exécutables de production qui peuvent être déposés sur un serveur Web. Gruntfile.js est surtout de la configuration. Il contient les différents paramètres nécessaires pour gérer les tâches Grunt, donc il peut construire l'exécutable de notre projet. Une tâche est un compass. Si vous recherchez le fichier pour compass, vous devriez voir une propriété qui définit certaines options pour la compilation des fichiers Sass.

La convention pour la configuration de tâche Grunt est taskName: { argument: options }. Nous voulons ajouter un nouvel argument à la tâche compass pour construire les fichiers Bootstrap Sass. Nous savons que les fichiers se trouvent dans app/components/sass-bootstrap, donc nous avons juste besoin de le dire pour compiler les fichiers à cet endroit.

Ajoutez une nouvelle propriété compass appelée bootstrap. Ce devrait être aux alentours de la ligne 143 :

 
Sélectionnez
compass: {
  // options/dist/serveur
  bootstrap: {
    options: {
      sassDir: '<%= yeoman.app %>/components/sass-bootstrap/lib',
      cssDir: '.tmp/styles'
    }
  }
}

Presqu'en fin de fichier, ajoutez une entrée pour compass:bootstrap dans grunt.registerTask('server', [ et dans grunt.registerTask('build', [ :

 
Sélectionnez
grunt.registerTask('server', [
  'clean:server',
  'coffee:dist',
  'compass:server',
  'compass:bootstrap', /* Celle-ci ! */
  'livereload-start',
  'connect:livereload',
  'open',
  'watch'
]);

Cela provoque la compilation des fichiers .scss Bootstrap à chaque fois qu'un serveur est démarré.

Maintenant, ouvrez le fichier app/index.html et ajoutez-y styles/bootstrap.css :

 
Sélectionnez
<link rel="stylesheet" href="styles/bootstrap.css">
<link rel="stylesheet" href="styles/main.css">

III. Conclusion

Image non disponible

Les fichiers de paramètres Yeoman créés nous facilitent la gestion des dépendances. Il y a énormément de choses cool que vous pouvez trouver avec bower search. Essayez-les !

La version pour ce tutoriel est la 005d1be.

IV. Remerciements

L'article original peut être lu sur le site DailyJSDailyJS : AngularJS: Adding DependenciesAngularJS: Adding Dependencies.

Je remercie également ced pour sa relecture attentive et assidue.