Grunt & Bower & grunt-wiredep

Question

I tied to use grunt and bower together. To inject bower components directly to index.html grunt-wiredep is used.

But there is one problem, some dependencies that present in bower.json still are not included in *.html

bower.json

{
  "name": "***",
  "version": "***",
  "dependencies": {},
  "devDependencies": {
    "jquery": "~2.1.1",
    "angular": "1.4.x",
    "bootstrap": "~3.1.1",
    ...
  },
  "resolutions": {
    ..
  }
}

gruntfile.js

....
wiredep: {

      task: {
        src: [
          'app/index.html'
        ],
        options: {
          dependencies: true,
          devDependencies: true          
        }
      }
    }
...

index.html

...

<!-- bower:js -->
<!-- endbower -->

<!-- bower:css -->
<!-- endbower -->

...

In result I haven't included scripts for jquery, angular, bootsrap and css for bootstrap. But some other sources have been included.

The problem is not in main property inside bower.json as here

After some investigation, i have found issue with bootstrap 3.3.x

But "overrides" block in my bower.js does not help.

One thing seems to be very interesting: (the same is for bootstarp)

after adding

"jquery": {
      "main": "D:/REPO/XX/current/bower_components/jquery/dist/jquery.js"
    }

to overrides block, wiredep has included following to index.html

<script src="../bower_components/jquery/D:/REPO/XX/current/bower_components/jquery/dist/jquery.js"></script>

But when I have wrote "main": "dist/jquery.js" it is just ignored

score 2 · Accepted Answer · answered Feb 02 '16 at 14:57

2

It seems to me that you have some issue with the structure of your project. Use the cwd parameter. I have successfully configured wiredep to add the required dependencies with config:

wiredep: {
    task: {
        src: [
            '<%= cfg.webapp_dir %>/index.html'
        ],
        cwd: '.',
        overrides': {
            'bootstrap': {
                'main': ['less/bootstrap.less', 'dist/css/bootstrap.min.css', 'dist/js/bootstrap.min.js']
            }
        },
        fileTypes: {
            html: {
                replace: {
                    js: '<script src="/{{filePath}}"></script>',
                    css: '<link rel="stylesheet" href="/{{filePath}}" />'
                }
            }
        }
    }
}

this also includes bootstrap overrides which work flawlessly :) In my case, the bower_dependencies folder is in the same directory that index.html is.

answered Feb 02 '16 at 14:57

Atais

10,857
6
71
111

Thx a lot! Problem was actually in project structure. I put bower_dependencies and index.html on the same level - and it helped. – anastsiacrs Feb 03 '16 at 08:47
But it seems quite strange to me, that processed file (`index.html`) and `bower_dependencies`+`bower.json` have to be on the same level. [`cwd` as i can see is path to `bower_dependencies`+`bower.json`] – anastsiacrs Feb 03 '16 at 08:58
I guess it could not be in other dir than your ```index.html``` is. In the end the server needs to serve all the libs that are included in ```bower_components``` and since it also serves the ```index``` file, the path needs to be the same. Unless you want to minify all the libs, in such case (I do it only for production build), you can remove the ```bower_components``` at the end of the building process. – Atais Feb 03 '16 at 09:38

Grunt & Bower & grunt-wiredep

1 Answers1