CODEWITHSUNDEEP
gruntjsbower
adam8810
adam8810

Reputation: 731

Configure Grunt-Bower-Install path for a Component

How do I specify the default file to use for a bower component so that it will be injected properly by grunt-bower-install?

I am working with datejs and they have different files depending on your localization. The file I'm wanting to include is not in the root of bower_components/datejs directory so I get the error:

datejs was not injected in your file.

Please go take a look in "app/bower_components/datejs" for the file you need, then manually include it in your file.

I'm trying my hardest to avoid hardcoding datejs into my index file and don't really want to move "date-en-US.js" file into the root of the datejs directory either.

This is the structure of the datejs bower component.

bower_components
└── datejs
    └── build
        └── ...
        └── date-en-US.js
        └── ...
    └── src
    └── test

And just in case this helps, this is the .bower.json file that is located in the datejs bower component path:

{
  "name": "datejs",
  "homepage": "https://github.com/datejs/Datejs",
  "_release": "7bdddb55d6",
  "_resolution": {
    "type": "branch",
    "branch": "master",
    "commit": "7bdddb55d69719e42c358c3a2b7df706ff3090f8"
  },
  "_source": "git://github.com/datejs/Datejs.git",
  "_target": "*",
  "_originalSource": "datejs",
  "_direct": true
}

Upvotes: 3

Views: 3160

Answers (3)

nknj
nknj

Reputation: 2486

A little late to the party but you can override the main property of a repo to define whatever file you want to inject into your app. To do this you need to use the overrides property in YOUR bower.json.

Try this:

{
  "name": "name",
  "version": "x.x.x",
  "dependencies": {
    "datejs": "x.x.x"
  },
  "overrides": {
    "datejs": {
      "main": "build/date-en-US.js"
    }
  }
}

Upvotes: 7

corporatedrone
corporatedrone

Reputation: 185

I too was frustrated by this a few times. What I found in my cases was that "grunt bower-install" requires a "main" entry in the .bower.json. It's a string or array of strings that point to the relevant JS and/or CSS files that should be installed.

In your case I do not see the "main" and would suggest you create one that contains the desired datejs files. I would suggest the source files if you intend to use grunt for minification/etc. You can look at other successful components to see examples of the "main" entry.

I suspect that some components do not supply the entry because they have no single usage pattern (i.e. you can mix and match the files you require), but this is just speculation on my part.

Upvotes: 3

Kelly J Andrews
Kelly J Andrews

Reputation: 5111

Try adding this in your grunt file:

'bower-install': {
     fileTypes: {
         fileExtension: {
             detect: {
                 typeOfBowerFile: /-en-US.js/
             }
         }
    }
}

I didn't try this out, and my regex might be off. But accoriding to the grunt-bower-install readme, it states See [wiredep's](https://github.com/stephenplusplus/wiredep) readme for more options of customization and there it shows using the above configuration.

Essentially - grunt-bower-install doesn't know what to look for. This option appears to tell it that info.

Upvotes: 1

Related Questions