Kết hợp nhiều tệp JavaScript thành một tệp JS [đã đóng]

90

Tôi đang sử dụng jquery trong ứng dụng web của mình và tôi cần tải thêm các tệp tập lệnh jquery vào một trang.

Google đề nghị tôi kết hợp tất cả các tệp tập lệnh jquery thành một tệp duy nhất.

Tôi có thể làm cái này như thế nào?

javascript  jquery  jquery-ui 
— Chandrasekhar
nguồn

Câu trả lời:

52

Trên linux, bạn có thể sử dụng tập lệnh shell đơn giản https://github.com/dfsq/compressJS.sh để kết hợp nhiều tệp javascript thành một tệp duy nhất. Nó sử dụng dịch vụ trực tuyến Closure Compiler để tập lệnh kết quả cũng được nén hiệu quả.

$ ./compressJS.sh some-script.js another-sctipt.js onemore.js
— dfsq
nguồn
1
cái này có thể hoạt động với tay lái không?
— Dan Baker
3
Tốt hơn nên sử dụng trình quản lý tác vụ như Grunt, Gulp và những thứ khác tương tự để làm điều đó tự động. Bằng cách sử dụng Grunt, tôi biên dịch thanh điều khiển less, typecript, handlebar của mình vào một thư mục được tạo, sau đó tôi sao chép các tệp js / css vào thư mục được tạo, cuối cùng tôi cũng rút gọn thành một tệp js tất cả các tệp .js và thành một tệp css. tất cả các tệp .css. Và tôi có một người theo dõi chạy lại cấu hình thay đổi tệp đó để tôi có thể lưu tệp và làm mới trình duyệt và tất cả các thay đổi đã được áp dụng trong vòng 1-3 giây.
— Vadorequest
18

Chỉ cần kết hợp các tệp văn bản và sau đó sử dụng một cái gì đó như YUI Compressor .

Các tệp có thể được kết hợp dễ dàng bằng cách sử dụng lệnh cat *.js > main.jsvà main.js sau đó có thể được chạy thông qua trình nén YUI bằng cách sử dụng java -jar yuicompressor-x.y.z.jar -o main.min.js main.js.

Cập nhật tháng 8 năm 2014

Bây giờ tôi đã chuyển sang sử dụng Gulp để ghép và nén javascript cũng như với các plugin khác nhau và một số cấu hình tối thiểu mà bạn có thể thực hiện những việc như thiết lập phụ thuộc, biên dịch coffeescript, v.v. cũng như nén JS của bạn.

— Prydie
nguồn
Liên kết máy nén YUI đã chết.
— cải lương
11

Bạn có thể làm điều này thông qua

  • a. Theo cách thủ công: sao chép tất cả các tệp Javascript thành một, chạy máy nén trên đó ( tùy chọn nhưng được khuyến nghị ) và tải lên máy chủ và liên kết đến tệp đó.
  • b. Sử dụng PHP: Chỉ cần tạo một mảng tất cả các tệp JS và includetất cả chúng và xuất thành một <script>thẻ
— Gary Green
nguồn
1
Tùy chọn B không được khuyến nghị vì nó khiến trình duyệt của bạn thực hiện nhiều yêu cầu cho tất cả các tệp .js riêng lẻ (chậm) thay vì chỉ một yêu cầu cho tệp .js lớn hơn (nhanh hơn).
— Mikepote
5
@Mikepote, vâng ... do đó tôi đã sử dụng từ includetức là không làm <script src = "...."> liên kết đến nhiều tệp, chỉ đưa chúng vào một phần tử script. Lý tưởng nhất là một cdn cùng với bộ nhớ đệm thích hợp nên được sử dụng.
— Gary Green,
Xin lỗi, tôi đã đọc nhầm câu trả lời của bạn.
— Mikepote
3
Bạn có thể đưa ra một số ví dụ ở đây.
— Anand Solanki
Tốt hơn nên sử dụng readfile () để tránh chi phí phân tích cú pháp và vô tình nhận được thông dịch một cái gì đó.
— Chinoto Vokro
9

Tôi thường có nó trên một 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)

Sau đó, bạn chạy:

make compile

Tôi hy vọng nó sẽ giúp.

8

Tôi sử dụng tập lệnh shell này trên Linux https://github.com/eloone/mergejs .

So với các tập lệnh ở trên, nó có ưu điểm là sử dụng rất đơn giản và một điểm cộng lớn là bạn có thể liệt kê các tệp js mà bạn muốn hợp nhất trong tệp văn bản đầu vào chứ không phải trong dòng lệnh, vì vậy danh sách của bạn có thể sử dụng lại và bạn không phải gõ nó mỗi khi bạn muốn hợp nhất các tệp của mình. Nó rất tiện dụng vì bạn sẽ lặp lại bước này bất cứ khi nào bạn muốn bắt đầu sản xuất. Bạn cũng có thể nhận xét các tệp bạn không muốn hợp nhất trong danh sách. Dòng lệnh mà bạn có nhiều khả năng sẽ nhập là:

$ mergejs js_files_list.txt output.js

Và nếu bạn cũng muốn nén tệp đã hợp nhất kết quả:

$ mergejs -c js_files_list.txt output.js

Thao tác này sẽ output-min.jsđược trình biên dịch đóng của Google thu nhỏ. Hoặc là :

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

Nếu bạn muốn một tên cụ thể cho tệp thu nhỏ của mình có tên output.minified.js

Tôi thấy nó thực sự hữu ích cho một trang web đơn giản.

— eloone
nguồn
7

Nhóm tập lệnh là phản tác dụng, bạn nên tải chúng song song bằng cách sử dụng một cái gì đó như http://yepnopejs.com/ hoặc http://headjs.com

— Viên con nhộng
nguồn
5
Có những lý do hợp lệ để kết hợp các tệp javascript. Đối với một, hoàn toàn có thể yêu cầu 20 tệp 2kb sẽ mất nhiều thời gian hơn yêu cầu một tệp 40 kb.
— Joel B
1
Điều này xảy ra bao nhiêu lần mỗi thiên niên kỷ?
— Viên nang
4
Thường xuyên hơn bạn nghĩ. Hãy xem ngay cả mã nguồn cho stackoverflow: "... Tùy chọn B không được khuyến nghị vì nó khiến trình duyệt của bạn thực hiện nhiều yêu cầu cho tất cả các tệp .js riêng lẻ nhỏ (chậm) thay vì chỉ một yêu cầu cho tệp .js lớn hơn tệp (nhanh hơn). "
— Joel B
4
@Capsule Tôi không muốn nói với bạn, nhưng internet đang nhanh chóng chuyển từ jQuery sang MVC JavaScript, tải một tệp sẽ luôn nhanh hơn kích hoạt nhiều yêu cầu HTTP.
— Foxhoundn
1
@Foxhoundn Internet cũng đang nhanh chóng chuyển sang HTTP2 nên nó sẽ không thực sự quan trọng nữa. Dù sao, jQuery chỉ là một ví dụ, bạn có thể phải đối mặt với cùng một vấn đề chính xác với MVC JS
— Capsule
7

Sao chép tập lệnh này vào notepad và lưu dưới dạng tệp .vbs. Kéo và thả các tệp .js trên tập lệnh này.

ps. Điều này sẽ chỉ hoạt động trên cửa sổ.

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
— SasHok.Tk
nguồn
5

Bạn có thể sử dụng trình biên dịch đóng cửa như orangutancloud gợi ý. Cần chỉ ra rằng bạn không thực sự cần phải biên dịch / rút gọn JavaScript mà chỉ cần nối các tệp văn bản JavaScript thành một tệp văn bản. Chỉ cần nối chúng theo thứ tự mà chúng thường được đưa vào trang.

— Jim Blackler
nguồn
Vâng, điểm tốt. Trình biên dịch đóng có thể phức tạp nếu bạn hoặc tác giả plugin không theo kịp cú pháp tốt hoặc nếu bạn đang cố gắng gỡ lỗi. Nhưng nếu bạn sử dụng nó ở chế độ cơ bản nhất, nó có thể hữu ích. Cá nhân tôi rất thích Dojo và sử dụng hệ thống xây dựng của họ với các dự án dojo, nó thực sự hữu ích để giữ mọi thứ trong một tệp. Nhưng nó chỉ hữu ích cho việc triển khai, không phải cho sự phát triển.
— Tom Gruner
4

Nếu bạn đang chạy PHP, tôi khuyên bạn nên Minify vì nó kết hợp và thu nhỏ nhanh chóng cho cả CSS và JS. Sau khi bạn đã cấu hình nó, chỉ cần hoạt động như bình thường và nó sẽ xử lý mọi thứ.

— technoTarek
nguồn
2

Bạn có thể sử dụng một kịch bản mà tôi đã tạo. Bạn cần JRuby để chạy nó. https://bitbucket.org/ardee_aram/jscombiner (JSCombiner).

Điều làm cho điều này trở nên khác biệt là nó theo dõi các thay đổi của tệp trong javascript và tự động kết hợp nó với tập lệnh bạn chọn. Vì vậy, không cần phải tự "xây dựng" javascript của bạn mỗi khi bạn kiểm tra nó. Hy vọng nó sẽ giúp bạn ra ngoài, tôi hiện đang sử dụng cái này.

— Ardee Aram
nguồn
0

Điều này có thể hơi tốn công sức nhưng bạn có thể tải xuống dự án wiki nguồn mở của tôi từ codeplex:

http://shuttlewiki.codeplex.com

Nó chứa một dự án CompressJavascript (và CompressCSS) sử dụng dự án http://yuicompressor.codeplex.com/ .

Mã phải tự giải thích nhưng nó làm cho việc kết hợp và nén các tệp một simnpler một chút --- đối với tôi dù sao :)

Dự án ShuttleWiki cho biết cách sử dụng nó trong sự kiện sau xây dựng.

— Eben Roux
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.