如何使用Grunt仅包含UI Bootstrap的特定部分

时间:2015-05-30 14:27:30

标签: gruntjs angular-ui-bootstrap bower

我正在使用UI Bootstrap的手风琴,工具提示和过渡组件。

我可以在UI Bootstrap网站上create a custom build with the online tool,它将创建一个仅包含我选择的组件的缩小和非缩小的JS文件,而不会产生任何开销。

但是,我不想使用在线工具来编译我自定义版本的UI Bootstrap,而是想在本地编译我自己的版本,最好使用我已经使用的工具; Bower,Grunt和NPM。

所以我的问题:如何在本地创建自己的UI Bootstrap版本?

bower install angular-ui-bootstrap,然后在Grunt build中调用bower_components/angular-ui-bootstrap创建一个包含所有模块的UI Bootstrap构建,可能只有一种方法可以执行相同操作模块的一个子集,但我无法弄明白。

2 个答案:

答案 0 :(得分:4)

可以使用以下命令

完成
grunt build:moduleName1:moduleName2:moduleName3....:moduleNameN

例如,如果您要求构建仅包含标签按钮模块,则grunt命令将类似于

grunt build:tabs:buttons

生成的文件将出现在dist文件夹

有关模块名称列表,请检查src文件夹

中的所有文件夹名称

这方面的文档很少,但如果你检查Gruntfile.js,他们注册了 build 任务,他们会提到如何有选择地构建模块

答案 1 :(得分:0)

这并不像我预期的那样容易(并且应该如此)。

查看项目的Gruntfile.js。你会发现他们做了很多。将HTML和CSS转换为JS,以这种方式将所有脚本连接起来,以便其他人可以加载。此外,文件很难定位;它甚至包括自定义任务。

为了模仿它的行为,我建议:像往常一样通过Bower下载它。将其节点依赖项复制到您的package.json依赖项。然后复制Gruntfile.js,更改路由,并尝试删除代码的某些部分,直到达到某个点,此时无法删除更多行而不会破坏它。这不是一个好方法,但它应该是成功的。

如果有很多时间,构建脚本是深度重构的良好候选者。将自定义任务移动到独立文件(或项目),记录流程,以及执行某些步骤的标准任务(例如CSS缩小)。