5

O Google possui duas ferramentas para compilar/minificar otimizando os arquivos JS e CSS, Closure Compiler JS e Closure Compiler CSS.

Para executar o processo de compilação eu posso fazer da seguinte forma:

java -jar compiler.jar --js hello.js --js_output_file hello-compiled.js

Atualmente uso um arquivo .bat com 40 linhas que foram criadas manualmente para minificar os arquivos, e como o sistema cresce e surgem novos arquivos as vezes me esqueço de incluir novos arquivos nesse bat, então pensei em fazer um processo para criação destes caminhos.

A primeira coisa que eu fiz foi percorrer todo o diretório onde fica o JS e salvar os arquivos em um array:

function dirToArray($dir) {
   $result = array();
   $cdir = scandir($dir);
   $raiz = '';
   foreach ($cdir as $key => $value) {
      if (!in_array($value, array(".", ".."))) {
         if (is_dir($dir . DIRECTORY_SEPARATOR . $value) && ($value !== "lib")) {
            $result[$value] = dirToArray($dir . DIRECTORY_SEPARATOR . $value);
            $raiz = $value;
         } elseif (strrchr($value, '.') === ".js") {
            $result[] = $value;
         }
      }
   }
   return $result;
}

$dir = '../../controller/js';
$files = dirToArray($dir);

Desta forma me retornam um array:

array
  0 => string 'agenda.js' (length=9)
  1 => string 'agendaNegoc.js' (length=14)
  2 => string 'atribCobrador.js' (length=16)
  3 => string 'atualizaSistema.js' (length=18)
  'cadastro' => 
    array
      0 => string 'agencia.js' (length=10)
      1 => string 'avisos.js' (length=9)
      2 => string 'bancoEmpresa.js' (length=15)
      3 => string 'cidade.js' (length=9)
      4 => string 'cliente.js' (length=10)
      5 => string 'cobradores.js' (length=13)
      6 => string 'codEventos.js' (length=13)
      7 => string 'remessa.js' (length=10)
  4 => string 'comercial.js' (length=15)
  5 => string 'controleCobranca.js' (length=22)
  6 => string 'classCliente.js' (length=15)
  7 => string 'cliente.js' (length=10)
  8 => string 'codigosEventos.js' (length=17)
  9 => string 'consultaWebservice.js' (length=27)
  10 => string 'coresSistema.js' (length=15)
  11 => string 'dadosCliente.js' (length=15)
  12 => string 'detalhesOperacao.js' (length=19)
  13 => string 'emissaoboleto.js' (length=16)
  14 => string 'enviarEmail.js' (length=14)
  15 => string 'exportador.js' (length=13)
  16 => string 'fases.js' (length=14)
  17 => string 'filtroNivelUsuario.js' (length=21)
  18 => string 'funcoes.js' (length=10)
  'importador' => 
    array
      0 => string 'importadorAS1.js' (length=18)
  20 => string 'importador.js' (length=13)
  21 => string 'importador_exportador.js' (length=24)
  22 => string 'inserirAgendamento.js' (length=21)
  23 => string 'inserirEventos.js' (length=17)
  24 => string 'listaUsuarios.js' (length=16)
  25 => string 'login.js' (length=8)
  26 => string 'mensagemInterna.js' (length=24)
  27 => string 'menu.js' (length=7)
  28 => string 'motivosPausa.js' (length=15)
  'negociacao' => 
    array
      0 => string 'cobrancaA.js' (length=19)
      1 => string 'cobrancaB.js' (length=22)
      2 => string 'cobrancaB2.js' (length=28)
      3 => string 'cobrancaC3.js' (length=25)
      4 => string 'cobrancaM.js' (length=18)
      5 => string 'codEvento.js' (length=12)
      6 => string 'propostaAnexos.js' (length=22)
  29 => string 'notificador.js' (length=14)
  30 => string 'origemdb.js' (length=11)
  31 => string 'permissoes.js' (length=13)
  32 => string 'pesquisaCliente.js' (length=18)
  'portal' => 
    array
      0 => string 'negociacao.js' (length=13)
  33 => string 'referenciasPessoais.js' (length=22)
  'relatorio' => 
    array
      0 => string 'filtroDemonstrativo.js' (length=28)
      1 => string 'filtroRelBol.js' (length=18)
      2 => string 'filtroRelEventos.js' (length=19)
      3 => string 'filtroRelPrestContas.js' (length=23)
      4 => string 'relDemonsDebito.js' (length=18)
      5 => string 'relEventos.js' (length=13)
  34 => string 'supervisorLista.js' (length=18)
  35 => string 'usuarioBanco.js' (length=15)

Então eu criei uma função para gerar o caminho completo:


function geraPatch($files, $param, $devPatch, $prodPatch) {
   $result = array();

   foreach ($files['cadastro'] as $key => $value) {
      $result['cadastro'][$key] = $param . $devPatch . 'cadastro/' . $value . $prodPatch . 'cadastro/' . $value;
   }

   foreach ($files['importador'] as $key => $value) {
      $result['importador'][$key] = $param . $devPatch . 'importador/' . $value . $prodPatch . 'importador/' . $value;
   }

   foreach ($files['negociacao'] as $key => $value) {
      $result['negociacao'][$key] = $param . $devPatch . 'negociacao/' . $value . $prodPatch . 'negociacao/' . $value;
   }

   foreach ($files['portal'] as $key => $value) {
      $result['portal'][$key] = $param . $devPatch . 'portal/' . $value . $prodPatch . 'portal/' . $value;
   }
   foreach ($files['relatorio'] as $key => $value) {
      $result['relatorio'][$key] = $param . $devPatch . 'relatorio/' . $value . $prodPatch . 'relatorio/' . $value;
   }
   return $result;
}

$dir = '../../controller/js';
$files = dirToArray($dir);
$param = 'java -jar compiler.jar --js ';
$devPatch = 'desenvolvimento/';
$prodPatch = ' --js_output_file producao/';

var_dump(geraPatch($files, $param, $devPatch, $prodPatch));

E o resultado sai conforme esperado

 0 => string 'java -jar compiler.jar --js desenvolvimento/cadastro/agencia.js --js_output_file producao/cadastro/agencia.js' (length=109)
      1 => string 'java -jar compiler.jar --js desenvolvimento/cadastro/avisos.js --js_output_file producao/cadastro/avisos.js' (length=107)
      2 => string 'java -jar compiler.jar --js desenvolvimento/cadastro/bancoEmpresa.js --js_output_file producao/cadastro/bancoEmpresa.js' (length=119)
      3 => string 'java -jar compiler.jar --js desenvolvimento/cadastro/cidade.js --js_output_file producao/cadastro/cidade.js' (length=107)
      4 => string 'java -jar compiler.jar --js desenvolvimento/cadastro/cliente.js --js_output_file producao/cadastro/cliente.js' (length=109)

Quais são as minhas dúvidas?

1° para fazer um foreach da raiz sem sair os subArrays e como ? se eu fizer um foreach o resultado sai assim:

java -jar compiler.jar --js desenvolvimento/Array --js_output_file producao/Array

2° Como posso pegar todo esse array configurado e criar um arquivo no php .bat e salvar todo esse texto para executa-lo ?

3° Existe alguma ferramenta que simplifique todo esse processo, minha necessidade é justamente poder selecionar um diretório que contem os arquivos nos quais eu quero minificar.

1 Resposta 1

2

Trabalhar com tarefas repetitivas em scripts JS e CSS ficou muito mais fácil com a vinda do Grunt e do Gulp.

Eu prefiro o Gulp, é muito mais fácil. Tanto o Gulp quanto Grunt, irá dispensar qualquer trabalho de programação por detrás, como no seu caso, em que não precisará criar array alguma ou qualquer que seja o trabalho background de preparação de listagem destes arquivos.

O que são e para que servem?

Automatizadores de tarefa são ferramentas que ajudam programadores [preguiçosos hehe] a realizarem tarefas repetitivas mas essenciais para o desenvolvimento como: concatenação de arquivos, minificação, testes e muitas outras coisas necessárias para a criação de um código rápido e eficiente.

Como utilizar o Gulp?

  1. Instale o Node.js (https://nodejs.org/download/)
  2. No MS-DOS (Windows) ou no Shell (Linux), instale o Gulp:

    npm install -g gulp

  3. Para verificar se instalou, veja se a versão é exibida:

    gulp -v

  4. Vamos supor que você possua a seguinte estrutura de diretórios:

    |projeto/ |--dist/ |--src/ |----source.js |--Gulpfile.js

  5. Instale os plugins de contatenação, minificação e o de renomeação (que é o que você precisa):

    npm install gulp gulp-jshint gulp-uglify gulp-concat gulp-rename --save-dev

  6. Note que foi instalado o próprio Gulp DE NOVO junto aos plugins. Isto porque o Gulp instalado anteriormente foi o CLI, responsável por rodar o comando gulp na linha de comando e o instalado desta vez é o local que é usado para rodar os testes no projeto. Agora podemos editar nosso Gulpfile.js:

Gulpfile.js

// Aqui nós carregamos o gulp e os plugins através da função `require` do nodejs
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');

// Definimos o diretorio dos arquivos para evitar repetição futuramente
var files = "./src/*.js";

//Aqui criamos uma nova tarefa através do ´gulp.task´ e damos a ela o nome 'lint'
gulp.task('lint', function() {

    // Aqui carregamos os arquivos que a gente quer rodar as tarefas com o `gulp.src`
    // E logo depois usamos o `pipe` para rodar a tarefa `jshint`
    gulp.src(files)
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

//Criamos outra tarefa com o nome 'dist'
gulp.task('dist', function() {

    // Carregamos os arquivos novamente
    // E rodamos uma tarefa para concatenação
    // Renomeamos o arquivo que sera minificado e logo depois o minificamos com o `uglify`
    // E pra terminar usamos o `gulp.dest` para colocar os arquivos concatenados e minificados na pasta build/
    gulp.src(files)
    .pipe(concat('./dist'))
    .pipe(rename('dist.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./dist'));

});

//Criamos uma tarefa 'default' que vai rodar quando rodamos `gulp` no projeto
gulp.task('default', function() {

    // Usamos o `gulp.run` para rodar as tarefas
    // E usamos o `gulp.watch` para o Gulp esperar mudanças nos arquivos para rodar novamente
    gulp.run('lint', 'dist');
    gulp.watch(files, function(evt) {
        gulp.run('lint', 'dist');
    });

});
  1. Todas as linhas estão comentadas. Basta você inserir os diretórios de origem de seus js. Agora rode o Gulp:

    gulp

O comando acima irá executar o Gulp para todas as tarefas no Gulpfile.js. Se desejar executar uma tarefa específica (de um plugin instalado acima e que você inseriu no Gulpfile.js), rode:

gulp tarefa (ex.: gulp dist).

Resumo

A idéia é simples: criar um arquivo Gulpfile.js, inserir as tarefas de seus plugins do Gulp, escolher os arquivos e diretórios dos seus scripts e por último executar o Gulp.

A lista completa de plugins para o Gulp você pode ver em: http://gulpjs.com/plugins/.

Dica: instale o plugin minificador de css: https://npmjs.org/package/gulp-minify-css/

Tutorial completo: aqui.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .