将多个JavaScript文件合并成一个JS文件

我在我的Web应用程序中使用jQuery,我需要加载更多的jQuery脚本文件到一个单一的页面。

谷歌build议我把所有的jQuery脚本文件合并成一个文件。

我该怎么做?

在Linux上,您可以使用简单的shell脚本https://github.com/dfsq/compressJS.sh将多个JavaScript文件合并为一个。; 它使用Closure Compiler在线服务,因此生成的脚本也被有效地压缩。

$ ./compressJS.sh some-script.js another-sctipt.js onemore.js 

只要结合文本文件,然后使用像YUI压缩机的东西。

使用命令cat *.js > main.js可以轻松地组合文件,然后可以使用java -jar yuicompressor-xyzjar -o main.min.js main.js通过YUI压缩器运行java -jar yuicompressor-xyzjar -o main.min.js main.js

2014年8月更新

我现在已经迁移到使用Gulp的JavaScript连接和压缩,因为各种插件和一些最小的configuration,你可以做的事情,如设置依赖,编译咖啡等,以及压缩你的JS。

你可以通过

  • 一个。 手动:将所有的Javascript文件复制到一个,运行一个压缩器( 可选但是推荐 ),并上传到服务器并链接到该文件。
  • 使用PHP:只需创build一个包含所有JS文件的数组,然后输出到<script>标签中

我在Linux上使用这个shell脚本https://github.com/eloone/mergejs

与上面的脚本相比,它具有使用起来非常简单的优点,另外一个好处是您可以列出要合并到input文本文件而不是命令行中的js文件,因此您的列表是可重用的,您不必每次都要input文件。 这是非常方便的,因为每当你想要投入生产时,你都会重复这个步骤。 您也可以评论不想在列表中合并的文件。 您最可能input的命令行是:

 $ mergejs js_files_list.txt output.js 

如果你还想压缩生成的合并文件:

 $ mergejs -c js_files_list.txt output.js 

这将创build由Google的闭包编译器缩小的output-min.js 。 要么 :

 $ mergejs -c js_files_list.txt output.js output.minified.js 

如果您想要一个名为output.minified.js缩小文件的特定名称

我觉得这对一个简单的网站很有帮助。

脚本分组会起反作用,您应该使用http://yepnopejs.com/或http://headjs.com

我通常使用Makefile

 # All .js compiled into a single one. compiled=./path/of/js/main.js compile: @find ./path/of/js -type f -name "*.js" | xargs cat > $(compiled) 

然后你运行:

 make compile 

我希望它有帮助。

你可以像orangutancloudbuild议的那样使用Closure编译器。 值得指出的是,实际上并不需要编译/缩小JavaScript,应该可以简单地将JavaScript文本文件连接成单个文本文件。 只要按照他们通常包含在页面中的顺序join即可。

将此脚本复制到记事本并保存为.vbs文件。 在此脚本上拖放.js文件。

PS。 这只会在Windows上工作。

 set objArgs = Wscript.Arguments set objFso = CreateObject("Scripting.FileSystemObject") content = "" 'Iterate through all the arguments passed for i = 0 to objArgs.count on error resume next 'Try and treat the argument like a folder Set folder = objFso.GetFolder(objArgs(i)) 'If we get an error, we know it is a file if err.number <> 0 then 'This is not a folder, treat as file content = content & ReadFile(objArgs(i)) else 'No error? This is a folder, process accordingly for each file in folder.Files content = content & ReadFile(file.path) next end if on error goto 0 next 'Get system Temp folder path set tempFolderPath = objFso.GetSpecialFolder(2) 'Generate a random filename to use for a temporary file strTempFileName = objFso.GetTempName 'Create temporary file in Temp folder set objTempFile = tempFolderPath.CreateTextFile(strTempFileName) 'Write content from JavaScript files to temporary file objTempFile.WriteLine(content) objTempFile.Close 'Open temporary file in Notepad set objShell = CreateObject("WScript.Shell") objShell.Run("Notepad.exe " & tempFolderPath & "\" & strTempFileName) function ReadFile(strFilePath) 'If file path ends with ".js", we know it is JavaScript file if Right(strFilePath, 3) = ".js" then set objFile = objFso.OpenTextFile(strFilePath, 1, false) 'Read entire contents of a JavaScript file and returns it as a string ReadFile = objFile.ReadAll & vbNewLine objFile.Close else 'Return empty string ReadFile = "" end if end function 

如果你正在运行PHP,我build议Minify,因为它确实结合并缩小了CSS和JS。 一旦你完成了configuration,就像平常一样工作,并且处理所有事情。

你可以使用KjsCompiler: https : //github.com/knyga/kjscompiler酷依赖pipe理

你可以使用我制作的脚本。 您需要JRuby来运行这个。 https://bitbucket.org/ardee_aram/jscombiner(JSCombiner )。

这个区别在于,它会监视JavaScript中的文件更改,并将其自动结合到您select的脚本中。 所以,每次testing时都不需要手动“编译”你的javascript。 希望它可以帮助你,我目前正在使用这个。

这可能是一些努力,但你可以从codeplex下载我的开源wiki项目:

http://shuttlewiki.codeplex.com

它包含一个使用http://yuicompressor.codeplex.com/项目的CompressJavascript项目(和CompressCSS)。;

代码应该是不言而喻的,但它使得文件有点simnpler结合和压缩—无论如何:)

ShuttleWiki项目展示了如何在构build后事件中使用它。