3

我找不到如何在我自己的脚本之前加载供应商脚本。在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-的建议文件/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/.

4

1 回答 1

1

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

Font Awesome 需要 Bower 覆盖，因为它的默认 Bowermain属性指示 Bower 使用 LESS和SCSS 文件；一旦我将其设置为仅使用 SCSS，它就可以正常工作。Sage 8 附带一组工作的 Bower 覆盖，您应该将其用作示例。见这里。

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

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

node

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

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

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

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

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

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

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

于 2016-07-04T23:46:28.503 回答