# 29: Üretimi Hazırlama - CSS Hileleri | Video Ekran Kayıtları 2024

Tam da başladığımız gibi, bu ekran video kaydında onu normal bir metin düzenleyicisine geri getireceğiz. "Gerçek dünya" durumunda, bunlar doğrudur:

JavaScript'inizi sizin için mantıklı olduğu kadar çok sayıda küçük dosyaya bölmek istiyorsunuz. JavaScript kodunu anlaşılabilir küçük işlevlere böldüğümüz gibi, aynısını dosyalarla da yapabiliriz. Var'ı hatırlayın Movies = ( );Bu nesne muhtemelen kendi dosyası olacaktır.
Bu daha küçük dosyalar birleştirilmeli (tek bir dosyada birleştirilmeli) ve sıkıştırılmalıdır (boşlukları kaldırmak ve hatta değişkenleri yeniden yazmak için bir küçültme sisteminden geçirilerek son dosya boyutunu küçültmek için).

Birleştirme ve sıkıştırma görevleri o kadar yaygındır ki, iş akışınız ne olursa olsun, muhtemelen size yardımcı olacak bir araç vardır.

CodeKit, bu konuda yardımcı olabilecek bir Mac yazılımıdır.

CodeKit'iniz var, tüm proje klasörünüzü izleyin. İçinde JavaScript dosyalarını bulacaktır (.js ile biten dosyalar, hatta CoffeeScript ile yazmayı tercih ederseniz .coffee). Komut Dosyaları sekmesinin altında hepsini listeleyecektir. Bunlardan birine tıklayabilir ve ardından bu dosya değiştirildiğinde ve kaydedildiğinde (herhangi bir metin düzenleyicisi tarafından) ne yapılacağına ilişkin seçenekleri seçebilirsiniz.

Yukarıdaki ekran görüntüsünde, CSS-Tricks'in kendisinde görebilirsiniz.Bir global.jsdizi başka dosyayı (bağımlılıklar) içe aktaran bir dosyam var. Bu dosya değiştirildiğinde / kaydedildiğinde, JS Hint aracılığıyla kontrol edilir, bağımlılıklar belirtildiği gibi eklenir veya öne eklenir, ardından son dosya oluşturulur ( global-ck.js) ve küçültülür. Oldukça havalı!

Bu bağımlılıkları doğrudan CodeKit UI üzerinden yönetebilirsiniz, ancak muhtemelen bunu doğrudan JS dosyasının içindeki kod yorumları aracılığıyla yapmak en iyisidir:

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

Daha sonra -ck.jsJavaScript’in sürümünü HTML’ye bağlarsınız.

Ya Mac'te değilseniz? Alternatifler için Google'da dolaşabilirsiniz. Bazılarını buraya bağlardım ama bu dünya sürekli değişiyor. CodeKit görünümünü ve işlevselliğini esasen kopyalayan, ancak tarayıcılar arası çalışan ve açık kaynak kodlu olanların olduğundan eminim.

Diyelim ki projeniz Ruby on Rails. Rails, bu görevleri sizin için de yapan Asset Pipeline'a sahiptir.

CodeKit'in bağımlılıkların ne olduğunu bilmesini sağlamak için özel olarak biçimlendirilmiş yorumlara sahip olması gibi, Asset Pipeline da şunları yapar:

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

Daha sonra bu JavaScript dosyasını şablonlarınızdan aşağıdaki gibi bağlarsınız:

Bence oldukça güzel bir sistem. Birkaç nedenden dolayı. Birincisi, geliştirme aşamasında dosyaların ayrı kalmasıdır, bu da DevTools'ta hata ayıklama için iyidir. Bir diğeri, dağıtımdan sonra dosyaların dosya adlarında önbelleği bozan dizelere sahip olacağıdır; bu, iyi bir önbelleğe alma için çok uzaktaki başlıkları sunuyorsanız önemli bir adımdır.

Elbette bunlar sadece iki seçenek değil. Muhtemelen bunu yapmanın sayısız yolu vardır. Bugünlerde çok popüler olan bir diğer teknik ise Grunt.

Bu "görevleri" yapmak için grunt-katkıda-concat ve grunt-katkıda-çirkinleştir'i kullanabilirsiniz.

Kitaplık bağımlılıkları ve global.js dosyasıyla dolu bir klasörü alacak ve bunları bir production.min.js dosyasına birleştirip küçültecek örnek bir Gruntfile.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')); );

Daha sonra proje klasörünüzdeki komut satırından "grunt" yazmanız bunu sizin için yapacaktır. Yine de, şüphelendiğiniz gibi, homurdanma çok daha süslü olabilir. Hangi başka bir gün olmalı!

Örnek bir proje hazırladım (indirme erişimi olanlarınız için), böylece bu Grunt şeyinin nasıl çalıştığını görmek için kurcalayabilirsiniz. Ön koşullar: