# 29: Подготовка за производство - CSS-трикове | Видео екранни предавания 2025

Ще го върнем в нормален текстов редактор в тази скринкаст, точно както започнахме. В ситуация на „реален свят“ тези неща са верни:

Искате да разделите вашия JavaScript на толкова малки файлове, колкото има смисъл за вас. Точно както разделихме кода на JavaScript на малки разбираеми функции, можем да направим същото с файлове. Запомнете var Movies = ( );Този обект вероятно би бил собствен файл.
Тези по-малки файлове трябва да бъдат обединени (комбинирани заедно в един файл) и компресирани (прокарани през система за минимизиране, за да се премахнат пробелите и дори да се пренапишат променливи и други, за да се намали окончателният размер на файла).

Задачите за обединяване и компресиране са толкова често срещани, че без значение какъв е вашият работен поток, вероятно има инструмент, който ще се побере в помощ.

CodeKit е софтуер за Mac, който може да помогне с това.

Имате CodeKit да гледа цялата ви папка на проекта. В него ще намерите JavaScript файлове (файлове, които завършват на .js или дори .coffee, ако предпочитате да пишете в CoffeeScript). В раздела Скриптове той ще ги изброи всички. Можете да кликнете върху един от тях и след това да изберете опции за това какво да правите, когато този файл бъде променен и запазен (от всеки текстов редактор).

На екранната снимка по-горе можете да видите на самия CSS-трикове имам global.jsфайл, който импортира редица други файлове (зависимости). Когато този файл е променен / запазен, той се проверява чрез JS Hint, зависимостите се добавят или добавят, както е посочено, след което крайният файл се създава ( global-ck.js) и се минимизира. Много готино!

Можете да управлявате тези зависимости директно чрез потребителския интерфейс на CodeKit, но вероятно е най-добре да го направите чрез коментари на кода точно в самия 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версията на JavaScript в HTML.

Ами ако не сте на Mac? Можете да търсите в Google за алтернативи. Бих свързал някои тук, но този свят се променя постоянно. Със сигурност знам, че има някои, които по същество копират външния вид и функционалност на CodeKit, но работят в различни браузъри и са с отворен код.

Да приемем, че вашият проект е Ruby on Rails. Rails има Asset Pipeline, който изпълнява тези задачи и за вас.

Точно както CodeKit има специално форматирани коментари, за да го уведоми какви са зависимостите, Asset Pipeline също прави:

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

След това свързвате този JavaScript файл от вашите шаблони като:

Това е доста хубава система, мисля. По няколко причини. Единият е, че в разработка файловете ще останат отделни, което е хубаво за отстраняване на грешки в DevTools. Другото е, че след внедряването файловете ще имат низове за разрушаване на кеша в имената на файловете, което е важна стъпка, ако обслужвате далеч изтичащи заглавия за добро кеширане.

Това не са единствените две възможности, разбира се. Вероятно има безброй начини да направите това. Друга много популярна техника в наши дни е Grunt.

Можете да използвате grunt-contrib-concat и grunt-contrib-uglify, за да направите тези „задачи“.

Ето пример на Gruntfile.js, който ще вземе папка, пълна с библиотечни зависимости и файл global.js и ще ги съчетае и минимизира във файл 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')); );

Тогава просто въвеждане на „grunt“ от командния ред от папката на вашия проект ще направи това вместо вас. Grunt обаче може да стане по-фантастичен, както може би подозирате. Което ще трябва да бъде друг ден!

Съставих един примерен проект (за тези от вас с достъп за изтегляне), за да можете да мушкате, за да видите как работи това Grunt. Предпоставките: