Birden çok JavaScript dosyasını tek bir JS dosyasında birleştirin [kapalı]

Web uygulamamda jquery kullanıyorum ve tek bir sayfaya daha fazla jquery komut dosyası yüklemem gerekiyor.

Google, tüm jquery komut dosyalarını tek bir dosyada birleştirmemi önerdi.

Bunu nasıl yapabilirim?

Linux'ta , birden çok javascript dosyasını tek bir dosyada birleştirmek için https://github.com/dfsq/compressJS.sh basit bir kabuk komut dosyasını kullanabilirsiniz . Closure Compiler çevrimiçi hizmetini kullanır, böylece ortaya çıkan komut dosyası da etkili bir şekilde sıkıştırılır.

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

Google kapatma derleyicisini deneyin:

http://code.google.com/closure/compiler/docs/gettingstarted_ui.html

Metin dosyalarını birleştirin ve ardından YUI Compressor gibi bir şey kullanın .

Dosyalar, komut kullanılarak kolayca birleştirilebilir cat *.js > main.jsve daha sonra main.js, kullanılarak YUI sıkıştırıcı aracılığıyla çalıştırılabilir java -jar yuicompressor-x.y.z.jar -o main.min.js main.js.

Ağustos 2014 Güncellemesi

Şimdi , çeşitli eklentilerde olduğu gibi javascript birleştirme ve sıkıştırma için Gulp kullanmaya başladım ve bazı minimum yapılandırmalarda, bağımlılıklar kurmak, kahve komut dosyası derlemek vb. Gibi şeyleri yapabilir ve JS'nizi sıkıştırabilirsiniz.

Bunu şu yolla yapabilirsiniz:

• a. Manuel olarak: tüm Javascript dosyalarını tek bir dosyaya kopyalayın, üzerinde bir sıkıştırıcı çalıştırın ( isteğe bağlı ancak önerilir ) ve sunucuya yükleyin ve bu dosyaya bağlantı verin.
• b. PHP'yi kullanın: Tüm JS dosyalarının ve hepsinin bir dizisini oluşturun includeve bir <script>etikete çıktı alın

Genelde şuna sahip olurum 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)

Sonra koşarsın:

make compile

Umut ediyorum bu yardım eder.

Bu kabuk komut dosyasını Linux'ta https://github.com/eloone/mergejs kullanıyorum .

Yukarıdaki komut dosyalarıyla karşılaştırıldığında, kullanımının çok basit olma avantajlarına sahiptir ve büyük bir artı, birleştirmek istediğiniz js dosyalarını komut satırında değil, bir girdi metin dosyasında listeleyebilmenizdir, böylece listeniz yeniden kullanılabilir ve dosyalarınızı her birleştirmek istediğinizde yazmak zorunda değilsiniz. Üretime her adım atmak istediğinizde bu adımı tekrar edeceğiniz için çok kullanışlıdır. Listede birleştirmek istemediğiniz dosyalara da yorum yapabilirsiniz. Büyük olasılıkla yazacağınız komut satırı şudur:

$ mergejs js_files_list.txt output.js

Ve sonuçta ortaya çıkan birleştirilmiş dosyayı da sıkıştırmak istiyorsanız:

$ mergejs -c js_files_list.txt output.js

Bu, output-min.jsGoogle'ın kapanış derleyicisi tarafından küçültülmüş oluşturacaktır . Veya:

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

Küçültülmüş dosyanız için belirli bir ad istiyorsanız output.minified.js

Basit bir web sitesi için gerçekten yararlı buluyorum.

Komut dosyası gruplaması verimsizdir, bunları http://yepnopejs.com/ veya http://headjs.com gibi bir şey kullanarak paralel olarak yüklemelisiniz.

Bu komut dosyasını not defterine kopyalayın ve .vbs dosyası olarak kaydedin. .Js dosyalarını bu komut dosyasına sürükleyip bırakın.

ps. Bu yalnızca pencerelerde çalışacaktır.

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

Closure-derleyiciyi orangutancloud'un önerdiği gibi kullanabilirsiniz. Aslında JavaScript'i derlemenize / küçültmenize gerek olmadığını , JavaScript metin dosyalarını tek bir metin dosyasına birleştirmenin mümkün olması gerektiğini belirtmekte fayda var. Normalde sayfaya dahil edildikleri sırayla onlara katılın.

PHP çalıştırıyorsanız, tavsiye küçültmek o CSS ve JS ikisi için anında birleştirir ve küçültür yapar çünkü. Bir kez yapılandırdıktan sonra, normal şekilde çalışın ve her şeyi halledin.

KjsCompiler'ı kullanabilirsiniz: https://github.com/knyga/kjscompiler Soğuk bağımlılık yönetimi

Yaptığım bir senaryoyu kullanabilirsiniz. Bunu çalıştırmak için JRuby'ye ihtiyacınız var. https://bitbucket.org/ardee_aram/jscombiner (JSCombiner).

Bunu diğerlerinden ayıran şey, javascript'teki dosya değişikliklerini izlemesi ve otomatik olarak seçtiğiniz komut dosyasıyla birleştirmesidir. Dolayısıyla, her test ettiğinizde javascript'inizi elle "oluşturmanıza" gerek yoktur. Umarım size yardımcı olur, şu anda bunu kullanıyorum.

Bu biraz çaba gerektirebilir ancak açık kaynaklı wiki projemi codeplex'ten indirebilirsiniz:

http://shuttlewiki.codeplex.com

Http://yuicompressor.codeplex.com/ projesini kullanan bir CompressJavascript projesi (ve CompressCSS) içerir .

Kod kendinden açıklamalı olmalı, ancak dosyaları birleştirmeyi ve sıkıştırmayı biraz kolaylaştırıyor --- yine de benim için :)

ShuttleWiki projesi, inşa sonrası olayda nasıl kullanılacağını gösterir.