在我最近的博客文章中，我解释了如何创建一个从0到hero的自定义控件。

在所有这些示例中，云指，我总是需要在自定义控件中包装一个外部库。一开始，大数据中心，我总是在源代码中复制库的最新主版本，并用grunt-openui5打包。

但我一点也不满意。BowerJS和npm的存在是有原因的，它们是一个包管理器，允许您轻松地与库的特定版本同步，并只需一个命令即可升级它。

这就是为什么我试图将grunt-openui5（感谢Matthias Oßwal的巨大帮助）推到极限，并与您分享我的工作。在这个例子中，我们将看到我所学到的一切，淘客购物，创建"openui5 flatpickr一个惊人的日期选择器为您的SAPUI5应用程序"。

在我们的情况下，我们只需添加（其他依赖需要开发和打包自定义库）flatpickr版本3.0.6（最新的一个从主存储库）

flatpickr将被下载和下载安装在/node_modules/flatpickr/dist内。我们特别对

/node_modules/flatpickr/dist感兴趣/flatpickr.min.js文件/节点\u模块/flatpickr/dist/flatpickr.min.css格式

"/3dparty/flatpickr"是flatpickr.js公司将包含在我们图书馆中的文件-预加载.jsflatpicker也包括它自己的css文件来定制和呈现DatePicker。这对我来说是最棘手的部分。

所有主题都必须在子文件夹主题中的库根包中定义。在我们的例子中，我们只是定义了基本主题（被所有其他人使用并与之合并）。

下面是我们的/themes/base中的内容/库.source.less

../../../../../flatpickr/dist/flatpickr.min.css格式是我们的node_modules文件夹中css文件的相对路径

构建主题并在指定文件：

库.css（常规css）图书馆-RTL.css文件（镜像css用于从右到左的支持）图书馆-参数.json（所有全局较少变量的键值图）

我们将更好地了解我们的应用程序中使用的一些选项Gruntfile.js文件任务

根路径：用于导入指令的根路径。如果较少的文件位于单独的文件夹中，企业大数据，但引用的文件都位于一个文件夹中，则此方法非常有用。

在本例中，我们有两个不同的根路径：

srcnode_modules

node_modules rootpath允许我们解析在/themes/base中定义的相对导入路径/库.source.less

文件：告诉任务主题文件的位置。'**/主题/*/库.source.less'允许您拥有多个主题（base、sap\u belize、sap\u bluecrystal等）

openui5\u preload是允许您将所有代码打包到库中的任务-预加载.js文件

资源：应该用作预加载文件源的资源/文件

cwd：用于查找资源的基/根目录。prefix：应该在所有找到的路径前面加上的目录命名空间前缀。如果源文件夹结构与模块名称空间不同，这将非常有用。src：用于在ecwd中查找相关资源的Glob模式。如果设置，默认模式将被替换。

在我们的例子中，我们只有两个资源实体，大淘客推广，一个用于我们的主src文件夹（库源代码所在的位置），另一个（更有趣的）包含在库中-预加载.jsflatpickr源代码位于node_modules文件夹内：

注意：如果您仔细看，前缀的路径与我们在应用程序中包含的资源的路径相同FlatDatePicker.js文件. 这就是我说的技巧

在终端中，键入

grunt将执行以下子任务（按顺序）：

清理：清理打包的自定义库的分发文件夹openui5\u主题：收集自定义库主题/cssopenui5\u预加载：打包主题和库代码复制：在我们的演示应用程序中复制打包的库（也许我会将这个子任务移到另一个名为grunt build demo的任务中）

下面你可以看到库-预加载.js由openui5\u预加载子任务生成。

下面是我们的openui5\u主题子任务的结果：对于每个openui5主题，我们有3个不同的压缩文件

希望您喜欢本教程。像往常一样随时给我一些反馈，以改善它！