如何在一箇中添加所有Javascript文件的引用？

我有這種情況。我從頭開始了angularjs項目。對於我添加到我的項目中的每個js文件，都需要在index.html中引用它。這是我想要避免的。任何人都可以請我建議我最好的和容易實施的方式來解決它。如何在一箇中添加所有Javascript文件的引用？

我期待的那種2種選擇：（二硝基甲苯，但知道如何做到這一點）

1）包含所有的JS文件，然後，可以單個文件是指在單一的index.html文件

2）或者它應該以某種方式在瀏覽器需要時自動添加它？

很明顯，可能有其他的選項以及上面提到的其他選項。任何建議將有所幫助在此先感謝。

來源

2015-12-02 Ajay Kotnala

您正在尋找[gulp]（https://github.com/gulpjs/gulp）[this plugin]（https://github.com/klei/gulp-inject#basic-usage）。 – Shanoor

正如亞歷山大說，如果你選擇Grunt，您可以使用concat plugin所選文件的列表合併成一個單一的目標：

您在加載選擇插件後，你的gruntfile.js

grunt.loadNpmTasks('grunt-contrib-concat');

在繁重的配置定義了一個任務：

grunt.initConfig({ 
    concat: { 
    options: { 
     separator: ';', 
    }, 
    dist: { 
     // your source file list 
     src: ['src/js/*.js'], 
     //your destination file 
     dest: 'dist/app.js', 
    }, 
    }, 
});

然後註冊此任務列表：

grunt.registerTask('compile', ['concat']);

這將通過在命令行

等輸入「咕嚕纂」上運行，你只需要包含在dist/app.js文件您的索引。

grunt中有很多插件可用，也就是說，您可以使用grunt-include-source插件動態加載app.js文件，或使用grunt-contrib-uglify最小化js文件。

在gruntfile更多信息，請here

可以實現在第二個點，而不是要求的結果，我想你可以使用這樣的解決方案：

UPDATE：

我找不到端到端的concat教程，對不起。

對於普通步兵教程中，你可以閱讀this

否則，你可以從官方網站咕嚕安裝，配置遵循getting started頁面，並有一個概述。

當他們談論插件時，請參閱上面鏈接和解釋的grunt-contrib-concat插件的自述文件。

這些頁面可以爲您提供所需的所有技能。

最後，通過將dist.src中的所有文件合併到文件集dist.dest中來自定義Gruntfile.js中的concat配置，並且只在html中包含後者。

設置完成後，通過在項目文件夾的命令行中鍵入grunt compile來執行您的任務，並生成合並文件。

來源

2015-12-02 10:51:32 jenjis

感謝Jenjis，能否請你提出任何我可以遵循的網址來對我的問題進行端到端的實施。因爲上面提到的代碼對我來說是新的，所以需要稍微的背景和流程，以便我可以在我的項目中實現它。 –

非常感謝，我能夠做到。你提供的鏈接也解決了我的概念。我仍然需要做點工作，並將它修復到我的環境中，因爲我通過VS2013運行我的應用程序，其中只有f5應該加載所有javascripts文件，而不是通過grunt文件。但我的事情我可以在後期製作批處理文件中完成。 :) –

正如您在ShanShan,Grunt（或Gulp）的評論中已經提到的那樣，您正在尋找。

所以，你建立一個觀察任務，js文件被修改後，您連接所有這些文件/壓縮它們/不管。

我敢打賭，這個話題已經討論了很多。

請考慮使用Yeoman和Yeoman angular generator生成的基本應用程序。

最好的問候，亞歷山大

來源

2015-12-02 10:27:24

如何在一箇中添加所有Javascript文件的引用？

回答

相關問題