如何合併所有js文件？

Question

我的HTML文件中有更多的javascript文件作爲外部的，我想結合考慮到不擁擠。有沒有什麼辦法可以結合我的js文件？例如;

我的文件：

a.js 
b.js 
c.js 
d.js 

，我想;

all.js 

Answer 1

看看requirejs.org，尤其是看r.js（http://requirejs.org/docs/optimization.html）

Answer 2

可能會有所幫助：https://github.com/mrclay/minify

OR

創建文件all.js和粘貼a.js，b.js，c.js，d.js文件代碼

Answer 3

a.js

var i=0; 
function fun1() 
{ 
... 
} 

個

b.js

var k=0; 
function fun2() 
{ 
... 
} 

all.js只需複製，粘貼像CSS

var i=0; 
function fun1() 
{ 
... 
} 
var k=0; 
function fun2() 
{ 
... 
} 

採取分號的關懷和關閉括號當你purticularly在eventlistener寫整個腳本，特別是'DOMContentLoaded'

document.addEventlistener('DOMContentloaed',function() 
{ 

//whole big script 

} 
); 

代替使用

document.addEventlistener('DOMContentloaed',some_function); 

var some_function = function(){*bla bla bla*}; 

Answer 4

一個簡單的bash cat操作將做你想做的，但是，在一些階段，你可能會想要更多的權利？

Grunt and Grunt-contrib-concat是一個不錯的入門者，但你很快就會意識到grunt並不是特別好。總結使用情況，你創建一個gruntfile，安裝一些依賴關係（即安裝grunt及其命令行界面，這很容易），並從項目根目錄運行grunt。然後它解析grunt文件以找出你想要它做什麼，並做到這一點。很簡單，簡單就好。

接下來是Gulp，這是一個很好的使用流的構建系統，所以稍微複雜一點（更好，更容易和更強大，但是流首先會讓人感到困惑）。 Gulp以相同的方式工作，只是它解析gulpfile的說明。對於CONCAT操作實際吞命令是微不足道：

gulp.src('*.js') 
    .pipe(gulp.dest('all.js') 

的.src和.dest可以管通過多個變換，例如縮小文件，transpiling文件，通知-插件和模塊的列表是令人眼花繚亂的之間（因爲它是咕嚕聲）。然而，如果你是node和npm的粉絲（你可能應該是），那麼你可以使用npm scripts來創建一個構建系統。npm是節點包管理器，需要package.json來提供有關如何工作的一些線索。該JSON說明書的一部分，是一個scripts塊

"scripts": { 
    "build" : "cat *.js > all.js" 
} 

然後可以使用npm run build從命令行，由此npm將解析package.json和（實際上SH）執行使用腳本的bash。

請注意，這些是構建系統，還有很多其他系統。

也有其他包裝商（你可能會爲你構建系統的一部分使用，儘管一些項目，他們是你整個構建系統），但他們比你的需求更加複雜，對自己的研究browserify ，webpack和jspm都是優秀的（儘管AMD模塊丟失了，所以require.js可能不值得你花時間），儘管這個領域正在變得擁擠。這些都是非常強大的模塊化工具，但它們需要對結構代碼的結構進行一些更改。如果你認真對待模塊化，那麼他們值得你的時間學習。

在稍微不同的正切值上，有一些討論關於一個大文件實際上是否比一些較小的腳本更有益。在許多情況下，簡單地提供一些小文件實際上更快，並且可能更容易，儘管可以將代碼一起粉碎。目前，儘可能少的HTTP請求可能仍然是最好的，但這種性能要求已經消失。