# 29: Menyiapkan Pengeluaran - Trik CSS | Tayangan Skrin Video 2025

Kami akan membawanya kembali ke editor teks biasa dalam screencast ini, seperti yang kami mulakan. Dalam keadaan "dunia nyata", perkara-perkara ini benar:

Anda ingin memecahkan JavaScript anda menjadi seberapa banyak fail kecil yang masuk akal bagi anda. Sama seperti kita memecahkan kod JavaScript menjadi fungsi kecil yang dapat difahami, kita dapat melakukan hal yang sama dengan fail. Ingat var Movies = ( );Objek itu mungkin failnya sendiri.
Fail yang lebih kecil itu harus digabungkan (digabungkan menjadi satu fail) dan dimampatkan (dijalankan melalui sistem minifikasi untuk membuang ruang kosong dan bahkan menulis semula pemboleh ubah dan sebagainya untuk mengurangkan ukuran fail akhir).

Tugas penggabungan dan pemampatan sangat biasa sehingga tidak kira apa aliran kerja anda, mungkin ada alat yang sesuai untuk membantu.

CodeKit adalah perisian Mac yang dapat membantu dengan ini.

Anda mempunyai CodeKit menonton keseluruhan folder projek anda. Ia akan menemui fail JavaScript di dalamnya (fail yang diakhiri dengan .js, atau bahkan .coffee jika anda lebih suka menulis di CoffeeScript). Di bawah tab Skrip, ia akan menyenaraikan semuanya. Anda boleh mengklik salah satu daripadanya dan kemudian memilih pilihan untuk apa yang harus dilakukan apabila fail itu diubah dan disimpan (oleh mana-mana penyunting teks).

Dalam tangkapan skrin di atas, anda dapat melihat di CSS-Tricks sendiri bahawa saya mempunyai global.jsfail yang mengimport sejumlah fail lain (tanggungan). Apabila fail itu diubah / disimpan, ia diperiksa melalui Petunjuk JS, ketergantungan ditambahkan atau ditambahkan seperti yang ditentukan, kemudian fail akhir dibuat ( global-ck.js) dan dikurangkan. Cukup sejuk!

Anda boleh menguruskan tanggungan tersebut melalui CodeKit UI, tetapi mungkin lebih baik melakukannya melalui komen kod langsung di fail JS itu sendiri:

// 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"

Anda kemudian akan menghubungkan -ck.jsversi JavaScript dalam HTML.

Bagaimana jika anda tidak menggunakan Mac? Anda boleh menggunakan Google untuk mencari alternatif. Saya akan menghubungkan beberapa di sini tetapi dunia itu sentiasa berubah. Saya tahu pasti ada beberapa yang pada dasarnya menyalin penampilan dan fungsi CodeKit tetapi berfungsi merentas penyemak imbas dan merupakan sumber terbuka.

Katakan projek anda Ruby on Rails. Rails mempunyai Asset Pipeline yang melakukan tugas ini untuk anda juga.

Sama seperti CodeKit mempunyai komen yang diformat khas untuk memberitahunya apa pergantungannya, Asset Pipeline juga:

//= require libs/jquery.js //= require common/love.js var MyObject = ( // yadda yadaa )

Anda kemudian menghubungkan fail JavaScript dari templat anda seperti:

Saya rasa sistem ini cukup bagus. Untuk beberapa sebab. Salah satunya adalah bahawa dalam pembangunan fail akan tetap terpisah, yang bagus untuk debug di DevTools. Yang lain ialah selepas penyebaran fail akan mempunyai rentetan cache-busting dalam nama fail, yang merupakan langkah penting jika anda melayani header yang sudah habis masa berlakunya untuk cache yang baik.

Ini bukan satu-satunya dua pilihan. Mungkin ada banyak cara untuk melakukan ini. Teknik lain yang sangat popular pada masa ini adalah Grunt.

Anda boleh menggunakan grunt-contrib-concat dan grunt-contrib-uglify untuk melakukan "tugas" ini.

Berikut adalah contoh Gruntfile.js yang akan mengambil folder yang penuh dengan pergantungan perpustakaan dan fail global.js dan menggabungkan dan meminimumkannya menjadi fail 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')); );

Kemudian dengan hanya mengetik "menggerutu" dari baris arahan dari folder projek anda akan melakukannya untuk anda. Grunt boleh menjadi lebih mewah, seperti yang anda duga. Yang mana mesti menjadi hari lain!

Saya telah mengumpulkan projek contoh (untuk anda yang mempunyai akses muat turun) supaya anda dapat melihat bagaimana cara kerja Grunt ini. Prasyarat: