# 29: Підготовка виробництва - CSS-хитрощі

Ми збираємось повернути його до звичайного текстового редактора в цій трансляції, як ми починали. У ситуації "реального світу" справжні ці речі:

Ви хочете розбити свій JavaScript на стільки маленьких файлів, скільки для вас має сенс. Подібно до того, як ми розбили код JavaScript на невеликі зрозумілі функції, ми можемо зробити те саме з файлами. Запам’ятайте var Movies = ( );Цей об’єкт, ймовірно, буде власним файлом.
Ці менші файли слід об'єднати (об'єднати в один файл) і стиснути (пропустити через систему мініфікації, щоб видалити пробіли і навіть переписати змінні та інші, щоб зменшити кінцевий розмір файлу).

Завдання конкатенації та стиснення настільки поширені, що незалежно від того, який ваш робочий процес, існує інструмент, який допоможе вам допомогти.

CodeKit - це програмне забезпечення для Mac, яке може допомогти в цьому.

У вас є CodeKit переглядати всю вашу папку проекту. У ньому знайдуться файли JavaScript (файли, які закінчуються на .js або навіть .coffee, якщо ви віддаєте перевагу писати на CoffeeScript). На вкладці "Сценарії" буде перелічено їх усі. Ви можете клацнути на одному з них, а потім вибрати параметри, що робити, коли файл змінюється та зберігається (будь-яким текстовим редактором).

На скріншоті вище ви можете побачити на самому CSS-Tricks, що у мене є global.jsфайл, який імпортує ряд інших файлів (залежностей). Коли цей файл змінюється / зберігається, він перевіряється за допомогою підказки JS, залежності додаються або додаються, як зазначено, потім створюється остаточний файл ( 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? Ви можете пошукати в пошуках альтернативних варіантів. Я хотів би зв’язати деякі тут, але цей світ постійно змінюється. Я точно знаю, що є деякі, які по суті копіюють зовнішній вигляд і функціональність 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. Передумови: