将自定义引导程序构建集成到项目grunt任务中

Question

我有一个这样的项目结构...

app
├── 404.html
├── coffee
│   ├── app.coffee
│   └── controllers
├── colors.json
├── components
│   ├── angular
│   ├── angular-cookies
│   ├── angular-mocks
│   ├── angular-resource
│   ├── angular-sanitize
│   ├── angular-scenario
│   ├── bootstrap
│   ├── es5-shim
│   ├── jquery
│   └── json3
├── favicon.ico
├── index.jade
├── lib
│   ├── bootstrap
│   ├── font-awesome
│   ├── jquery
│   └── slider
├── robots.txt
├── styl
│   ├── main.styl
│   └── partials
└── views
    ├── demo.jade
    └── home.jade

我正在使用bower将所有东西安装在app/component文件夹中。 我打算将自定义变量文件添加到引导程序，并从较少的源文件中构建它。 在bower install之后，我可以轻松地修改variables.less文件，从而创建了app/bootstrap文件夹，但是我希望它从components文件夹外部读取我的自定义文件，而不必在其中进行任何修改。

我如何使用由bower加载的自定义variables.less文件将引导程序的构建合并到我现有的grunt build任务中？

Answer 1

我花了一段时间才能弄清楚less的变量声明和导入的工作方式，但是最后，我有了一个自定义的bootstrap构建，它通过较少的导入，并通过grunt进行了较少的编译-因此我的解决方案与grunt无关，但作为咕unt声构建的一部分加入。

我项目的main.less文件的内容...

// import the default bootstrap variables...
@import "../components/bootstrap/less/variables.less";

// custom variable overrides have to be loaded BEFORE bootstrap.less
// this is useful for changing any variables that influence the way bootstrap is built
@import "_bootstrap-variables-overrides.less";

// load the main bootstrap file
@import "../components/bootstrap/less/bootstrap.less";

// components overrides have to be loaded AFTER bootstrap.less
// this is useful for overriding bootstrap styles that are not configurable as variables
@import "_bootstrap-components-overrides.less";

// more less...
/* ... */

Answer 2

正确的“风俗”方式似乎是grunt-customize-bootstrap npm软件包。

只需安装它，并按照软件包页面上的说明在您的grunt编译过程中添加grunt任务，就可以了！