連接Bootstrap，jQuery和本地JavaScript - 打破jQuery

目前我縮小和連接我的JavaScript和CSS文件爲我的本地「主題」。然後我在我的網站的頭部加載Bootstrap，jQuery和我的本地JavaScript/css文件。連接Bootstrap，jQuery和本地JavaScript - 打破jQuery

雖然這個工作，它確實導致8個單獨的資源負載，而不是隻有2（JS爲1，CSS爲1），這是我想完成的。（目前我不想異步加載多個庫）。

我在我的構建系統中使用Grunt以調用Uglify操作來縮小我的JavaScript。

下面是我Gruntfile.js

uglify: { 
    build: { 
     files: [{ 
      src: ['src/main/webapp/js/vendor/*.js', 'src/main/webapp/js/*.js', '!src/main/webapp/js/output.min.js'], 
      dest: 'src/main/webapp/js/output.min.js' 
     }] 
    } 
}

我認爲通過指定已精縮jQuery和引導庫的醜化動作我能得到它的庫與我的精縮「的主題相結合的相關部分'JavaScript。通過連接和涅槃這些文件，我打破的東西

Uncaught Error: Bootstrap's JavaScript requires jQuery 
Uncaught ReferenceError: $ is not defined 
Uncaught ReferenceError: $ is not defined

很明顯：但是這樣做的時候，我收到然後在瀏覽器中的以下錯誤。

有沒有人有任何建議？我試過使用Bootstrap和jQuery庫的縮小版和非縮減版來確保。

乾杯，安迪

來源

2015-06-04 Andy Esser

的問題是，你包括jQuery的前引導的JavaScript文件。

Bootstrap依賴於jQuery。您需要先包含jQuery，然後再包含任何需要jQuery的東西。

來源

2015-06-04 10:59:29

哈，現在我覺得自己就像一個木偶...通過做/vendor/*.js，它顯然是按字母順序迭代文件 - 在jQuery之前做Bootstrap。我現在已經按順序明確地設置了每個文件，並且它完美地工作。不能相信我錯過了這一點。非常感謝 –

假設您使用標準的grunt-contrib-concat進行級聯，您需要確保按照正確的順序指定文件。

例如，在我的工作Grunt配置文件（我工作與基金會，而不是Bootstrap，但他們都依賴於jQuery）我有以下設置爲我的供應商/外部文件。 build/external.all.min.js是從jQuery開始，然後是基礎，然後是所有其他腳本構建的預縮小代碼。

files: { 
    'build/external-all.min.js': [ 
    'build/external/jquery.min.js', 
    'build/external/foundation.min.js', 
    'build/external/*.js'] 
}

來源

2015-06-04 11:04:12 Andy

我最近經歷了這個。如果你想使用Grunt來連接你的腳本，你必須手動確保正確的文件序列，至少對於那些不具備依賴性的文件。與一些樣式表一樣，如果你依賴它們正確級聯並且不使用@imports。 – ecc

嗨，謝謝你 - 這事實證明這是我沒有接受的訂單問題。我已經將@Ivanka Tordorova的答案標記爲正確，因爲它首先出現。謝謝你的幫助！ –

連接Bootstrap，jQuery和本地JavaScript - 打破jQuery

回答

相關問題