Объедините несколько файлов JavaScript в один файл JS [закрыто]


91

Я использую jquery в своем веб-приложении, и мне нужно загрузить больше файлов сценариев jquery на одну страницу.

Google предложил объединить все файлы сценариев jquery в один файл.

Как я могу это сделать?

Ответы:


53

В Linux вы можете использовать простой сценарий оболочки https://github.com/dfsq/compressJS.sh для объединения нескольких файлов javascript в один. Он использует онлайн-службу Closure Compiler, поэтому результирующий сценарий также эффективно сжимается.

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

1
может ли это работать с рулем?
Дэн Бейкер

3
Лучше использовать диспетчер задач, например Grunt, Gulp и другие подобные вещи, которые делают это автоматически. Используя Grunt, я компилирую свой руль less, typescript, в сгенерированную папку, затем копирую файлы js / css в сгенерированную папку, в конце я также уменьшаю в один файл js все файлы .js и в один файл css все файлы .css. И у меня есть наблюдатель, который повторно запускает эту конфигурацию при изменении файла, чтобы я мог сохранить файл и обновить браузер, и все изменения были применены в течение 1-3 секунд.
Vadorequest


18

Просто скомбинируйте текстовые файлы, а затем используйте что-то вроде YUI Compressor .

Файлы можно легко объединить с помощью команды, cat *.js > main.jsа затем main.js можно запустить через компрессор YUI с помощью java -jar yuicompressor-x.y.z.jar -o main.min.js main.js.

Обновление август 2014 г.

Теперь я перешел на использование Gulp для объединения и сжатия javascript, поскольку с различными плагинами и некоторой минимальной конфигурацией вы можете делать такие вещи, как настройка зависимостей, компиляция coffeescript и т. Д., А также сжатие вашего JS.


1
Исправлено @reformed.
Приди,

11

Вы можете сделать это через

  • а. Вручную: скопируйте все файлы Javascript в один, запустите компрессор ( необязательно, но рекомендуется ), загрузите на сервер и создайте ссылку на этот файл.
  • б. Используйте PHP: просто создайте массив всех файлов JS и includeих всех и выведите в <script>тег

1
Вариант B не рекомендуется, потому что он заставляет ваш браузер делать много запросов для всех небольших отдельных файлов .js (медленно), а не только один запрос для файла .js большего размера (быстрее).
Mikepote

5
@Mikepote, да ... поэтому я использовал слово, includeт.е. не делайте <script src = "...."> ссылки на несколько файлов, просто включите их в один элемент скрипта. В идеале следует использовать cdn вместе с надлежащим кешированием.
Gary Green

Извините, я неправильно понял ваш ответ.
Mikepote

3
Не могли бы вы привести здесь пример.
Ананд Соланки

Лучше использовать readfile (), чтобы избежать накладных расходов на синтаксический анализ и случайной интерпретации чего-либо.
Chinoto Vokro

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)

Затем вы запускаете:

make compile

Я надеюсь, что это помогает.


8

Я использую этот сценарий оболочки в Linux https://github.com/eloone/mergejs .

По сравнению с приведенными выше сценариями, он имеет преимущества в том, что он очень прост в использовании, а большим плюсом является то, что вы можете перечислить файлы js, которые хотите объединить, во входном текстовом файле, а не в командной строке, поэтому ваш список можно использовать повторно и вам не нужно вводить его каждый раз, когда вы хотите объединить файлы. Это очень удобно, так как вы будете повторять этот шаг каждый раз, когда захотите запустить производство. Вы также можете комментировать файлы, которые не хотите объединять в списке. Командная строка, которую вы, скорее всего, наберете:

$ mergejs js_files_list.txt output.js

И если вы хотите также сжать полученный объединенный файл:

$ mergejs -c js_files_list.txt output.js

Это создаст output-min.jsминифицированный компилятором закрытия Google. Или :

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

Если вам нужно конкретное имя для мини-файла с именем output.minified.js

Я считаю, что это действительно полезно для простого веб-сайта.


7

Группировка скриптов контрпродуктивна, вы должны загружать их параллельно, используя что-то вроде http://yepnopejs.com/ или http://headjs.com


5
Есть веские причины для объединения файлов javascript. Во-первых, вполне возможно, что запрос 20 файлов размером 2 КБ займет больше времени, чем запрос одного файла размером 40 КБ.
Joel B

1
Что происходит, сколько раз за тысячелетие?
Capsule

4
Чаще, чем вы думаете. Взгляните даже на исходный код stackoverflow: «... Вариант B не рекомендуется, потому что он заставляет ваш браузер делать много запросов для всех небольших отдельных файлов .js (медленно), а не только один запрос для большего .js файл (быстрее) ".
Joel B

4
@Capsule Ненавижу говорить вам, но Интернет быстро переходит от jQuery к MVC JavaScript, загрузка одного файла всегда будет быстрее, чем запуск нескольких HTTP-запросов.
Foxhoundn

1
@Foxhoundn Интернет также быстро переходит на HTTP2, так что это больше не имеет значения. В любом случае, jQuery был всего лишь примером, вы можете столкнуться с той же проблемой с MVC JS
Capsule

7

Скопируйте этот сценарий в блокнот и сохраните как файл .vbs. Перетащите файлы .js в этот скрипт.

пс. Это будет работать только в окнах.

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

5

Вы можете использовать компилятор Closure, как предлагает orangutancloud. Стоит отметить, что на самом деле вам не нужно компилировать / минимизировать JavaScript, должно быть возможно просто объединить текстовые файлы JavaScript в один текстовый файл. Просто присоединяйтесь к ним в том порядке, в котором они обычно указываются на странице.


Да, хорошее замечание. Компилятор замыкания может оказаться сложной задачей, если вы или авторы плагина не придерживаетесь хорошего синтаксиса или если вы пытаетесь выполнить отладку. Но если вы используете его в самом простом режиме, это может быть полезно. Мне лично очень нравится Dojo, и я использую их систему сборки с проектами dojo, это действительно помогает хранить все в одном файле. Но это полезно только для развертывания, а не для разработки.
Tom Gruner

4

Если вы используете PHP, я рекомендую Minify, потому что он объединяет и минимизирует на лету как CSS, так и JS. После того, как вы настроили его, просто работайте как обычно, и он позаботится обо всем.



2

Вы можете использовать сценарий, который я сделал. Однако для этого вам понадобится JRuby. https://bitbucket.org/ardee_aram/jscombiner (ЗАОкомбинер).

Что отличает его, так это то, что он отслеживает изменения файлов в javascript и автоматически объединяет их с выбранным вами сценарием. Таким образом, нет необходимости вручную «создавать» свой javascript каждый раз, когда вы его тестируете. Надеюсь, это поможет вам, в настоящее время я использую это.


0

Это может потребовать определенных усилий, но вы можете загрузить мой вики-проект с открытым исходным кодом с codeplex:

http://shuttlewiki.codeplex.com

Он содержит проект CompressJavascript (и CompressCSS), который использует проект http://yuicompressor.codeplex.com/ .

Код должен быть понятным, но он упрощает объединение и сжатие файлов - по крайней мере, для меня :)

В проекте ShuttleWiki показано, как использовать его в событии после сборки.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.