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

Cha*_*har 87 javascript jquery jquery-ui

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

谷歌建议我将所有jquery脚本文件合并到一个文件中.

我怎样才能做到这一点?

dfs*_*fsq 52

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

$ ./compressJS.sh some-script.js another-sctipt.js onemore.js
Run Code Online (Sandbox Code Playgroud)

  • 最好使用像Grunt,Gulp这样的任务管理器以及其他类似的东西自动执行此操作.使用Grunt我将我的less,typescript,handlebars编译成生成的文件夹,然后我将js/css文件复制到生成的文件夹中,最后我还将所有.js文件和一个css文件缩小为一个js文件所有.css文件.我有一个观察者在文件更改时重新运行该配置,以便我可以保存文件并刷新浏览器,并且所有更改都在1-3秒内应用. (3认同)

Pry*_*die 18

只需合并文本文件,然后使用YUI Compressor之类的东西.

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

2014年8月更新

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


Gar*_*een 11

你可以通过这样做

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

  • @Mikepote,是的...因此我使用了"include"这个词,即不要将<script src ="....">链接到多个文件,只需将它们包含在一个脚本元素中即可.理想情况下,应该使用cdn以及适当的缓存. (5认同)
  • 你能举一些例子吗? (3认同)

小智 9

我通常把它放在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)
Run Code Online (Sandbox Code Playgroud)

然后你运行:

make compile
Run Code Online (Sandbox Code Playgroud)

我希望它有所帮助.


elo*_*one 8

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

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

$ mergejs js_files_list.txt output.js
Run Code Online (Sandbox Code Playgroud)

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

$ mergejs -c js_files_list.txt output.js
Run Code Online (Sandbox Code Playgroud)

这将由output-min.jsGoogle的闭包编译器缩小.要么 :

$ mergejs -c js_files_list.txt output.js output.minified.js
Run Code Online (Sandbox Code Playgroud)

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

我觉得它对一个简单的网站很有帮助.


Cap*_*ule 7

脚本分组会适得其反,您应该使用http://yepnopejs.com/http://headjs.com等内容并行加载它们.

  • 组合javascript文件有正当理由.首先,请求20个2kb文件所需的时间比请求一个40kb的文件要长. (4认同)
  • 比你想象的更频繁.看一下stackoverflow的源代码:"...建议不要使用选项B,因为它会导致浏览器对所有小的.js文件(慢速)发出许多请求,而不是只需要一个更大的.js请求文件(更快)." (3认同)
  • @Capsule我不想告诉你,但互联网正在迅速从jQuery转移到MVC JavaScript,加载一个文件总是比发送多个HTTP请求更快. (3认同)

小智 7

将此脚本复制到记事本并另存为.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
Run Code Online (Sandbox Code Playgroud)


Jim*_*ler 5

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