[英]How to explicitly include Foundation 5 child scripts in Bower/Grunt?
這是前端構建系統的新手,我正在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中顯式包含Foundation依賴腳本。
該解決方案似乎未正確包含寫入內容: 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'); 在我的主控制器中,而不是在index.html中。
在我的構建中使用以下代碼塊使我可以包含軌道js。
<!-- build:js(.) scripts/foundation.js -->
<!-- foundation:js -->
<script src="bower_components/foundation/js/foundation/foundation.orbit.js"></script>
<!-- endfoundation -->
<!-- endbuild -->
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.