MENU It's me: Mário!

sublime

Sublime Text: Como minificar meus arquivos automaticamente?

Dicas! - Front! 24 de dezembro de 2014 11 comentários
Dicas! - Front!
  • 24 - 12 - 14
  •        
  • 11

Aeeeeehoooo \o/ Feliz Natal \o/

Feliz Natal

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.

Como vai ficar seu plugin para o Sublime
Como vai ficar seu plugin para o Sublime

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:

Por favor, considere desativar o AdBlock

Não perca nenhuma novidade, assinando nossa newsletter!



Não se preoculpe, não enviaremos muitos e-mails, nem mostraremos seu e-mail para ninguém. Dúvidas?


Deixe seu comentário! Dúvida sobre como comentar
ou vai postar código? Leia antes.

  • Lucas Neves

    EXCELENTE!! Valeu, Mário!

  • Wanderson

    Como faço para adicionar o novo plugin criado “save_and_minify.py”?

    • Se você criou o arquivo indo em “Tools > New Plugin…” ao salvar já vai estar no lugar certo. Caso isso não aconteça, basta salvar dentro da pasta de plugins do Sublime (/Packages).

      O jeito mais fácil de achar essa pasta é ir no menu Preferences > Browse Packages

      • Wanderson

        Vlw, muito obrigado!

  • Renan Coelho

    Caramba! Estava procurando por isso há um tempo, mas só aqui que consegui! Belíssimo tutorial! Muito obrigado Mário Valney :D

  • João

    Essa eu não conhecia. Muito bom.

  • Vladimir Melo

    Olá Mario!
    Essa dica é somente para o Sublime Text 2, correto?
    Tenho o Sublime Text 3, e não consigo editar a linha: open_on_min
    Existe alguma forma de fazer isso para esta versão?
    Obrigado

    • Olá, Vladimir.

      Sim. Esse tutorial é para a versão 2.
      Tenta ver se dá para alterar as opções do plugin Minifier de qualquer outra forma diferente do tutorial, pois a ideia de alterar essa linha é apenas evitar que se abra o arquivo minificado.

      Abraços

      • Rodrigo Corrêa e Castro

        Vladimir Melo e Mário Valney, o arquivo Default realmente não dá permissão para edição, o que eu fiz e deu certo no ST3 foi copiar todo o conteúdo do arquivo Minifier Settings – Default e colar com a alteração sugerida no post no arquivo Minifier Settings – User.

  • Thiago Mágero

    DESCONTINUADO… :(

    Keeping the uglify service running while somehow protecting my lightweight VM from (often unintentional) denial-of-service attacks by people sending lots of requests or really huge sources was too much of a burden. I’ve shut it down. You can install