Aeeeeehoooo \o/ Feliz Natal \o/

Feliz Natal, meus caros DEVs… é.. o ano está acabando e antes que comecemos a encher a cara de Panetone e Cidra, vou mostrar uma dica safada sagaz para quem usa Sublime: como gerar arquivos minificados automaticamente ao salvar um CSS / JS.

Não me xinguem

Silence! I kill you… (Achmed)

A questão de automatizar tarefas é sempre uma briga: DEV adora defender com unhas e dentes sua ferramenta e há várias por aí que automatizam (quase) tudo para você que é Front. Então, antes de começar a xingar, o foco é a galera que não usa (tipo eu que não curto – e olha que uso Linux…) ou então que curte fazer suas próprias “automações” (tipo eu de novo… experimente digitar letsgo no terminal do meu notebook… rsrsrs).

Por que fazer essa macumba?

Para otimizar ao máximo o fluxo desenvolvimento -> produção. Como muita gente usa o Sublime Text como editor de texto/código padrão, a macumba o procedimento a seguir visa automatizar a geração de arquivos minificados.

Por exemplo, eu desenvolvo direto na pasta ~/Servidor (que é meu localhost). Crio a estrutura de pastas e começo a trabalhar editando os arquivos HTML, CSS e JS, contudo, os arquivos que o HTML “chama” são os arquivos.min.css e arquivos.min.js, mas eu trabalho em cima dos arquivos.css e arquivos.js. Quando envio os arquivos para produção já está tudo do jeito certo :D

Instalar o plugin Package Control

Primeira coisa a fazer é instalar o Package Control, pois ele auxilia na hora de instalar e gerenciar os Pacotes do Sublime Text.

1. Para o Sublime Text 2, você ativa o console: ctrl + ‘ (ou View > Show Console).
2. No console, copie e cole o código desse link e pressione Enter.

Instalando o pacote Minifier com o Package Control

Quem faz a magia disso tudo é o pacote Minifier desenvolvido pelo bistory.

1. Abra o Package Control: No menu vá em Preferences > Package Control ou pressione ctrl + shift + P
2. Digite: Package Control: Install Package e pressione ENTER
3. Digite: Minifier e pressione ENTER

Minificando

Você já consegue minificar os arquivos JS e CSS com o comando ctrl + alt + m ou (o que é melhor) salvar o código minificado em outro arquivo: ctrl + shift + alt + m.

O que você precisa agora é automatizar isso.

Editando as opções do Minifier

Vá no menu: Preferences > Package Settings > Minifier > Minifier Settings – Default
Na linha em que tem escrito: open_on_min troque o valor true por false. Não altere mais nada.

Dessa forma, você vai evitar que o arquivo minificado fique abrindo toda hora (o que não é necessário, já que vamos sempre editar o arquivo normal e salvar os dois ao mesmo tempo).

Salvando os dois automaticamente

Finalmente! Vamos lá: o plugin salva um arquivo.min.js (ou .css) no mesmo diretório do arquivo.js (ou .css) original. Contudo, para salvar ambos ao mesmo tempo e ficar trabalhando apenas no arquivo normal, vamos criar um plugin para o Sublime:

1. No menu vá em: Tools > New Plugin…
2. No arquivo que vai abrir, cole o código abaixo substituindo o código gerado automaticamente.

import sublime, sublime_plugin, re

class SaveAndMinify(sublime_plugin.EventListener):
    def on_post_save(self, view):
        x = view.file_name()
        extension = x[-3:]

        if (extension == "css") or (extension == ".js"):
            view.window().run_command('minify_to_file')

Obs: A indentação é super importante, visto que esse código está escrito em Python.

Para finalizar, salve esse arquivo com o nome save_and_minify.py.

Atualização

Eu venho do futuro (maio de 2015) para dar uma dica que só percebi depois de publicar esse artigo: se você costuma editar seus arquivos direto do FTP (Filezilla) a dica acima não funciona totalmente porque seu arquivo minificado está no servidor.

Então a dica é: clique em editar nos dois arquivos (.css/.js e o .min.css/.min.js) dessa forma ambos ficarão sendo monitorados pelo Filezilla e se você salvar o principal, o plugin vai minificar e salvar a versão minificada. Então o Filezilla vai perceber isso e perguntar se quer modificar ambos no servidor \o/

Faça o Teste!

Abra uma folha de estilo ou um arquivo.js e salve normalmente (ctrl + s). Você vai ver que se criou um arquivo.min.js no mesmo diretório e minificado corretamente.

E é isso! Espero que tenham gostado: curta, compartilhe, mostre para os amigos e deixe aqui nos comentário o resultado da sua experiência.

P.S.: Meu Feliz Natal: