Liferay 6.1.20：最小化并捆绑主题Javascript

 

有没有一种方法可以将Liferay内置的JavaScript最小化和捆绑功能应用到我包含在我的主题中的JavaScript中？ 我在portal-ext.properties中有javascript.fast.load=true ，并且Liferay的javascript按照预期与everything.jsp捆绑并缩小。 此外，通过portlet的liferay-portal.xml文件包含的所有Portlet JavaScript都将按预期缩小。 不过，我有很多包含在我的主题中的JavaScript文件，因为它们在每个页面上都被使用，我希望它们最小化并与所有Liferay门户网站javascript一起捆绑到everything.jsp 。 我已经尝试了这个问题提出的方法，但我认为这只适用于钩子，因为MinifyFilter会在门户网站应用程序的上下文（即<TOMCAT>/webapps/ROOT查找文件以缩小和绑定文件。 有没有一种方法可以指定不同web应用程序中的文件路径（这里是主题）作为javascript.bundle.dir参数？ 换句话说，像javascript.bundle.dir[javascript.jquery.files]=/<theme-path>/js 。 我已经尝试了javascript.bundle.ids ， javascript.bundle.dependencies等许多变体和组合，但无济于事。 我知道我可以通过将javascript放在钩子中或将其放入portlet中并将其嵌入到主题中来解决问题，但我真的很想将javascript保留在主题中。 有没有合理的方法来完成这个？

似乎没有一种很好的方式来包含缩小和捆绑的Liferay JavaScript主题中的JavaScript文件。 虽然您可以在包含文件的portal-ext.properties中定义一个javascript包，但无法按照需要的方式排列依赖关系，以便仅使用配置使所有内容都可以正常工作。 你可以配置“everything”包依赖于你的自定义包，但这不是很有用。 如果您可以将Liferay配置为使用您的自定义捆绑包作为新的“所有内容”捆绑包并告诉Liferay您的捆绑包依赖于Liferay的“所有内容”捆绑包，那将会非常有用。 但是，包含的实际捆绑ID在Liferay的top_js.jspf文件中被硬编码。 因此，让所有东西都能正常工作的唯一方法就是重写Liferay对javascript.everything.files的定义，以包含Liferay的文件和您的自定义JavaScript。 这似乎不是一个很好的解决方案，因为它篡改了Liferay的包含JavaScript的列表，当您需要升级Liferay时，这肯定会很痛苦。 正如Olaf所建议的那样，您可以自行缩小和捆绑js，并将其包含在portal_normal模板中。 这是一个非常合理的解决方案，我通常会推荐。 不幸的是，我处于一种情况，我的客户要求将所有文件捆绑在一个文件中，我们不允许修改构建过程。

挂钩解决方法

有一个解决方案使用一个钩子， 我不一定建议，但它确实实现了将所有JavaScript最小化并与Liferay的javascript一起捆绑的目标。 基本的过程是将javascript从主题移动到一个钩子中，在portal-ext.properties中配置一个包含所有文件的新包，然后为top_js.jspf创建一个jsp钩子，该钩子包含您的新包而不是硬包编码的javascript.everything.files或javascript.barebones.files包。 步骤是：

  • 将您的JavaScript文件移动到一个hook项目中，并将它们放在html / js下。 这将导致文件被复制到门户网站应用程序下的javascript目录，即<TOMCAT_HOME>/ROOT/html/js 。 这是Liferay MinifyFilter寻找JavaScript文件来缩小和捆绑的地方。

  • 在portal-ext.properties中定义一个JavaScript包，它引用了所有需要包含在由MinifyFilter创建的包中的JavaScript文件。 你的portal-ext.properties文件应该是这样的： 

    minifier.enabled=true
javascript.fast.load=true

javascript.my.js.files =  
jquery.1.11.1,
my-js-lib.js,
my-other-js-lib.js

javascript.bundle.ids=
    javascript.barebone.files,
    javascript.everything.files,
    javascript.my.js.files  

javascript.bundle.dir[javascript.my.js.files]=/html/js

# our bundle depends on all the files in the "everything" bundle
javascript.bundle.dependencies[javascript.my.js.files]=javascript.everything.files

  • 为top_js.jspf创建一个JSP钩子。 该文件位于<TOMCAT_HOME>/ROOT/html/common/themes 。 根据用户是否经过身份验证（如果用户通过身份验证，他们获得everything.jsp，否则包含barebones.jsp），该文件包含barebones.jsp或everything.jsp。 根据您的要求，将对javascript.everything.files和/或javascript.barebones.files软件包的引用替换为对新软件包的引用。 例如，如果您只想在用户通过身份验证时包含您的JavaScript，则只需将javascript.everything.files引用替换即可。 具体来说，您进行了以下更改：

    • 这一行： 

    <script src="<%= HtmlUtil.escape(PortalUtil.getStaticResourceURL(request, themeDisplay.getCDNDynamicResourcesHost() + themeDisplay.getPathJavaScript() + "/everything.jsp", "minifierBundleId=javascript.everything.files", javaScriptLastModified)) %>" type="text/javascript"></script>

    更改为： 

    <script src="<%= HtmlUtil.escape(PortalUtil.getStaticResourceURL(request, themeDisplay.getCDNDynamicResourcesHost() + themeDisplay.getPathJavaScript() + "/everything.jsp", "minifierBundleId=javascript.my.js.files", javaScriptLastModified)) %>" type="text/javascript"></script>

    和这一行： 

    javaScriptFiles = JavaScriptBundleUtil.getFileNames(PropsKeys.JAVASCRIPT_EVERYTHING_FILES);

    更改为： 

    javaScriptFiles = JavaScriptBundleUtil.getFileNames("javascript.my.js.files");

    *非全球钩预警*

    如果您将javascript和top_js.jspf钩子放入具有其他钩子的项目中，并且项目配置为使用非全局jsp钩子，即<custom-jsp-global>false</custom-jsp-global>则解决方案将变为更复杂。 这是因为设置<custom-jsp-global>true</custom-jsp-global>会使Liferay重命名您的hook jsp文件，而不是重命名门户的jsp文件。 例如，如果custom-jsp-global设置为true（默认设置），那么当我为名为top_js.jspf的页面创建钩子时，门户网站会将原始top_js.jspf文件重命名为top_js.portal.jsp和我的钩子文件将被用来代替原来的。 但是，当custom-jsp-global设置为false时，原始文件保持不变，并且将jsp钩子文件重命名为包含钩子名称（如top_js.my-hook.jspf 。 当您为包含文件（如top_js.jspf创建钩子时，这是一个问题，因为包含top_js.jspf的文件仍然会引用旧文件，而不是名为top_js.my-hook.jspf 。 这意味着你还必须为包含你的钩子的文件创建一个钩子。 同样，如果该文件被另一个文件包含，则必须为该文件创建钩子等等，直到到达顶层页面。 所以，在试图为top_js.jspf创建一个钩子的top_js.jspf我们还必须执行以下操作：

  • 为top_head.jspf创建一个钩子，并用对我们的钩子top_js.my-hook.jspf的引用替换对top_js.jspf的引用。

    • 所以这一行 

    <%@ include file="/html/common/themes/top_js.jspf" %>

    变成这个 

    <%@ include file="/html/common/themes/top_js.my-hook.jspf" %>
  • top_head.jspf文件实际上由portal_normal.vm的主题使用Velocity变量包含，该变量在init.vm中的以下行中初始化：

    • 您需要将$top_head_include分配给主题的init_custom.vm的top_head.my-hook.jspf挂钩，如下所示： 

    #set ($top_head_include = "$dir_include/common/themes/top_head.my-hook.jsp")

    您的主题可以访问门户网站生成的所有HTML。 虽然您可能需要加载一个额外的文件（无论如何，css会缩小整个主题），但您可以轻松地将所有（已经）缩小的js文件添加到您的主题中，并将它们包含在您的templates/portal-normal.ftl实现中。

    这将像在portal-normal.ftl中拥有这一部分一样简单： 

    <head>
  <title>${the_title} - ${company_name}</title>
  <meta content="initial-scale=1.0, width=device-width" name="viewport" />
  ${theme.include(top_head_include)}
  <script src="${javascript_folder}/my-minified-javascript.js"/>
</head>

    注意：除<script>所有行都已经在默认的ftl文件中。 这样，你最终会得到两个加载的js文件（准系统或一切，加上你自己的文件），但这并不算太坏。 您还可以将缩小添加到主题的构建过程，以便您不必手动维护缩小的代码。

    我还没有尝试过的另一种方法是检查Liferay的javascript minifier（例如，在webapps/ROOT/html/common/themes/tom_js.jsp ）以查看如何利用它来动态缩减文件。

    出于完整性原因（也许它有助于其他人），我在这里留下我的第一个答案，你不能像第一个评论中说的那样使用它：

    在portal.properties有一个部分，在portal-ext.properties中用以下标题重载： 

    ##
## JavaScript
##

#
# Set a list of JavaScript files that will be loaded automatically in
# /html/common/themes/top_js.jsp.
#
# There are two lists of files specified in the properties
# "javascript.barebone.files" and "javascript.everything.files".
#
# As the name suggests, the barebone list is the minimum list of JavaScript
# files required for most cases. The everything list includes everything
# else not listed in the barebone list.
#
# The two lists of files exist for performance reasons because
# unauthenticated users usually do not utilize all the JavaScript that is
# available. See the property "javascript.barebone.enabled" for more
# information on the logic of when the barebone list is used and when the
# everything list is used and how to customize that logic.
#
# The list of files are also merged and packed for further performance
# improvements. See the property "javascript.fast.load" for more details.
#

    例如配置javascript.everything.files （默认情况下，该评论，为简洁起见，我不在这里复制）

    链接地址: http://www.djcxy.com/p/60159.html

    上一篇: Liferay 6.1.20 : Minimize and bundle theme Javascript

    下一篇: Liferay Log Utilty