【问题标题】:How to include only specific parts of UI Bootstrap using Grunt如何使用 Grunt 仅包含 UI Bootstrap 的特定部分
【发布时间】:2015-06-08 22:46:54
【问题描述】:

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

我可以在 UI Bootstrap 网站上create a custom build with the online tool,这将创建一个缩小和非缩小的 JS 文件,其中只包含我选择的组件,没有开销。

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

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


bower install angular-ui-bootstrap,然后在bower_components/angular-ui-bootstrap 中调用Grunt build 创建一个包含所有 模块的UI Bootstrap 构建,可能有一种方法可以只使用模块的子集,但我想不通。

【问题讨论】:

    标签: gruntjs angular-ui-bootstrap bower


    【解决方案1】:

    可以使用以下命令来完成

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

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

    grunt build:tabs:buttons
    

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

    对于模块名称列表,检查src文件夹中的所有文件夹名称

    这方面的文档很少,但是如果您查看Gruntfile.js,他们在其中注册了 build 任务,他们提到了如何有选择地构建模块

    【讨论】:

      【解决方案2】:

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

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

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

      如果有很多时间,构建脚本是深度重构的理想选择。将自定义任务移至独立文件(或项目),记录流程,并可能为某些步骤实施标准任务(例如 CSS 缩小)。

      【讨论】:

      • 感谢您的回复!在发布我的问题之前,我注意到巨大而凌乱的 Gruntfile,但找不到任何明显的方法来使用它来创建我自己的构建。我正在寻找有关如何执行此操作的更详细指南。我会在我的问题中添加一个赏金来激发动力。
      • 如果你有兴趣,我加了一个赏金。
      猜你喜欢
      • 2021-12-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-03-02
      • 1970-01-01
      • 2017-09-24
      • 1970-01-01
      • 2018-03-22
      相关资源
      最近更新 更多