# 29: Mempersiapkan Produksi - Trik CSS

Kami akan mengembalikannya ke editor teks biasa di screencast ini, sama seperti saat kami memulai. Dalam situasi "dunia nyata", hal-hal ini benar:

Anda ingin memecah JavaScript Anda menjadi sebanyak mungkin file kecil yang masuk akal bagi Anda. Sama seperti kami memecah kode JavaScript menjadi fungsi-fungsi kecil yang dapat dimengerti, kami dapat melakukan hal yang sama dengan file. Ingat var Movies = ( );Objek itu mungkin file itu sendiri.
File yang lebih kecil tersebut harus digabungkan (digabungkan menjadi satu file) dan dikompresi (dijalankan melalui sistem minifikasi untuk menghapus spasi dan bahkan menulis ulang variabel dan semacamnya untuk mengurangi ukuran file akhir).

Tugas penggabungan dan kompresi sangat umum sehingga apa pun alur kerja Anda, mungkin ada alat yang cocok untuk membantu.

CodeKit adalah perangkat lunak Mac yang dapat membantu dalam hal ini.

Anda memiliki CodeKit yang mengawasi seluruh folder proyek Anda. Ini akan menemukan file JavaScript di dalamnya (file yang berakhiran .js, atau bahkan .coffee jika Anda lebih suka menulis dalam CoffeeScript). Di bawah tab Scripts, itu akan mencantumkan semuanya. Anda dapat mengklik salah satunya dan kemudian memilih opsi untuk apa yang harus dilakukan ketika file itu diubah dan disimpan (oleh editor teks apa pun).

Pada tangkapan layar di atas, Anda dapat melihat di CSS-Tricks sendiri Saya memiliki global.jsfile yang mengimpor sejumlah file lain (ketergantungan). Ketika file itu diubah / disimpan, itu diperiksa melalui JS Hint, ketergantungan ditambahkan atau ditambahkan seperti yang ditentukan, kemudian file terakhir dibuat ( global-ck.js) dan diminimalkan. Sangat keren!

Anda dapat mengelola ketergantungan tersebut langsung melalui UI CodeKit, tetapi mungkin yang terbaik adalah melakukannya melalui komentar kode langsung di file 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 di HTML.

Bagaimana jika Anda tidak menggunakan Mac? Anda dapat mencari alternatif di Google. Saya akan menghubungkan beberapa di sini tetapi dunia itu selalu berubah. Saya tahu pasti ada beberapa yang pada dasarnya menyalin tampilan dan fungsionalitas CodeKit tetapi berfungsi lintas browser dan bersifat open source.

Katakanlah proyek Anda adalah Ruby on Rails. Rails memiliki Asset Pipeline yang melakukan tugas ini untuk Anda juga.

Sama seperti CodeKit yang secara khusus memformat komentar untuk memberi tahu apa ketergantungannya, Asset Pipeline juga melakukannya:

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

Anda kemudian menautkan file JavaScript itu dari template Anda seperti:

Menurut saya, itu sistem yang cukup bagus. Karena beberapa alasan. Salah satunya adalah bahwa dalam pengembangan file akan tetap terpisah, yang bagus untuk debugging di DevTools. Hal lain adalah bahwa setelah penerapan, file akan memiliki string perusak cache dalam nama file, yang merupakan langkah penting jika Anda melayani header yang kedaluwarsa jauh untuk penyimpanan cache yang baik.

Ini bukan hanya dua pilihan saja. Mungkin ada banyak cara untuk melakukan ini. Teknik lain yang sangat populer saat ini adalah Grunt.

Anda dapat menggunakan grunt-contrib-concat dan grunt-contrib-uglify untuk melakukan “tugas” ini.

Berikut ini contoh Gruntfile.js yang akan mengambil folder yang penuh dengan dependensi pustaka dan file global.js dan menggabungkan serta mengecilkannya menjadi file 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 cukup mengetik "grunt" dari baris perintah dari folder proyek Anda akan melakukannya untuk Anda. Grunt bisa menjadi jauh lebih mewah, seperti yang mungkin Anda duga. Yang pasti hari lain!

Saya telah mengumpulkan proyek contoh (bagi Anda yang memiliki akses unduhan) sehingga Anda dapat melihat-lihat cara kerja Grunt ini. Prasyarat: