grunt-injector:将 bootstrap bower 组件注入 index.html

grunt-injector: Inject bootstrap bower component to index.html

我已经对 grunt-injector 进行了研究。但是,我还没有发现任何足够简单的解释 grunt-injector.

将一些文件注入另一个文件的过程

我的index.htmlheader:

<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>SmartHome</title>
<meta name="description" content=""/>
<meta name="author" content=""/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<!-- build:css(client) styles/global.css -->
  <!-- bower:css -->
  <link rel="stylesheet" href="/bower_components/normalize.css/normalize.css" />
  <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" />
  <link rel="stylesheet" href="/bower_components/nouislider/distribute/nouislider.min.css" />
  <!-- endbower -->
<!-- endbuild -->

每次我 运行 g运行t 服务时,它都会删除

<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" />

我不知道为什么。我的 bower.json 包含 bootstrap ~3.3.4 作为依赖项。我用 bower install --dev 等尝试了很多方法......但是没有运气让这个 link 回来。

所以我认为我最后的选择是使用 grunt-injector 函数。谁能给我提示所需的语法?我的文件结构:

/client/
---bower_components/
    (somemore folders)
    ---bootstrap.css
index.html
injector: {
    options: {
        // Task-specific options go here. 
    },
    bower_dependencies: {
        files: {
            'index.html': ['bower.json'],
        }
    }
}

对于此任务,您可以使用:https://github.com/taptapship/wiredep

示例:

wiredep: {

                  task: {

                    // Point to the files that should be updated when
                    // you run `grunt wiredep`
                    src: [
                      'src/main/resources/view.html'
                    ],

                    options: {
                      // See wiredep's configuration documentation for the options
                      // you may pass:

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