# 29: Gamybos paruošimas - CSS-gudrybės | Vaizdo įrašų ekranai 2025

Mes grąžiname jį į įprastą teksto rengyklę šioje ekrano kopijoje, kaip tik pradėjome. „Realiame pasaulyje“ šie dalykai yra teisingi:

Norite suskaidyti „JavaScript“ į tiek mažų failų, kiek jums yra prasminga. Kaip ir „JavaScript“ kodą suskaidėme į mažas suprantamas funkcijas, tą patį galime padaryti ir su failais. Prisimink var Movies = ( );Tas objektas tikriausiai bus jo paties failas.
Tie mažesni failai turėtų būti sujungti (sujungti į vieną failą) ir suspausti (paleisti per suskaidymo sistemą, kad būtų pašalinta tarpai ir net perrašyti kintamieji ir taip sumažintas galutinis failo dydis).

Sujungimo ir glaudinimo užduotys yra tokios įprastos, kad, kad ir kokia būtų jūsų darbo eiga, tikriausiai yra įrankis, kuris padės.

„CodeKit“ yra „Mac“ programinė įranga, kuri gali padėti tai padaryti.

Jūs turite „CodeKit“ žiūrėti visą projekto aplanką. Jame bus rasti „JavaScript“ failai (failai, kurie baigiasi .js arba net .coffee, jei norite rašyti „CoffeeScript“). Skirtuke „Scenarijai“ bus išvardyti visi. Galite spustelėti vieną iš jų ir tada pasirinkti parinktis, ką daryti, kai failas pakeičiamas ir išsaugomas (naudojant bet kurį teksto redaktorių).

Aukščiau pateiktoje ekrano kopijoje galite pamatyti pačiame CSS-Tricks turiu global.jsfailą, kuris importuoja daugybę kitų failų (priklausomybių). Kai tas failas pakeičiamas / išsaugomas, jis patikrinamas per „JS Hint“, priklausiniai pridedami arba paruošiami kaip nurodyta, tada sukuriamas galutinis failas ( global-ck.js) ir sutrumpinamas. Gana kietas!

Šias priklausomybes galite valdyti tiesiai per „CodeKit“ vartotojo sąsają, tačiau tikriausiai geriausia tai padaryti per kodo komentarus pačiame JS faile:

// 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 susiesite -ck.js„JavaScript“ versiją HTML.

Ką daryti, jei nesate „Mac“? Galite „Google“ ieškoti alternatyvų. Aš susiečiau keletą čia, bet tas pasaulis nuolat keičiasi. Aš tikrai žinau, kad yra tokių, kurios iš esmės kopijuoja „CodeKit“ išvaizdą ir funkcionalumą, tačiau veikia keliose naršyklėse ir yra atvirojo kodo.

Tarkime, kad jūsų projektas yra „Ruby on Rails“. „Rails“ turi „Asset Pipeline“, kuris taip pat atlieka šias užduotis.

Kaip ir „CodeKit“ turi specialiai suformatuotus komentarus, kad žinotų, kokios yra priklausomybės, taip pat daro ir „Asset Pipeline“:

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

Tada susiesite tą „JavaScript“ failą iš savo šablonų, pavyzdžiui:

Manau, kad tai gana graži sistema. Dėl kelių priežasčių. Vienas iš jų yra tai, kad kuriant failai išliks atskiri, o tai yra gerai derinant „DevTools“. Kitas dalykas yra tai, kad po diegimo failai turės talpyklą naikinančias eilutes failų pavadinimuose, o tai yra svarbus žingsnis, jei aptarnaujate labai seniai pasibaigusias antraštes.

Tai, žinoma, nėra vieninteliai du variantai. Tikriausiai yra begalė būdų tai padaryti. Kita šiais laikais labai populiari technika yra „Grunt“.

Šioms „užduotims“ atlikti galite naudoti „grunt-contrib-concat“ ir „grunt-contrib-uglify“.

Čia yra „Gruntfile.js“ pavyzdys, kuris paimtų aplanką, kuriame būtų daug bibliotekos priklausomybių, ir „global.js“ failą, sujungtų ir susmulkintų juos į „production.min.js“ failą:

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 paprasčiausiai įvesdami „grunt“ iš komandų eilutės iš savo projekto aplanko tai padarysite už jus. Vis dėlto, kaip įtariate, „Grunt“ gali būti įmantresnis. Kuris turės būti dar viena diena!

Aš parengiau pavyzdinį projektą (tiems iš jūsų, turintiems prieigą prie atsisiuntimo), kad galėtumėte pabandyti pažiūrėti, kaip veikia šis „Grunt“ dalykas. Būtinos sąlygos: