确保在自定义 JS（WordPress Sage）之前调用供应商 JS

Question

我找不到如何在我自己的脚本之前加载供应商脚本。在manifest.json 我试过了：

"dependencies": {
  "main.js": {
    "files": [
      "scripts/vendor_script.js",
      "scripts/custom_script.js"
    ],
    "main": true
  },

不起作用：在我的自定义脚本之后调用供应商脚本。也试过了：

"dependencies": {
  "plugins.js": {
    "files": [
    "scripts/vendor/owl.carousel.min.js"
    ]
  },
  "main.js": {
    "files": [
      "scripts/main.js"
    ],
    "main": true
  },

一样。有什么建议吗？

[编辑] 我当前的 manifest.json 文件，我在其中遵循了 https://discourse.roots.io/t/custom-javascript-in-manifest-json-and-building-out-into-a-single-file/3316 的建议：

{
  "dependencies": {
    "main.js": {
       "vendor": [
        "scripts/vendor/owl.carousel.min.js"
      ],  
      "files": [        
        "scripts/main.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss",
        "styles/vendor/font-awesome.min.css",
        "styles/vendor/owl.carousel.min.css"        
      ],
      "main": true
    },
    "customizer.js": {
      "files": [
        "scripts/customizer.js"
      ]
    },
    "jquery.js": {
      "bower": ["jquery"]
    }
  },
  "config": {
    "devUrl": "http://127.0.0.1/pot/"
  }
}

[编辑#2]

$ node
> require('asset-builder')('./assets/manifest.json').globs.js
require('asset-builder')('./assets/manifest.json').globs.js
[ { type: 'js',
    name: 'main.js',
    globs:
     [ 'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\transition.js',
       'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\alert.js',
       'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\button.js',
       'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\carousel.js',
       'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\collapse.js',
       'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\dropdown.js',
       'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\modal.js',
       'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\tooltip.js',
       'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\popover.js',
       'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\scrollspy.js',
       'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\tab.js',
       'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\affix.js',
       'scripts/vendor/owl.carousel.min.js',
       'assets/scripts/main.js' ] },
  { type: 'js',
    name: 'customizer.js',
    globs: [ 'assets/scripts/customizer.js' ] },
  { type: 'js',
    name: 'jquery.js',
    globs: [ 'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\jquery\\dist\\jquery.js' ] } ]

我尝试使用的脚本是 Owl Carousel。如果我在 head.php 中添加以下内容，它可以正常工作：

<script src="<?php bloginfo("template_url"); ?>/assets/scripts/vendor/owl.carousel.min.js" type="text/javascript" charset="utf-8"></script>

如果相反，我将 manifest.json 设置为如前所示，我在 Firebug 中得到“.owlCarousel 不是函数”，并且我的滑块不起作用。

注意：我没有使用 Bowel，这在常规 Sage 工作流程中不是强制性的，对吧？我刚刚将owl.carousel.min.js 复制到assets/scripts/vendor/。

Answer 1

在全新的 Sage 8 安装中，我能够使用 Bower 快速安装 OwlCarousel，正如 the Sage documentation 中所述，没有任何问题；它的脚本和样式都正确包含在项目脚本和样式之前。

Font Awesome 需要 Bower 覆盖，因为它的默认 Bower main 属性指示 Bower 使用 LESS 和 SCSS 文件；一旦我将它设置为 just 使用 SCSS 它工作正常。 Sage 8 附带一组工作的 Bower 覆盖，您应该将其用作示例。 See here.

如果您无法以正确的顺序手动添加脚本，您的脚本或资产构建器设置会出现其他问题。我怀疑您的资产路径可能不正确。排除故障并确保清单指向正确资产路径的最佳方法是在新的终端窗口中启动交互式节点会话。

首次运行（在您的主题目录中）：

node

然后运行（也在你的主题目录中）：

require('asset-builder')('./assets/manifest.json').globs.js

或（仍在您的主题目录中）：

require('asset-builder')('./assets/manifest.json').globs.css

输出将显示资产的路径和它们被包含的顺序。

如果您在运行gulp watch 任务时修改manifest.json，则可能需要暂停该任务，运行默认的gulp 构建，然后重新启动您的gulp watch 任务。

如果您在使用上述步骤查看资产构建器输出后仍然遇到困难，请在此处发布（在此处或在 the Roots forum）输出以及您在安装供应商脚本和自定义脚本时执行的安装步骤'正在尝试使用，以便有人可以尝试重新创建您的环境。