# 29: Подготовка производства - CSS-хитрости

Мы собираемся вернуть это в обычный текстовый редактор в этом скринкасте, как мы и начали. В ситуации «реального мира» это верно:

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

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

CodeKit - это программное обеспечение Mac, которое может в этом помочь.

У вас есть CodeKit, который следит за всей папкой вашего проекта. Он найдет внутри него файлы JavaScript (файлы с расширением .js или даже .coffee, если вы предпочитаете писать на CoffeeScript). На вкладке «Сценарии» они перечислены все. Вы можете щелкнуть по одному из них, а затем выбрать варианты действий при изменении и сохранении этого файла (любым текстовым редактором).

На скриншоте выше вы можете видеть, что на самом CSS-Tricks у меня есть 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-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. Предпосылки: