Replace bower components paths in <!-- bower:js --> by the paths generated by bower-task (libs/*/*)

47 Views Asked by At

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

0

There are 0 best solutions below