# 29: Príprava výroby - Triky CSS | Videozáznamy z videa 2025

Rovnako ako sme to začali, vrátime ho späť do normálneho textového editora v tomto obrazovom vysielaní. V situácii „skutočného sveta“ sú tieto veci pravdivé:

Chcete rozdeliť svoj JavaScript na toľko malých súborov, koľko vám dáva zmysel. Rovnako ako sme kód JavaScript rozdelili na malé zrozumiteľné funkcie, môžeme urobiť to isté so súbormi. Pamätajte si var Movies = ( );Tento objekt by pravdepodobne bol jeho vlastný súbor.
Tieto menšie súbory by mali byť zreťazené (spojené dohromady do jedného súboru) a komprimované (spustené v minifikačnom systéme, aby sa odstránili medzery a dokonca sa prepísali premenné a zmenšila sa tak konečná veľkosť súboru).

Úlohy zreťazenia a kompresie sú také bežné, že bez ohľadu na to, aký máte pracovný tok, pravdepodobne existuje nástroj, ktorý vám pomôže.

CodeKit je softvér pre Mac, ktorý vám s tým môže pomôcť.

Necháte CodeKit sledovať celý váš priečinok projektu. Nájde v ňom súbory JavaScript (súbory, ktoré končia príponou .js alebo dokonca .coffee, ak dávate prednosť písaniu v CoffeeScript). Na karte Skripty zobrazí ich zoznam všetkých. Môžete kliknúť na jednu z nich a potom zvoliť možnosti, čo robiť, keď sa daný súbor zmení a uloží (ľubovoľným textovým editorom).

Na snímke vyššie môžete vidieť na CSS-Tricks, že mám global.jssúbor, ktorý importuje množstvo ďalších súborov (závislostí). Keď sa tento súbor zmení / uloží, skontroluje sa to pomocou pomôcky JS Hint, závislosti sa pripoja alebo doplnia podľa špecifikácie, potom sa vytvorí ( global-ck.js) a minifikuje konečný súbor . Celkom v pohode!

Tieto závislosti môžete spravovať priamo prostredníctvom používateľského rozhrania CodeKit, ale pravdepodobne je najlepšie to urobiť pomocou komentárov k kódu priamo v samotnom súbore 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"

Potom by ste prepojili -ck.jsverziu JavaScriptu v HTML.

Čo ak nie ste na Macu? Môžete hľadať Google po alternatívach. Niektoré by som spojil tu, ale ten svet sa neustále mení. Určite viem, že existujú aj také, ktoré v podstate kopírujú vzhľad a funkčnosť CodeKit, ale fungujú naprieč prehliadačmi a sú open source.

Povedzme, že váš projekt je Ruby on Rails. Rails má Asset Pipeline, ktorý robí tieto úlohy aj za vás.

Rovnako ako CodeKit má špeciálne naformátované komentáre, aby informoval, aké sú závislosti, robí aj Asset Pipeline:

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

Tento súbor JavaScript potom prepojíte zo svojich šablón, napríklad:

Je to myslím celkom pekný systém. Z niekoľkých dôvodov. Jednou z nich je, že pri vývoji zostanú súbory oddelené, čo je pekné na ladenie v nástrojoch DevTools. Ďalším je to, že po nasadení budú mať súbory v názvoch súborov reťazce na odbúranie medzipamäte, čo je dôležitý krok, ak slúžite záhlavia exspirácie pre dobrú medzipamäť.

Toto samozrejme nie sú jediné dve možnosti. Existuje pravdepodobne nespočetné množstvo spôsobov, ako to urobiť. Ďalšou veľmi populárnou technikou súčasnosti je Grunt.

Na vykonávanie týchto „úloh“ môžete použiť grunt-contrib-concat a grunt-contrib-uglify.

Tu je ukážka súboru Gruntfile.js, ktorý by vzal priečinok plný závislostí knižnice a súbor global.js a spojil ich a minifikoval do súboru 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')); );

Potom to jednoducho urobíte zadaním príkazu „grunt“ z príkazového riadku v priečinku projektu. Grunt môže byť oveľa fantazijnejší, ako by ste mohli tušiť. Čo bude musieť byť iný deň!

Zostavil som ukážkový projekt (pre tých z vás, ktorí majú prístup na stiahnutie), aby ste sa mohli pokochať a zistiť, ako táto vec Grunt funguje. Predpoklady: