# 29: Припрема за производњу - ЦСС-трикови

Вратићемо га у нормалан уређивач текста у овом сцреенцаст-у, баш као што смо и започели. У ситуацији „стварног света“ истине су следеће:

Желите да свој ЈаваСцрипт разбијете на онолико малих датотека колико вам има смисла. Баш као што смо разделили ЈаваСцрипт код на мале разумљиве функције, тако можемо и са датотекама. Запамтите вар Movies = ( );Тај би објекат вероватно био сопствена датотека.
Те мање датотеке треба спојити (комбиновати у једну датотеку) и компресовати (проћи кроз систем за минификацију да би се уклонио размак, па чак и преписало променљиве и слично да би се смањила коначна величина датотеке).

Задаци повезивања и компресије толико су уобичајени да без обзира на то који је ваш ток посла, вероватно постоји алат који ће вам помоћи.

ЦодеКит је Мац софтвер који вам може помоћи у овоме.

Имате ЦодеКит да гледа целу вашу фасциклу пројекта. У њему ће се наћи ЈаваСцрипт датотеке (датотеке које се завршавају са .јс или чак .цоффее ако више волите да пишете у ЦоффееСцрипт-у). На картици Скрипте наћи ће их све. Можете да кликнете на један од њих, а затим да изаберете опције шта да радите када се та датотека промени и сачува (било којим уређивачем текста).

На снимку екрана изнад, на самом ЦСС-триковима можете видети да имам global.jsдатотеку која увози бројне друге датотеке (зависности). Када се та датотека промени / сачува, она се проверава путем ЈС Хинт-а, зависности се додају или додају како је наведено, затим се креира коначна датотека ( global-ck.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"

Затим бисте повезали -ck.jsверзију ЈаваСцрипт-а у ХТМЛ-у.

Шта ако нисте на Мац-у? Можете потражити друге алтернативе. Повезао бих неке овде, али тај свет се непрестано мења. Сигурно знам да постоје неки који у суштини копирају изглед и функционалност ЦодеКита, али раде у више прегледача и отворени су извор.

Рецимо да је ваш пројекат Руби он Раилс. Раилс има Ассет Пипелине који такође обавља ове задатке за вас.

Баш као што ЦодеКит има посебно форматиране коментаре како би му дао до знања које су зависности, то чини и Ассет Пипелине:

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

Затим повежете ту ЈаваСцрипт датотеку са својим предлошцима као што су:

Мислим да је то прилично леп систем. Из неколико разлога. Једна је да ће датотеке у развоју остати одвојене, што је лепо за отклањање грешака у ДевТоолс-у. Друга је чињеница да ће након примене датотеке у именима датотека имати низове за уништавање предмеморије, што је важан корак ако за добро кеширање служите заглавља са истрошеним роком трајања.

То наравно нису једине две опције. Вероватно је безброј начина за то. Још једна врло популарна техника данас је Грунт.

Можете користити грунт-цонтриб-цонцат и грунт-цонтриб-углифи за обављање ових „задатака“.

Ево примера Грунтфиле.јс који ће узети мапу пуну библиотечких зависности и глобал.јс датотеку и конкатирати их и умањити у датотеку продуцтион.мин.јс:

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')); );

Тада ће једноставно уместо вас укуцати „грунт“ из командне линије из директоријума вашег пројекта то уместо вас. Грунт ипак може постати фенси, као што можда претпостављате. Што ће морати бити још један дан!

Саставио сам један пример пројекта (за оне који имају приступ преузимању), тако да можете да пикнете како бисте видели како функционише ова Грунт ствар. Предуслови: