CODEWITHSUNDEEP
gruntjsbowergrunt-wiredep
anastsiacrs
anastsiacrs

Reputation: 159

Grunt & Bower & grunt-wiredep

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

Upvotes: 1

Views: 1332

Answers (1)

Atais
Atais

Reputation: 11275

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.

Upvotes: 2

Related Questions