Объедините несколько файлов JavaScript в один файл JS

76

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

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

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

13 ответов

46
Лучший ответ

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

$ ./compressJS.sh some-script.js another-sctipt.js onemore.js
  • 1
    может ли это работать с рулем?
  • 3
    Лучше использовать диспетчер задач, такой как Grunt, Gulp и другие подобные вещи, которые делают это автоматически. Используя Grunt, я скомпилировал руль less, typcript, в сгенерированную папку, затем скопировал файлы js / css в сгенерированную папку, в конце я также минимизировал в один файл js все файлы .js и в один файл css. все файлы .css. И у меня есть наблюдатель, повторно запускающий эту конфигурацию при изменении файла, чтобы я мог сохранить файл и обновить браузер, и все изменения были применены в течение 1-3 секунд.
17

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

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

Обновление Aug 2014

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

14

Попробуйте компилятор закрытия google:

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

10

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

  • а. Вручную: копировать все файлы Javascript в один, запустить компрессор на нем (необязательно, но рекомендуется) и загрузить на сервер и ссылку на этот файл.
  • б. Использовать PHP: Просто создайте массив всех JS файлов и include их всех и выведите в тег <script>
  • 1
    Вариант B не рекомендуется, поскольку он заставляет ваш браузер делать много запросов на все небольшие отдельные файлы .js (медленно), а не только один запрос на больший файл .js (быстрее).
  • 5
    @Mikepote, да ... поэтому я использовал слово include т.е. не делайте <script src = "...."> ссылки на несколько файлов, просто включите их в один элемент script. В идеале следует использовать cdn вместе с правильным кэшированием.
Показать ещё 3 комментария
8

Я использую эту оболочку script для 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

Я обычно использую его на 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

Надеюсь, это поможет.

7

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

  • 3
    Есть веские причины для объединения файлов JavaScript. Во-первых, вполне возможно, что запрос 20 файлов по 2 КБ займет больше времени, чем запрос одного файла по 40 КБ.
  • 1
    Что происходит сколько раз за тысячелетие?
Показать ещё 4 комментария
5

Скопируйте этот script в блокнот и сохраните файл .vbs. Drag & Drop.js на этом script.

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

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 в один текстовый файл. Просто присоединитесь к ним в том порядке, в котором они обычно включены в страницу.

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

Вы можете использовать KjsCompiler: https://github.com/knyga/kjscompiler Прохладное управление зависимостями

  • 0
    Я искал подобные инструменты часами, но, наконец, это работает именно так, как я себе представлял. Просто и понятно.
4

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

2

Вы можете использовать script, который я сделал. Для этого вам нужен JRuby. https://bitbucket.org/ardee_aram/jscombiner (JSCombiner).

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

0

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

http://shuttlewiki.codeplex.com

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

Код должен быть понятным, но он позволяет комбинировать и сжимать файлы немного simnpler --- для меня в любом случае:)

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню