stephenplusplus/grunt-wiredep

Inject Bower packages into your source code with Grunt.

grunt-wiredep

Inject Bower packages into your source code with Grunt.

What is this?

Grunt is great.

Bower is great.

And now they work great together.

grunt-wiredep is a Grunt plug-in, which finds your components and injects them directly into the HTML file you specify.

Whether you're already using Bower and Grunt, or new to both, grunt-wiredep will be easy to plug in, as you will see in the steps below.

do note: Bower is still a young little birdy, so things are changing rapidly. Authors of Bower components must follow certain conventions and best practices in order for this plug-in to be as accurate as possible. It's not a perfect world out there, so needless to say, some Bower components may not work as well as others.

Getting Started

*If you are new to Grunt, you will find a lot of answers to your questions in their getting started guide.

To install the module:

npm install --save-dev grunt-wiredep

Include the task in your Gruntfile:

grunt.loadNpmTasks('grunt-wiredep');

Create a config block within your Gruntfile:

wiredep: {

  task: {

    // Point to the files that should be updated when
    // you run `grunt wiredep`
    src: [
      'app/views/**/*.html',   // .html support...
      'app/views/**/*.jade',   // .jade support...
      'app/styles/main.scss',  // .scss & .sass support...
      'app/config.yml'         // and .yml & .yaml support out of the box!
    ],
    
    options: {
      // See wiredep's configuration documentation for the options
      // you may pass:

      // https://github.com/taptapship/wiredep#configuration
    }
  }
}

See wiredep's readme for more options of customization, such as other file types, regex patterns, exclusions, and more.

Options can be specified on both task and target level. See grunt documentation for more details on how this works.

For JavaScript dependencies, pop this in your HTML file:

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

Install a Bower component:

bower install jquery --save

Call the Grunt task:

grunt wiredep

You're in business!

<!-- bower:js -->
<script src="bower_components/jquery/jquery.js"></script>
<!-- endbower -->

Behind the Scenes

This plug-in uses wiredep, which takes a look at all of the components you have, then determines the best order to inject your scripts in to your HTML file.

Putting script tags that aren't managed by grunt-wiredep is not advised, as anything between <!-- bower:js --> and <!-- endbower --> will be overwritten with each command.

Examples

A simple sample apple: website | github

Tutorial

A simple tutorial on how to use grunt-wiredep

License

Copyright (c) 2014 Stephen Sawchuk Licensed under the MIT license.

grunt-wiredep's Issues

Support for multiple html targets

It would be nice if multiple html targets can be configured, for instance from this

 grunt.loadNpmTasks('grunt-bower-install');

   grunt.initConfig({
     'bower-install': {
       target: {
         html: 'index.html' // point to your HTML file.
       }
     }
   });

to this

 grunt.loadNpmTasks('grunt-bower-install');

   grunt.initConfig({
     'bower-install': {
       target: {
         html: ['index.html', 'home.html','about.html'] // point to your HTML file.
       }
     }
   });

Allow option to prevent components being saved.

(#9)

Allow option to prevent components being saved. This would require either:

• warning the user grunt-bower-install won't include the component in the HTML
• re-writing where grunt-bower-install looks for dependencies (currently JSON)

OPTION: CDN fallback for injected script tags

I'm using bower components as a fallback to CDN ...

<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
<script>
  window.jQuery || document.write('<script src="bower_components/jquery/jquery.min.js"><\/script>');
</script>

... which requires a test for the CDN file or to write the file and the closing script tag to be escaped.

It would be great to have that as an option/setting.

index.html

Does this only work with 1 html file at a time? Or can it accept an array of html files?
Can this also work with a directory path that look for all .html or .hbs files?

I haven't tested this personally. But at a quick glace at the source code, I don't it does any of these moment. Figured I'll ask first. And if is something that you can implement?

run well done but html file no change

my config:

module.exports = function(grunt) {

    grunt.initConfig({
        'bower-install': {
            index: {
                html:'index.html'
            }
        }
    });

    grunt.loadNpmTasks('grunt-bower-install');

    grunt.registerTask('default', ['bower-install']);
};

my html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="less/main.css"/>
</head>
<body>
<!-- bower:js -->
<!-- endbower -->
</body>
</html>

The console print result is:

Running "bower-install:index" (bower-install) task
false
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="less/main.css"/>
</head>
<body>
<!-- bower:js -->
<!-- endbower -->
</body>
</html>

Done, without errors.

something print is my insert some code in wiredep's file inject-dependencies.js
at line 91

module.exports = function inject(config) {
  globalDependenciesSorted = config.get('global-dependencies-sorted');
  ignorePath = config.get('ignore-path');

  var htmlFile = config.get('html-file');
  var html = config.get('html');
  //调试DEBUG
  console.log(regex.bower.test(html))
  console.log(html.replace(regex.bower, injectScripts));

  // grab the html file and its contents, then drop our scripts in.
  fs.writeFileSync(htmlFile, html.replace(regex.bower, injectScripts));

  return config;
};

Ignoring specific dependencies

Sass-bootstrap sets the main bower file to bootstrap.css, unfortunately if you include the bootstrap.scss in your sass stylesheet, this causes bootstrap to be included twice.

Once when bower-install includes the css file, and once when the sass files are compiled to css. As seen here: yeoman/generator-angular#522

Would it be possible to set an ignore flag for dependencies like this? e.g

'bower-install': {
  app: {
    html: '<%= yeoman.app %>/views/index.html',
    ignorePath: '<%= yeoman.app %>/',
    ignoreDependencies: ['sass-bootstrap']
  }
},

Watch integration

Hey guys,

How would I go about wiring this up to grunt-contrib-watch? Pretty new to Grunt, so any help would be much appreciated!

Thanks,

• Steven

Use Bower API

Is there a way of setting the order

Is there a way of setting the order of which the dependencies get injected in the html? I tried to re-order my list of dependencies in the bower.json file, but this doesn't work.

bowerInstall alias

This is really a stupid request, but I'll give it a shot. This plugin is the only one I've encountered so far which requires quotes in the config, which makes it hard to see if your syntax highlighting colors strings and keys differently. Would it be a problem to make an alias "bowerInstall"?

Absolute paths?

Wouldn't it be more stable to use absolute paths, like /bower_components/blah...? I'm using pretty URLs (about/index.html), so my bower_components/blah link doesn't work anymore. The absolute one would work from anywhere.

Masterpages

I'm not 100% sure the issue is with the master-extension but i have two identical files and the only difference (that i can see) is that one is named Master.master and the other index.html. The html-file works fine but the masterpage give me
"Warning: Cannot read property 'block' of undefined..."

Cannot npm install - TypeError: Object.keys called on non-object

Hey there,

I've just tried to install your awesome grunt plugin.

But I always get the following error:

verbose from cache /Users/jsilva/Desktop/boilerplate/package.json
error TypeError: Object.keys called on non-object
error     at Function.keys (native)
error     at /usr/local/lib/node_modules/npm/lib/build.js:111:18
error     at process._tickCallback (node.js:415:13)
error If you need help, you may report this log at:
error     <http://github.com/isaacs/npm/issues>
error or email it to:
error     <[email protected]>
error System Darwin 12.3.0
error command "node" "/usr/local/bin/npm" "install" "grunt-bower-install" "--save-dev"
error cwd /Users/jsilva/Desktop/boilerplate
error node -v v0.10.5
error npm -v 1.2.21
error type called_on_non_object
verbose exit [ 1, true ]

The full log is here http://jlnslv.me/TB0B

Do you know where the issue is? I googled a little but I could pin down where the bug is.

I'm running node 0.10.5 on Mac OS X 10.8.3

Julien

Cannot read property 'main' of undefined Use

Hey!
My 'bower-install' instructions in my Gruntfile breaks grunt when is called and let this message:

Cannot read property 'main' of undefined Use

This is my grunt config for "bower-install":

'bower-install': {
    target: {
        src: ['app/index.html'],
        cwd: ' ',
        ignoredPath: ' ',
        exclude: [],
        fileTypes: {}
    }
}

Thank you

is it possible to add new feature for including application scripts automatically

like this https://github.com/jwvdiermen/grunt-include-source

Possibility to prevent bower install to run within the task

Is it possible to prevent bower to be executed in the task?
For my usecase I only want to add the components into the html,
but the components should not updaded or maybe in a seperated task.
I think this is a mix of concerns that is not correct all the time.

What do you think?

Multiple dependency warnings

When a component throws a warning, keep track of what's already been warned, to avoid dupes.

└─▪ grunt bower-install:codecode
Running "bower-install:codecode" (bower-install) task
bower cloning git://github.com/stephenplusplus/codecode.git
bower fetching codecode
bower cached git://github.com/stephenplusplus/codecode.git
bower checking out codecode#0.0.3
bower copying /Users/stephen/.bower/cache/codecode/0cc7d208b3a0a990575e47e4c7822e38
bower cloning git://github.com/components/jquery.git
bower cached git://github.com/components/jquery.git
bower fetching jquery
bower checking out jquery#2.0.0
bower copying /Users/stephen/.bower/cache/jquery/29cb4373d29144ca260ac7c3997f4381
bower installing jquery#2.0.0
bower installing codecode#0.0.3

Running "bower-install:--silent" (bower-install) task

>> modernizr was not injected in your HTML.
Please go take a look in "app/components/modernizr" for the file you need, then manually include it in your HTML file *outside* of the <!-- bower --> block.

>> jquery was not injected in your HTML.
Please go take a look in "app/components/jquery" for the file you need, then manually include it in your HTML file *outside* of the <!-- bower --> block.

>> jquery was not injected in your HTML.
Please go take a look in "app/components/jquery" for the file you need, then manually include it in your HTML file *outside* of the <!-- bower --> block.

Done, without errors.

Uninstalled packages stay in the html

1. install a package with bower install <package> --save
2. run grunt bower-install
3. uninstall a package with bower uninstall <package> --save
4. run grunt bower-install
5. the package script tag is still in the HTML

is there way to add a url prefix for bower components?

e.g if i am developing partials for ruby or django ..

and i do grunt bower-install, i want to include

{{ STATIC_URL }} to the url included in index.html .. is there a way?

font-awesome problem

font-awesome was not injected in your file.
Please go take a look in "vendor/font-awesome" for the file you need, then manually include it in your file.

this have some gotchas?

Configuration for using grunt bower-install with a dist folder

Hi,

I have two files located at

./app/index.html
./bower.json

Upon calling grunt based on the angular generator (not of relevance to this problem), it puts everything in a dist folder, which is nice, because it leaves the source code untouched (And in my opinion, the only clean way for a build process is for all generated/modified artefacts to go into a dist folder - and leave the rest untouched ;)

./dist/bower_components
./dist/index.html

Now I wanted to run bower-install on the dist/index.html file, but I can't find a grunt bower-install task config that works.

In essence, it seems to boil down that I need options for configuring

• the path where to look for the bower.json file (in my case .)
• the path where to look for the source file to add the bower dependencies - ./dist/index.html
• the relative path from the source file to the bower_components directory (in my case .) - so that paths added to the index html work 'out of the box'.

Is there a way to achieve this?

Best practices for Bower Components?

What best practices are you referring to for creating Bower components that are compatible with this task?

grunt-bower-install won't install bootstrap js components

I'm using

grunt-bower-install 

with yeoman, and I've installed bootstrap with

>bower install bootstrap

Grunt seems to pickup bootstrap.js from

bower_components\bootstrap\dist\js

But it's not picking up any of the other bootstrap components like

bower_components\bootstrap\js\tab.js
bower_components\bootstrap\js\modal.js
etc ... 

Can you please advise how we can include these other components. I tried putting all the js*.js components in the bootstrap\dist\ folder but this hasn't worked.

Way to ignore some bower components?

I suggest a way to exclude some files from css or js. For example I want to use bootstrap.css but not bootstrap.js.

Jade support

Would or could this be supported by preprocessed templating engines like jade?

wrong syntax in wiki and example's website

Hello,

Should be written 'app:' instead of 'target:' inf Gruntfile.js

Dependencies remaining in bower.json after uninstall

Unable to read ".bowerrc" file

I don’t know what causes this, but I get the following:

$ grunt bower-install
Running "bower-install:target" (bower-install) task
Warning: Unable to read ".bowerrc" file (Error code: ENOENT). Use --force to continue.

Any idea?

Support other components than only js

What happens when I use a css-bower component? :)
Should be possible...or? :)

Could be extended in then depencency inject function...

{dependencies: false, devDependencies: true} doesn't work

Hi,
I have an issue with this task: if I register a bower component only as a dev dependency (such as bower install jquery --save-dev), the bower-install task doesn't update the html file with that component (moreover, if it's manually added, it removes it).
Now I know that I could jongle with the settings to make the task pull only devDependencies or dependencies, but it seems to ignore my settings and always pull the components fomr the dependencies config object.
Am I doing something wrong, or is this a bug?
Btw, nice job building this npm .. it's great ✌️

bower-install updates index.html but not karma.conf.js

I like that I can run

$ bower install -S angular-bootstrap
$ grunt bower-install

and index.html is updated with the new bower component. I would like karma.conf.js to be updated as well, so that my tests are ready to use the new component.

I don't know if this should be added to bower-install, or should be a separate task, but I would like this to be automatic as well.

I'm using yeoman with generator-angular to build my Gruntfile.js. If a new task is created for this, then that generator will need to be updated.

See yeoman/generator-angular#534

Problems with CSS and JS patterns

Hi,
There is a little bug with this commit : 965cc43

Maybe you should replace line 87, 88 like this :
cssPattern: this.data.cssPattern,
jsPattern: this.data.jsPattern

Thanks.

QUESTION: Control included scripts

So I have 3 JavaScript files I want included from my bower_components directory:

myComponent/rootFile.js
myComponent/anotherRootFile.js
myComponent/someFolder/anotherFile.js

It seems I'm missing something because I can only get myComponent/rootFile.js to be included even if I included the other files in the main property in myComponent/bower.json. Where is this level of control done so all 3 files are included in my index.html file?

Absolute Path in Script Source

Is there a way to force grunt-power-install's script tag output to use absolute paths?

  <!-- bower:js -->
  <script src="bower_components/something/something.js"></script>
...

  <!-- bower:js -->
  <script src="/bower_components/something/something.js"></script>
...

Our particular reuse of our layout file causes the file to be rendered the same within sub-paths. I have not determined a configuration option to affect the output. Any input appreciated.

Absolute path

Hi,

I'm using your extension in combination with expressjs.
I didn't found a solution / parameter to get an absolute path:

<script src="/bower_components/modernizr/modernizr.js"></script>

instead of

<script src="bower_components/modernizr/modernizr.js"></script>

Cheers Tobias

bower install doesn't work with jquery

Following the example:

bower install jquery --save
worked without error, all config files look good.

But then:

grunt bower-install
Running "bower-install:app" (bower-install) task

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

Done, without errors.


Execution Time (2014-02-18 20:29:31 UTC)
loading tasks       3ms  ▇▇▇▇▇▇▇▇▇▇▇▇ 10%
bower-install       1ms  ▇▇▇▇ 3%
bower-install:app  26ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 87%
Total 30ms

Adding a "main": "./dist/jquery.js", in jquery's .bower.json file doesn't solve anything.

Fallbacks to old conventions

bower.json -> component.json.

{ ... "main": "path/to/script.js" ... } -> { ... "scripts": [ "path/to/script.js" ] ... }

Test!

After #1, or even before, this could use some testing.

Update example

Seems like the content at stephenplusplus.github.io/grunt-bower-install doesn't match up with the current version. Spent a good while scratching my head about why it didn't work only to see that the docs in the repo are quite different

bower-install.app.src exists in config...ERROR

Hey @stephenplusplus,

I'm getting the error below when I run grunt bower-install. Do you have any idea on what's happening? It looks like I don't have a src specified in my Gruntfile.js. Should there be something there?

Gruntfile.js

'bower-install': {
    app: {
        html: '<%= yeoman.app %>/index.html',
        ignorePath: '<%= yeoman.app %>/'
    }
}

Error

Running "bower-install:app" (bower-install) task
Verifying property bower-install.app.src exists in config...ERROR
>> Unable to process task.
Warning: Required config property "bower-install.app.src" missing. Use --force to continue.

Aborted due to warnings.


Execution Time (2014-02-03 07:17:44 UTC)
loading tasks      3ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 38%
bower-install:app  4ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 50%
Total 8ms

Sass/preprocessor integration

Not all components are scripts that get inserted into html -- some are css/sass/etc files used by a preprocessor. It would be awesome to use a flag or auto-detect the scope from the component's main file name, and insert css into the html or sass @import statements into a sass file.

bower-install:scss:sass-compass-extension or
bower-install:sass-compass-extension --scss

// bower //
@import 'bower_components/sass-compass-extension';
// endbower //

Is this something that could be possible with grunt-bower-install?

Grunt task doesn't always include files

When I run the bower-install task (unmodified from the readme) the task will run fine but 50% of the time it will include all of the JS except one module and the other 50% it will include all of the other modules.

This is hard to explain so I made a gist showing the outputs:

https://gist.github.com/wazoo/7de83e38fc9d715faf51

You can see that I ran it 6 times changing nothing between each time and it flips back and forth.

This normally wouldn't be an issue except I was going to run this task as part of the grunt server so it will re-include everything when it refreshes the files. Probably not necessary, so I have a workaround (not including it), but that is strange behavior.

OPTION: CDN fallback for injected CSS

I'm using bower components as a fallback to CDN ...

<script>
function bootstrapLoaded(href) {
  var cssFound = false;

  for (var i = 0; i < document.styleSheets.length; i++) {
    var sheet = document.styleSheets[i];

    if (
    sheet['href'] == "http://ajax.aspnetcdn.com/ajax/bootstrap/3.0.3/css/bootstrap.min.css" ||
    sheet['href'] == "https://ajax.aspnetcdn.com/ajax/bootstrap/3.0.3/css/bootstrap.min.css"
    ) {
      cssFound = true;
    }
  };

  return cssFound;
}

if (!bootstrapLoaded('bootstrap.min.css')) {
  var local_bootstrap = document.createElement('link');

  local_bootstrap.rel = "stylesheet";
  local_bootstrap.href = "bower_components/bootstrap/dist/css/bootstrap.min.css";
  document.head.appendChild(local_bootstrap);
}
</script>

... which requires a test for the CDN file or to write the file.

It would be great to have that as an option/setting.

p.s. There could be a more elegant way to do this 😿

Grunt task succeeds but dependencies are not injected

Hi,

The following command : grunt bower-install does not return any error, however my html file does not contain any code injection.

My project is organized like this :

bower_components/
    jquery/
        [...]
dist/
node_modules/
    grunt/
        [...]
    grunt-bower-install/
        [...]
    [...]
src/
    index.html
bower.json
Gruntfile.js
package.json

Here is my bower-install config :

'bower-install': {
    target: {
        src: ['src/index.html']
    }
},

And finally my bower.json :

{
  "name": "demo",
  "version": "0.0.0",
  "authors": [
  ],
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "~2.0.3"
  }
}

My index.html file remains empty :

<html>
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>

</body>
</html>

Am I forgetting something ? Any idea/suggestion ?

Integrate with Bower Installer

I just want to use the benefit of Bower Installer to bring only .js file from bower_components directory to my app/comp folder but I don't think this is supported because the new path is app/comp instead of bower_components defined in the .bowerrc

Is there anyway to make this work?

Support WildCards in Main Files?

e.g.

Kendo-UI use a WildCard Pattern.

<script src="src/main/webapp/app/components/angular-kendo-ui/build/*.js"></script>

They are doing wrong? I think so...
But how to handle this?

Require JS Paths

Thanks for putting this plugin together, great work. Would be really nice if this could fill in require.js paths

requirejs.config({
  paths: {
    /* bower */
    /* endbower */
  }
});

usemin

I know I should just try it but does this play nicely with usemin? How about jade/haml?

grunt bower-install into the php file

Hello,
the truth it seems strange that in a php file can not do? That same file I renamed to html and it works. Because you can not do with a php file or another extension?
thanks

Use separated HTML files

Hello, could be possible set multiple HTMLs like one for css and another for js? Currently just compile one at the time.

I have something like include_css.html and include_js.html for my custom template system.