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

时间:2011-04-01 10:17:07

标签: javascript jquery jquery-ui

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

Google建议我将所有jquery脚本文件合并到一个文件中。

我该怎么做?

13 个答案:

答案 0 :(得分:52)

在Linux上,您可以使用简单的shell脚本https://github.com/dfsq/compressJS.sh将多个javascript文件合并到单个文件中。它利用了Closure Compiler在线服务,因此生成的脚本也得到了有效的压缩。

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

答案 1 :(得分:18)

只需合并文本文件,然后使用类似YUI Compressor

的内容

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

2014年8月更新

我现在已经迁移到使用Gulp进行javascript连接和压缩,就像使用各种插件和一些最小配置一样,你可以做一些事情,比如设置依赖项,编译coffeescript等以及压缩你的JS。

答案 2 :(得分:15)

答案 3 :(得分:11)

您可以通过

执行此操作
  • 一个。手动:将所有Javascript文件复制到一个,在其上运行压缩程序(可选但推荐)并上传到服务器并链接到该文件。
  • 湾使用PHP:只需创建一个包含所有JS文件的数组,然后include将它们全部输出并输出到<script>标记

答案 4 :(得分:8)

我通常将其放在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

我希望它有所帮助。

答案 5 :(得分:8)

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

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

$ mergejs js_files_list.txt output.js

如果您还要压缩生成的合并文件:

$ mergejs -c js_files_list.txt output.js

这将创建由Google的闭包编译器缩小的output-min.js。或者:

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

如果您需要名为output.minified.js

的缩小文件的特定名称

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

答案 6 :(得分:7)

脚本分组会适得其反,您应该使用http://yepnopejs.com/http://headjs.com

之类的内容并行加载它们

答案 7 :(得分:6)

将此脚本复制到记事本并另存为.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

答案 8 :(得分:5)

您可以使用Closure-compiler作为orangutancloud建议。值得指出的是,你实际上并不需要 来编译/缩小JavaScript,它应该可以简单地将JavaScript文本文件连接成一个文本文件。只需按照通常包含在页面中的顺序加入它们。

答案 9 :(得分:4)

如果您正在运行PHP,我建议使用Minify,因为它可以动态组合并缩小CSS和JS。一旦你配置它,就像正常工作一样,它会照顾好一切。

答案 10 :(得分:4)

您可以使用js编译器:https://github.com/knyga/kjscompiler 酷依赖管理

答案 11 :(得分:2)

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

它与众不同之处在于它在javascript中监视文件更改,并将其自动组合到您选择的脚本中。因此,每次测试时都无需手动“构建”您的javascript。希望它可以帮到你,我目前正在使用它。

答案 12 :(得分:0)

这可能需要付出一些努力,但您可以从codeplex下载我的开源wiki项目:

http://shuttlewiki.codeplex.com

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

代码应该是不言自明的,但它使得文件的组合和压缩有点比较简单 - 对我来说无论如何:)

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