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
- ...
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');
...
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.
