# 29: Priprema za proizvodnju - CSS-trikovi

Vratit ćemo ga na uobičajeni uređivač teksta u ovom screencastu, baš kao što smo i započeli. U situaciji "stvarnog svijeta" istinite su sljedeće stvari:

Želite razbiti svoj JavaScript na onoliko malih datoteka koliko vam ima smisla. Baš kao što smo JavaScript kod razlomili na male razumljive funkcije, isto možemo učiniti i s datotekama. Zapamtite var Movies = ( );Taj bi objekt vjerojatno bio vlastita datoteka.
Te manje datoteke treba spojiti (kombinirati zajedno u jednu datoteku) i komprimirati (proći kroz sustav za minifikaciju kako bi se uklonili razmaci, pa čak i prepisale varijable i tako smanjile konačnu veličinu datoteke).

Zadaci spajanja i kompresije toliko su uobičajeni da bez obzira na vaš tijek rada vjerojatno postoji alat koji će vam stati u pomoć.

CodeKit je Mac softver koji vam u tome može pomoći.

Imate CodeKit da gleda cijelu mapu vašeg projekta. U njemu će se naći JavaScript datoteke (datoteke koje završavaju na .js ili čak .coffee ako više želite pisati na CoffeeScriptu). Na kartici Skripte prikazat će ih sve. Možete kliknuti na jedan od njih, a zatim odabrati opcije što učiniti kada se ta datoteka promijeni i spremi (bilo kojim uređivačem teksta).

Na gornjoj snimci zaslona možete vidjeti na samom CSS-trikovima da imam global.jsdatoteku koja uvozi brojne druge datoteke (ovisnosti). Kada se ta datoteka promijeni / spremi, provjerava se putem JS Hint-a, ovisnosti se dodaju ili dodaju kako je navedeno, a zatim se kreira konačna datoteka ( global-ck.js) i umanjuje. Baš super!

Tim ovisnostima možete upravljati izravno putem korisničkog sučelja CodeKit, ali vjerojatno je najbolje to učiniti putem komentara koda izravno u samoj JS datoteci:

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

Tada biste povezali -ck.jsverziju JavaScript-a u HTML-u.

Što ako niste na Macu? Možete potražiti alternative. Ovdje bih povezao neke, ali taj se svijet neprestano mijenja. Sigurno znam da postoje neki koji u osnovi kopiraju izgled i funkcionalnost CodeKita, ali rade u različitim preglednicima i otvoreni su izvor.

Recimo da je vaš projekt Ruby on Rails. Rails ima Asset Pipeline koji ove zadatke obavlja i za vas.

Baš kao što CodeKit ima posebno oblikovane komentare kako bi mu dao do znanja koje su ovisnosti, to čini i Asset Pipeline:

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

Zatim povežete tu JavaScript datoteku sa svojim predlošcima poput:

Mislim da je to prilično lijep sustav. Iz nekoliko razloga. Jedno je da će datoteke u razvoju ostati odvojene, što je lijepo za uklanjanje pogrešaka u DevTools-u. Druga je činjenica da će datoteke nakon raspoređivanja u nazivima datoteka imati nizove za uništavanje predmemorije, što je važan korak ako za dobro predmemoriranje poslužujete zaglavlja s istječenim rokom trajanja.

To naravno nisu jedine dvije mogućnosti. Vjerojatno postoji bezbroj načina za to. Još jedna vrlo popularna tehnika danas je Grunt.

Za ove "zadatke" možete koristiti grunt-contrib-concat i grunt-contrib-uglify.

Evo primjera Gruntfile.js koji će uzeti mapu punu bibliotečkih ovisnosti i global.js datoteku te ih konkatirati i umanjiti u datoteku 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')); );

Tada će jednostavno za vas utipkati "grunt" iz naredbenog retka iz mape vašeg projekta. Grunt ipak može postati mnogo fensi, kao što možda sumnjate. Što će morati biti još jedan dan!

Sastavio sam primjer projekta (za one koji imaju pristup preuzimanju), tako da možete posetiti kako biste vidjeli kako funkcionira ova Gruntova stvar. Preduvjeti: