# 29: Preparando a produção - CSS-Tricks | Screencasts de vídeo 2025

Vamos trazê-lo de volta para um editor de texto normal neste screencast, assim como começamos. Em uma situação do "mundo real", essas coisas são verdadeiras:

Você deseja dividir seu JavaScript em tantos arquivos pequenos quantos fizer sentido para você. Assim como dividimos o código JavaScript em pequenas funções compreensíveis, podemos fazer o mesmo com os arquivos. Lembre-se var Movies = ( );Esse objeto provavelmente seria seu próprio arquivo.
Esses arquivos menores devem ser concatenados (combinados em um arquivo) e compactados (executados por meio de um sistema de minificação para remover os espaços em branco e até mesmo reescrever as variáveis para reduzir o tamanho do arquivo final).

As tarefas de concatenação e compactação são tão comuns que, não importa qual seja o seu fluxo de trabalho, provavelmente há uma ferramenta adequada para ajudar.

CodeKit é um software Mac que pode ajudar nisso.

Você tem o CodeKit para monitorar toda a pasta do projeto. Ele encontrará arquivos JavaScript dentro dele (arquivos que terminam em .js ou mesmo .coffee se você preferir escrever em CoffeeScript). Na guia Scripts, ela listará todos eles. Você pode clicar em um deles e escolher as opções para o que fazer quando o arquivo for alterado e salvo (por qualquer editor de texto).

Na imagem acima, você pode ver no próprio CSS-Tricks que tenho um global.jsarquivo que importa vários outros arquivos (dependências). Quando esse arquivo é alterado / salvo, ele é verificado via JS Hint, as dependências são acrescentadas ou prefixadas conforme especificado e, em seguida, o arquivo final é criado ( global-ck.js) e reduzido. Muito legal!

Você pode gerenciar essas dependências diretamente por meio da IU do CodeKit, mas provavelmente é melhor fazê-lo por meio de comentários de código no próprio arquivo 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"

Você, então, vincularia a -ck.jsversão do JavaScript no HTML.

E se você não estiver no Mac? Você pode pesquisar alternativas no Google. Eu ligaria alguns aqui, mas esse mundo está sempre mudando. Tenho certeza de que existem alguns que essencialmente copiam a aparência e a funcionalidade do CodeKit, mas funcionam em vários navegadores e são de código aberto.

Digamos que seu projeto seja Ruby on Rails. O Rails tem o Asset Pipeline que faz essas tarefas para você também.

Assim como o CodeKit tem comentários formatados especialmente para que saiba quais são as dependências, o Asset Pipeline também faz:

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

Em seguida, você vincula esse arquivo JavaScript de seus modelos, como:

É um sistema muito bom, eu acho. Por alguns motivos. Uma é que, no desenvolvimento, os arquivos permanecerão separados, o que é bom para depuração nas DevTools. Outra é que, após a implantação, os arquivos terão sequências de bloqueio de cache nos nomes dos arquivos, o que é uma etapa importante se você estiver servindo cabeçalhos de expiração extensos para um bom armazenamento em cache.

Essas não são as duas únicas opções, é claro. Provavelmente, existem inúmeras maneiras de fazer isso. Outra técnica muito popular hoje em dia é o Grunt.

Você pode usar grunt-contrib-concat e grunt-contrib-uglify para fazer essas “tarefas”.

Aqui está um Gruntfile.js de amostra que pegaria uma pasta cheia de dependências de biblioteca e um arquivo global.js e os concatinaria e minimizaria em um arquivo 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')); );

Em seguida, basta digitar “grunt” na linha de comando da pasta do projeto para fazer isso para você. Grunt pode ficar muito mais sofisticado, como você pode suspeitar. Que terá que ser outro dia!

Eu montei um projeto de exemplo (para aqueles que têm acesso para download) para que você possa dar uma olhada para ver como essa coisa do Grunt funciona. Os pré-requisitos: