[grunt] grunt-wiredep 介绍
发布于 4 年前 作者 qjzd 1953 次浏览 来自 码农




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.

grunt-wiredep 时Grunt的一个插件, 这个插件可以发现您的组件并把这些组件直接注入到您指定的HTML文件。
无论你是否已经正在使用Bower和Grunt, 或者两者都有, grunt-wiredep将容易被插入使用, 您将看到下面的步骤。
注意:Bower还是一个新生儿, 所以这个东西改变的快, Bower组件的作者必须遵循一定的规则和最佳实践 使得这个插件尽可能正确。这个不是完美的,所有说, 有一些Bower组件可能不能像其他的一样会很好的工作。

Getting Started 入门指南 (翻译ReadMe)

*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:


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.


A simple sample apple: website | github


A simple tutorial on how to use grunt-wiredep