如何在 Bower/Grunt 中显式包含 Foundation 5 子脚本

How to explicitly include Foundation 5 child scripts in Bower/Grunt?

本文关键字：包含 Foundation 脚本 Bower Grunt      更新时间：2023-09-26
前端

构建系统相当新，我正在Yeoman生成的角度操纵站点中进行操作。它使用 Gruntfile.js 来包含 bower.json，它声明以下内容 - 请注意，我添加了 Foundation 及其依赖项：

{
  "name": "mercurysocialclub",
  "version": "0.0.0",
  "dependencies": {
    "angular": "^1.3.0",
    "angular-animate": "^1.3.0",
    "angular-cookies": "^1.3.0",
    "angular-resource": "^1.3.0",
    "angular-route": "^1.3.0",
    "angular-sanitize": "^1.3.0",
    "angular-touch": "^1.3.0",
    "foundation": "^5.5.0",
    "fastclick": "^1.0.6",
    "modernizr": "^2.8.3"
  },
  "devDependencies": {
    "angular-mocks": "^1.3.0"
  },
  "appPath": "app",
  "moduleName": "mercurysocialclubApp"
}

一切都检查出来了。从终端运行 grunt --force 后，构建会在/app/index.html 中生成以下脚本调用，并导出/dist/vendor.js并连接所有调用：

Configuration is now:
  concat:
  { generated:
   { files:
      [ { dest: '.tmp/concat/scripts/vendor.js',
          src:
         [ 'bower_components/modernizr/modernizr.js',
         'bower_components/jquery/dist/jquery.js',
         'bower_components/angular/angular.js',
         'bower_components/angular-animate/angular-animate.js',
         'bower_components/angular-cookies/angular-cookies.js',
         'bower_components/angular-resource/angular-resource.js',
         'bower_components/angular-route/angular-route.js',
         'bower_components/angular-sanitize/angular-sanitize.js',
         'bower_components/angular-touch/angular-touch.js',
         'bower_components/fastclick/lib/fastclick.js',
         'bower_components/jquery.cookie/jquery.cookie.js',
         'bower_components/jquery-placeholder/jquery.placeholder.js',
         'bower_components/foundation/js/foundation.js' ] },
    { dest: '.tmp/concat/scripts/scripts.js',

但是，基金会轨道脚本似乎不包括在内。我无法弄清楚的是如何使用bower.json或Gruntfile.js显式包含基金会依赖项脚本。

此解决方案似乎未正确包含写入：http://foundation.zurb.com/forum/posts/21949-compiling-javascript-in-the-gruntfile

在我尝试包含的其他任何地方，要么被覆盖，要么无法访问 grunt 配置之外的bower_components目录。

知道我如何告诉Grunt/Bower在以下位置包含脚本：bower_components/foundation/js/foundation/foundation.*.js

-=-=-=-

=-=-

此外，在这种情况下，声明 Foundation 已初始化也会失败！ 

<script>
    $(document).ready(function(){
        $(document).foundation('orbit', 'reflow');
    }):
</script>

虽然，如果我从终端运行以下命令，一切都按预期工作：

$(document).foundation('orbit', 'reflow');

这里的秘密武器是我需要在我的主控制器中包含 $（document）.foundation（'orbit'， 'reflow'）; 在我的主控制器中，而不是在索引中.html。

在我的构建中使用以下块允许我包含 orbit js。

<!-- build:js(.) scripts/foundation.js -->
<!-- foundation:js -->
<script src="bower_components/foundation/js/foundation/foundation.orbit.js"></script>
<!-- endfoundation -->
<!-- endbuild -->
相关文章：