# 29: Gatavošanās ražošanai - CSS-triki | Video ekrāna apraides 2025

Mēs to atgriezīsim normālā teksta redaktorā šajā ekrāna sūtījumā, tāpat kā mēs to sākām. “Reālajā pasaulē” šīs lietas ir patiesas:

Jūs vēlaties sadalīt JavaScript tik daudzos mazos failos, cik jums ir jēgas. Tāpat kā mēs sadalījām JavaScript kodu mazās saprotamās funkcijās, to pašu varam darīt ar failiem. Atcerieties var Movies = ( );Tas objekts, iespējams, būtu paša fails.
Šie mazākie faili jāsavieno (jāapvieno vienā failā) un jāsaspiež (jāpārlaiž cauri minifikācijas sistēmai, lai noņemtu atstarpi un pat pārrakstītu mainīgos un tādējādi samazinātu galīgo faila lielumu).

Savienošanas un saspiešanas uzdevumi ir tik izplatīti, ka neatkarīgi no tā, kāda ir jūsu darbplūsma, iespējams, ir pieejams rīks, kas palīdzēs.

CodeKit ir Mac programmatūra, kas var palīdzēt šajā jautājumā.

Jums ir CodeKit skatīties visu projekta mapi. Tajā tiks atrasti JavaScript faili (faili, kas beidzas ar .js vai pat .coffee, ja vēlaties rakstīt CoffeeScript). Cilnē Skripti tie visi tiks uzskaitīti. Jūs varat noklikšķināt uz viena no tiem un pēc tam izvēlēties opcijas, ko darīt, kad šis fails tiek mainīts un saglabāts (izmantojot jebkuru teksta redaktoru).

Iepriekš redzamajā ekrānuzņēmumā jūs varat redzēt pašā CSS-Tricks. Man ir global.jsfails, kas importē vairākus citus failus (atkarības). Kad šis fails tiek mainīts / saglabāts, tas tiek pārbaudīts, izmantojot JS Hint, atkarīgās tiek pievienotas vai papildinātas, kā norādīts, pēc tam tiek izveidots galīgais fails ( global-ck.js) un samazināts. Diezgan vēss!

Jūs varat pārvaldīt šīs atkarības tieši caur CodeKit lietotāja interfeisu, taču, iespējams, vislabāk to izdarīt, izmantojot kodu komentārus tieši pašā JS failā:

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

Pēc tam jūs saistīsit -ck.jsJavaScript versiju HTML.

Ko darīt, ja neesat Mac datorā? Varat meklēt Google, lai atrastu alternatīvas. Es šeit dažus sasaistītu, bet šī pasaule pastāvīgi mainās. Es noteikti zinu, ka ir daži, kas būtībā kopē CodeKit izskatu un funkcionalitāti, bet darbojas pāri pārlūkam un ir atvērtā koda.

Pieņemsim, ka jūsu projekts ir Ruby on Rails. Rails ir Asset Pipeline, kas veic šos uzdevumus arī jums.

Tāpat kā CodeKit ir īpaši formatēti komentāri, lai informētu par atkarībām, arī Asset Pipeline:

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

Pēc tam jūs saistāt šo JavaScript failu no savām veidnēm, piemēram:

Tā, manuprāt, ir diezgan jauka sistēma. Dažu iemeslu dēļ. Viens no tiem ir tas, ka izstrādes laikā faili paliks atsevišķi, kas ir jauki atkļūdošanai DevTools. Vēl viens ir tas, ka pēc izvietošanas failos faila nosaukumos būs kešatmiņas atdalīšanas virknes, kas ir svarīgs solis, ja labas kešatmiņas nodrošināšanas laikā beidzas galvenes.

Protams, šīs nav arī divas iespējas. Iespējams, ka ir neskaitāmi veidi, kā to izdarīt. Vēl viena mūsdienās ļoti populāra tehnika ir Grunt.

Lai veiktu šos “uzdevumus”, jūs varētu izmantot grunt-contrib-concat un grunt-contrib-uglify.

Šeit ir Gruntfile.js paraugs, kas paņemtu mapi, kas pilna ar bibliotēkas atkarībām, un global.js failu, apvienotu un sasmalcinātu tos 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')); );

Pēc tam, vienkārši ierakstot “grunt” no komandrindas no projekta mapes, tas tiks izdarīts jūsu vietā. Grunt, lai gan jūs varētu aizdomas, var kļūt daudz iedomātāks. Kurai būs jābūt vēl vienai dienai!

Esmu salicis projekta paraugu (tiem no jums, kuriem ir piekļuve lejupielādei), lai jūs varētu ielēkt, lai redzētu, kā šī Grunt lieta darbojas. Priekšnosacījumi: