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.
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.
