# 29: Priprava proizvodnje - CSS-triki

V tem predvajanju zaslona ga bomo vrnili v običajni urejevalnik besedil, tako kot smo začeli. V razmerah "resničnega sveta" te stvari držijo:

Svoj JavaScript želite razdeliti na toliko majhnih datotek, kot se vam zdi smiselno. Tako kot smo kodo JavaScript razdelili na majhne razumljive funkcije, lahko enako storimo tudi z datotekami. Zapomni si var Movies = ( );Ta objekt bi verjetno bil lastna datoteka.
Te manjše datoteke je treba združiti (združiti skupaj v eno datoteko) in stisniti (zagnati jih skozi sistem za pomanjšanje, da se odstranijo presledki in celo prepiše spremenljivke in tako zmanjša končna velikost datoteke).

Naloge združevanja in stiskanja so tako pogoste, da ne glede na vaš potek dela verjetno obstaja orodje, ki vam bo pomagalo.

CodeKit je Mac programska oprema, ki vam lahko pomaga pri tem.

CodeKit si ogleduje celotno mapo projekta. V njej bo našel datoteke JavaScript (datoteke, ki se končajo na .js ali celo .coffee, če raje pišete v CoffeeScriptu). Na zavihku Skripti bodo navedeni vsi. Lahko kliknete enega od njih in nato izberete možnosti, kaj storiti, ko datoteko spremenite in shranite (s katerim koli urejevalnikom besedil).

Na zgornjem posnetku zaslona lahko na samem CSS-Tricks vidite, da imam global.jsdatoteko, ki uvozi številne druge datoteke (odvisnosti). Ko to datoteko spremenite / shranite, se preveri s pomočjo namiga JS, odvisnosti se dodajo ali dodajo, kot je določeno, nato pa se končna datoteka ustvari ( global-ck.js) in pomanjša. Precej kul!

Te odvisnosti lahko upravljate kar prek uporabniškega vmesnika CodeKit, vendar je verjetno najbolje, da to storite s komentarji kode neposredno v sami datoteki 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"

Nato bi povezali -ck.jsrazličico JavaScripta v HTML.

Kaj pa, če niste na Macu? Lahko iščete druge možnosti. Tukaj bi jih nekaj povezal, toda ta svet se nenehno spreminja. Zagotovo vem, da obstajajo nekateri, ki v bistvu kopirajo videz in funkcionalnost CodeKita, vendar delujejo v različnih brskalnikih in so odprtokodni.

Recimo, da je vaš projekt Ruby on Rails. Rails ima Asset Pipeline, ki te naloge opravlja tudi za vas.

Tako kot ima CodeKit posebej oblikovane komentarje, ki jim sporočajo, kakšne so odvisnosti, tudi Asset Pipeline:

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

Nato datoteko JavaScript povežete s predlogami, na primer:

Mislim, da je to precej lep sistem. Iz nekaj razlogov. Eno je, da bodo datoteke v razvoju ostale ločene, kar je lepo za odpravljanje napak v DevTools. Druga je, da bodo imele datoteke po uvedbi v imenih datotek nize za razbijanje predpomnilnika, kar je pomemben korak, če za dobro predpomnjenje strežete glave z iztečenimi poteki.

To seveda nista edini možnosti. Načinov za to je verjetno nešteto. Druga zelo priljubljena tehnika danes je Grunt.

Za te "naloge" lahko uporabite grunt-contrib-concat in grunt-contrib-uglify.

Tu je vzorec Gruntfile.js, ki bo vzel mapo, polno knjižnih odvisnosti, in datoteko global.js ter jih združil in pomanjšal v datoteko 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')); );

Nato preprosto vtipkate "grunt" iz ukazne vrstice iz mape vašega projekta, kar boste storili namesto vas. Grunt lahko postane bolj domiseln, kot lahko sumite. Kar bo moral biti še en dan!

Sestavil sem primer projekta (za tiste, ki imate dostop do prenosov), tako da lahko pogledate, kako deluje ta stvar Grunt. Predpogoji: