Chúng tôi sẽ đưa nó trở lại một trình soạn thảo văn bản bình thường trong video màn hình này, ngay khi chúng tôi bắt đầu. Trong tình huống "thế giới thực", những điều này là đúng:
- Bạn muốn chia nhỏ JavaScript của mình thành nhiều tệp nhỏ phù hợp với bạn. Giống như chúng ta chia mã JavaScript thành các hàm nhỏ dễ hiểu, chúng ta có thể làm tương tự với các tệp. Hãy nhớ var
Movies = ( );
Đối tượng đó có thể là tệp riêng của nó. - Các tệp nhỏ hơn đó nên được nối (kết hợp với nhau thành một tệp) và nén (chạy thông qua hệ thống thu nhỏ để loại bỏ khoảng trắng và thậm chí viết lại các biến và như vậy để giảm kích thước tệp cuối cùng).
Các tác vụ nối và nén rất phổ biến nên bất kể quy trình làm việc của bạn là gì, có lẽ sẽ có một công cụ phù hợp để trợ giúp.
CodeKit là phần mềm Mac có thể trợ giúp việc này.


Bạn có CodeKit xem toàn bộ thư mục dự án của mình. Nó sẽ tìm thấy các tệp JavaScript bên trong nó (các tệp kết thúc bằng .js, hoặc thậm chí .coffee nếu bạn thích viết bằng CoffeeScript). Trong tab Scripts, nó sẽ liệt kê tất cả chúng. Bạn có thể nhấp vào một trong số chúng và sau đó chọn các tùy chọn để làm gì khi tệp đó được thay đổi và lưu (bằng bất kỳ trình soạn thảo văn bản nào).
Trong ảnh chụp màn hình ở trên, bạn có thể thấy trên CSS-Tricks, tôi có một global.js
tệp nhập một số tệp khác (các tệp phụ thuộc). Khi tệp đó được thay đổi / lưu, nó sẽ được kiểm tra thông qua JS Hint, các phần phụ thuộc được nối hoặc thêm vào như đã chỉ định, sau đó tệp cuối cùng được tạo ( global-ck.js
) và thu nhỏ. Tuyệt đấy!
Bạn có thể quản lý những yếu tố phụ thuộc đó ngay trong giao diện người dùng CodeKit, nhưng có lẽ tốt nhất bạn nên thực hiện điều đó thông qua các nhận xét mã ngay trong chính tệp JS:
// put BEFORE the rest of the code in this file // @codekit-prepend "jquery.markitup.js" // put AFTER the rest of the code in this file // @codekit-append "prism.js"
Sau đó, bạn sẽ liên kết -ck.js
phiên bản JavaScript trong HTML.
Nếu bạn không sử dụng Mac thì sao? Bạn có thể tìm kiếm các lựa chọn thay thế trên Google. Tôi muốn liên kết một số ở đây nhưng thế giới đó luôn thay đổi. Tôi biết chắc rằng có một số bản sao chép về cơ bản giao diện và chức năng của CodeKit nhưng hoạt động trên nhiều trình duyệt và là mã nguồn mở.
Giả sử dự án của bạn là Ruby on Rails. Rails có Đường ống tài sản thực hiện nhiệm vụ này cho bạn.
Giống như CodeKit có các nhận xét được định dạng đặc biệt để cho nó biết các yếu tố phụ thuộc là gì, Đường ống tài sản cũng vậy:
//= require libs/jquery.js //= require common/love.js var MyObject = ( // yadda yadaa )
Sau đó, bạn liên kết tệp JavaScript đó từ các mẫu của mình như:
Tôi nghĩ đó là một hệ thống khá hay. Vì một vài lý do. Một là trong quá trình phát triển, các tệp sẽ vẫn tách biệt, điều này rất tốt cho việc gỡ lỗi trong DevTools. Một điều khác là sau khi triển khai, các tệp sẽ có chuỗi chặn bộ nhớ cache trong tên tệp, đây là một bước quan trọng nếu bạn đang cung cấp các tiêu đề hết hạn xa để lưu vào bộ nhớ đệm tốt.
Tất nhiên, đây không phải là hai lựa chọn duy nhất. Có lẽ có vô số cách để làm điều này. Một kỹ thuật rất phổ biến ngày nay là Grunt.
Bạn có thể sử dụng grunt-Contrib-concat và grunt-Contrib-uglify để thực hiện những “nhiệm vụ” này.
Đây là một Gruntfile.js mẫu sẽ lấy một thư mục chứa đầy các thư viện phụ thuộc và tệp global.js, đồng thời ghép và rút gọn chúng thành tệp production.min.js:
module.exports = function(grunt) ( grunt.initConfig(( concat: ( dist: ( src: ( 'js/libs/*.js', 'js/global.js' ), dest: 'js/build/production.js', ) ), uglify: ( build: ( src: 'js/build/production.js', dest: 'js/build/production.min.js' ) ) )); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.registerTask('default', ('concat', 'uglify')); );
Sau đó, chỉ cần gõ “grunt” từ dòng lệnh từ thư mục dự án của bạn sẽ làm điều đó cho bạn. Tuy nhiên, Grunt có thể trở nên lạ mắt hơn, như bạn có thể nghi ngờ. Mà sẽ phải là một ngày khác!
Tôi đã tập hợp một dự án ví dụ (dành cho những người trong số các bạn có quyền truy cập tải xuống) để bạn có thể tham khảo để xem cách hoạt động của thứ Grunt này. Các điều kiện tiên quyết:
- Đã cài đặt Node
- Đã cài đặt Grunt-CLI
- Chạy
npm install
từ thiết bị đầu cuối trong thư mục này
Sau đó, bạn có thể thử chạy grunt
lệnh và thấy nó hoạt động.
Các tập tin
- 29-Example-Project.zip