I'm having an issue with grunt, usemin and bower-task, in replacing the bower components paths in the output html file.
I have in my html :
<!--bower:js-->
<script src="bower/jquery/dist/jquery.js"></script>
<script src="bower/angular/angular.js"></script>
<script src="bower/angular-route/angular-route.js"></script>
<script src="bower/angular-cookies/angular-cookies.js"></script>
<script src="bower/angular-ui-notification/dist/angular-ui-notification.js"></script>
<script src="bower/angular-animate/angular-animate.js"></script>
<script src="bower/ngstorage/ngStorage.js"></script>
<script src="bower/angular-sanitize/angular-sanitize.js"></script>
<script src="bower/checklist-model/checklist-model.js"></script>
<script src="bower/underscore/underscore-min.js"></script>
<script src="bower/nanoscroller/bin/javascripts/jquery.nanoscroller.js"></script>
<!-- endbower -->
and my grunt file is:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
bower: {
options:{
targetDir:'production/libs',
install:true
},
install: {
}
},
useminPrepare: {
html: 'index.html',
options: {
dest: 'production'
}
},
usemin:{
html:['production/index.html']
},
copy:{
html: {
src: './index.html', dest: 'production/index.html'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-usemin');
grunt.loadNpmTasks('grunt-bower-task');
grunt.registerTask('default', [
'bower:install', 'useminPrepare', 'concat', 'uglify', 'cssmin',
'copy:html', 'usemin'
]);
};
when I run grunt it outputs this:
<!--bower:js-->
<script src="bower/jquery/dist/jquery.js"></script>
<script src="bower/angular/angular.js"></script>
<script src="bower/angular-route/angular-route.js"></script>
<script src="bower/angular-cookies/angular-cookies.js"></script>
<script src="bower/angular-ui-notification/dist/angular-ui-notification.js"></script>
<script src="bower/angular-animate/angular-animate.js"></script>
<script src="bower/ngstorage/ngStorage.js"></script>
<script src="bower/angular-sanitize/angular-sanitize.js"></script>
<script src="bower/checklist-model/checklist-model.js"></script>
<script src="bower/underscore/underscore-min.js"></script>
<script src="bower/nanoscroller/bin/javascripts/jquery.nanoscroller.js"></script>
<!-- endbower -->
But from what I understand, it should replace the first paths by the corresponding in the libs generated by bower-task, something like this:
<!--bower:js-->
<script src="libs/jquery/jquery.js"></script>
<script src="libs/angular/angular.js"></script>
<script src="libs/angular-route/angular-route.js"></script>
<script src="libs/angular-cookies/angular-cookies.js"></script>
<script src="libs/angular-ui-notification/angular-ui-notification.js"></script>
<script src="libs/angular-animate/angular-animate.js"></script>
<script src="libs/ngstorage/ngStorage.js"></script>
<script src="libs/angular-sanitize/angular-sanitize.js"></script>
<script src="libs/checklist-model/checklist-model.js"></script>
<script src="libs/underscore/underscore.js"></script>
<script src="libs/nanoscroller/jquery.nanoscroller.js"></script>
<!-- endbower -->
I'm wondering, is it something I don't get, or something I'm doing wrong. I went through a lot of the previous questions and none of them helped out