如何在 Bower/Grunt 中明确包含 Foundation 5 子脚本?
How to explicitly include Foundation 5 child scripts in Bower/Grunt?
对前端构建系统相当陌生,我正在使用 Yeoman 生成的 angular 操纵站点。它使用 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"
}
全部检查完毕。 运行ning g运行t --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.
显式包含 Foundation 依赖脚本
此解决方案似乎没有正确写入:
http://foundation.zurb.com/forum/posts/21949-compiling-javascript-in-the-gruntfile
我尝试包含的任何其他地方要么被覆盖,要么无法访问 g运行t 配置之外的 bower_components 目录。
知道如何告诉 Grunt/Bower 在以下位置包含脚本:bower_components/foundation/js/foundation/foundation.*.js
-=-=-=-=-=-
此外,在这种情况下声明基础初始化也失败了!
<script>
$(document).ready(function(){
$(document).foundation('orbit', 'reflow');
}):
</script>
虽然,如果我从终端运行这个命令,一切都按预期工作:
$(document).foundation('orbit', 'reflow');
这里的秘诀是我需要包含 $(document).foundation('orbit', 'reflow');在我的主控制器中,而不是在 index.html.
在我的构建中使用以下块允许我包含轨道 js。
<!-- build:js(.) scripts/foundation.js -->
<!-- foundation:js -->
<script src="bower_components/foundation/js/foundation/foundation.orbit.js"></script>
<!-- endfoundation -->
<!-- endbuild -->
对前端构建系统相当陌生,我正在使用 Yeoman 生成的 angular 操纵站点。它使用 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"
}
全部检查完毕。 运行ning g运行t --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.
显式包含 Foundation 依赖脚本此解决方案似乎没有正确写入: http://foundation.zurb.com/forum/posts/21949-compiling-javascript-in-the-gruntfile
我尝试包含的任何其他地方要么被覆盖,要么无法访问 g运行t 配置之外的 bower_components 目录。
知道如何告诉 Grunt/Bower 在以下位置包含脚本:bower_components/foundation/js/foundation/foundation.*.js
-=-=-=-=-=-
此外,在这种情况下声明基础初始化也失败了!
<script>
$(document).ready(function(){
$(document).foundation('orbit', 'reflow');
}):
</script>
虽然,如果我从终端运行这个命令,一切都按预期工作:
$(document).foundation('orbit', 'reflow');
这里的秘诀是我需要包含 $(document).foundation('orbit', 'reflow');在我的主控制器中,而不是在 index.html.
在我的构建中使用以下块允许我包含轨道 js。
<!-- build:js(.) scripts/foundation.js -->
<!-- foundation:js -->
<script src="bower_components/foundation/js/foundation/foundation.orbit.js"></script>
<!-- endfoundation -->
<!-- endbuild -->