# 29: Příprava výroby - Triky CSS

Právě jsme to v tomto screencastu přivedli zpět do normálního textového editoru. V situaci „skutečného světa“ jsou tyto věci pravdivé:

Chcete svůj JavaScript rozdělit na tolik malých souborů, kolik vám dává smysl. Stejně jako jsme rozdělili kód JavaScript na malé srozumitelné funkce, můžeme udělat totéž se soubory. Pamatujte si var Movies = ( );Ten objekt by pravděpodobně byl jeho vlastní soubor.
Tyto menší soubory by měly být zřetězeny (sloučeny dohromady do jednoho souboru) a komprimovány (spuštěny systémem minifikace, aby se odstranily mezery a dokonce přepsaly proměnné a tak se zmenšila konečná velikost souboru).

Úkoly zřetězení a komprese jsou tak běžné, že bez ohledu na to, jaký máte pracovní postup, pravděpodobně existuje nástroj, který vám pomůže.

CodeKit je software pro Mac, který vám s tím může pomoci.

Máte CodeKit sledovat celou složku projektu. Najde v něm soubory JavaScriptu (soubory, které končí na .js, nebo dokonce na .coffee, pokud dáváte přednost psaní v CoffeeScript). Na kartě Skripty se zobrazí seznam všech. Můžete kliknout na jednu z nich a poté zvolit možnosti, co dělat, když je soubor změněn a uložen (libovolným textovým editorem).

Na výše uvedeném snímku obrazovky můžete na samotných CSS-Tricks vidět, že mám global.jssoubor, který importuje řadu dalších souborů (závislostí). Když je tento soubor změněn / uložen, je zkontrolován pomocí JS Hint, závislosti jsou připojeny nebo doplněny podle zadání, poté je vytvořen finální soubor ( global-ck.js) a minifikován. Dost dobrý!

Tyto závislosti můžete spravovat přímo prostřednictvím uživatelského rozhraní CodeKit, ale je pravděpodobně nejlepší to udělat prostřednictvím komentářů kódu přímo v samotném souboru 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"

Pak byste propojili -ck.jsverzi JavaScriptu v HTML.

Co když nejste na Macu? Alternativy můžete hledat na Googlu. Některé bych propojil tady, ale ten svět se neustále mění. Vím jistě, že existují některé, které v podstatě kopírují vzhled a funkčnost CodeKit, ale fungují napříč prohlížeči a jsou otevřeným zdrojem.

Řekněme, že váš projekt je Ruby on Rails. Rails má Asset Pipeline, který plní tyto úkoly i za vás.

Stejně jako CodeKit má speciálně formátované komentáře, aby věděl, jaké jsou závislosti, také Asset Pipeline:

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

Tento soubor JavaScript poté propojíte ze svých šablon, jako například:

Myslím, že je to docela pěkný systém. Z několika důvodů. Jedním z nich je, že ve vývoji zůstanou soubory oddělené, což je hezké pro ladění v DevTools. Dalším důvodem je, že po nasazení budou mít soubory v názvech souborů řetězce, které potlačují mezipaměť, což je důležitý krok, pokud poskytujete vzdálené vypršení platnosti záhlaví pro dobré ukládání do mezipaměti.

Toto samozřejmě nejsou jediné dvě možnosti. Existuje pravděpodobně nespočet způsobů, jak toho dosáhnout. Další velmi populární technikou současnosti je Grunt.

K provádění těchto „úkolů“ můžete použít grunt-contrib-concat a grunt-contrib-uglify.

Zde je ukázka souboru Gruntfile.js, který by vzal složku plnou závislostí knihoven a soubor global.js a spojil je a minifikoval do souboru 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')); );

Pak to jednoduše zadáte „grunt“ z příkazového řádku ve složce projektu a udělá to za vás. Grunt může být mnohem fantazijnější, jak byste si mohli myslet. Což bude muset být další den!

Sestavil jsem ukázkový projekt (pro ty z vás, kteří mají přístup ke stažení), abyste se mohli pokusit zjistit, jak tato věc Grunt funguje. Předpoklady: