Minimizza automaticamente CSS e Javascript al caricamento

Question

Qualcuno sa di un buon modo per eseguire automaticamente determinati tipi di file attraverso uno script di elaborazione al caricamento? Sto provando a realizzare automaticamente la minificazione di CSS e Javascript quando li carico sul server, mantenendo una versione leggibile, leggibile dal lato locale, mentre ne conservo uno minificato sul server. Attualmente sto usando WinSCP su Windows, che è programmabile con script, ma potrebbe non essere abbastanza scriptable. Probabilmente avrei bisogno di una soluzione accartocciata, quindi non aver paura di suggerire qualcosa con del nastro adesivo; tuttavia, ho bisogno di fare il minification sul mio computer locale e caricare il file scaduto, dal momento che utilizzo l'hosting condiviso e non posso installare junk sul server.

Grazie.

Answer 1

si raccomanda di creare un makefile per risolvere questo particolare problema, ecco un makefile veloce e sporco sto usando per un sito di mine:

PUBDIR=../../static/js/ 
OUTDIR=./build/ 
COMPRESSOR=../yui/build/yuicompressor-2.4.2.jar 
ARGS= 
VPATH=${OUTDIR} 
INST_TARGETS=${OUTDIR}jgblue.js 

jgblue.js: combined.js 
    java -jar ${COMPRESSOR} ${ARGS} ${OUTDIR}$< -o ${OUTDIR}$@ 

combined.js: main.js listview.js tabs.js 
    cat $^ > ${OUTDIR}$@ 

.PHONY: install 

install: 
    cp ${INST_TARGETS} ${PUBDIR} 

Poi tutto quello che dovete digitare è:

make && make install 

Prima prende tutti i file di sviluppo e li concatena in un unico file, quindi il file concatenato viene compresso e copiato nella directory pubblica. Sto usando YUICompressor per la compressione, funziona abbastanza bene.

Answer 2

Dato che si utilizza l'hosting condiviso, suggerisco di utilizzare lo YUICompressor e di eseguire i file css/js attraverso di esso prima di caricarli. Assicurati di non perdere i tuoi file originali - potrebbe essere difficile apportare modifiche future.

È inoltre possibile inserire uno script sul server che periodicamente riscrive i file css/js, passandoli attraverso il processo minify e invocando manualmente questo script dopo aver eseguito un caricamento.

Answer 3

Bene, per ridurre il CSS è sufficiente un paio di regex.

// (PHP) but should be easily portable to any language 
function compressCSS($css) { 
    return 
     preg_replace(
      array('@\s\s+@','@(\w+:)\s*([\w\s,#]+;?)@'), 
      array(' ','$1$2'), 
      str_replace(
       array("\r","\n","\t",' {','} ',';}'), 
       array('','','','{','}','}'), 
       preg_replace('@/\*[^*]*\*+([^/][^*]*\*+)*/@', '', $css) 
      ) 
     ) 
    ; 
} 

e JavaScript packer di Dean Edwards è stato portato su PHP, Perl, .NET and WSH, quindi se si sta utilizzando una qualsiasi di queste tecnologie, si potrebbe effettivamente avere in esecuzione sul proprio server. ... Ricorda solo di memorizzare i risultati!

Answer 4

Mi piace Minify. Supporta la compressione e il ritaglio html, javascript e css al volo.

È abbastanza flessibile, può essere integrato in app esistenti.

Alcune delle funzioni più avanzate uniscono più file javascript in uno, lo stesso per css. Ha diversi modi di definire quali file combinare, il che è utile per scopi di test. In questo modo non è necessario modificare le impostazioni ogni volta.

Answer 5

Suggerisco di comprimere (con tutti i mezzi in qualche modo automatico) sul vostro computer di sviluppo e testarlo lì prima di caricarlo sul vostro server live. La modifica sostanziale del tuo JavaScript come ultima fase del processo di implementazione è un evidente rischio per l'introduzione di errori.

Answer 6

Una soluzione davvero cool che rende automatiche il servizio js e css come un sogno.

Check: http://code.google.com/p/minify/

Caratteristiche

• mietitrebbie e minifies più file JavaScript CSS o in un singolo download
  • utilizza una maggiore porto di Douglas Crockford JSMin biblioteca e personalizzati classi per Minimizza CSS e HTML
  • Cache lato server (file/apc/memcache) per evitare di eseguire operazioni non necessarie
  • risponde con un HTTP 304 (Not Modified) risposta quando il browser ha una copia cache di up-to-date
  • maggior parte dei moduli sono pigro-caricati come necessario (304 risposte utilizzano codice minimo)
  • riscrive automaticamente URI relativi a combinati file CSS per indicare posizioni valide
  • Con la memorizzazione nella cache abilitata, Minify è in grado di gestire centinaia di richieste al secondo su un server moderatamente potente.
  • Codifica del contenuto: gzip, in base alle intestazioni della richiesta. Il caching consente di servire file gzip più velocemente rispetto all'opzione mod_deflate di Apache!
  • casi di prova per la maggior parte dei componenti
  • facile integrazione di minifiers 3rd-party
  • classi di utilità separate per la codifica HTTP e controllo della cache enter code here

Answer 7

Ho appena scritto questo script minfier in Python. Come la soluzione Bills, utilizza il compressore YUI, ma funzionerà in un ambiente privo di risorse. Si presuppone che i file raw (non minifili) saranno in/some/path/src/e che le versioni minificate dovrebbero andare in/some/path /. Si presuppone inoltre che il file jar yuicompressor è nella cartella corrente:

import os, glob 
from subprocess import Popen,PIPE 

def RunCommand(cmd, show_output ): 
    p = Popen(cmd, shell=True,stdout=PIPE,stderr=PIPE) 
    for line in p.stdout: 
     if show_output: 
      print line 


    outerr = "\n".join(p.stderr.readlines()) 

    if len(outerr) > 0: 
     print "ERROR: " + outerr 
     sys.exit() 

    code = p.wait()   
    if (code > 0): 
     print ("ERROR CODE: %i" % code) 
     sys.exit() 



compresser = "yuicompressor-2.4.2.jar" 
dirs = [ "../wwwroot/css/", "../wwwroot/JavaScript/"] 

extensions = ["*.js", "*.css" ] 

for dir in dirs: 
    src = dir + "/src/" 
    for ext in extensions:  
     for path in glob.glob(os.path.join(src, ext)): 
      file = os.path.basename(path) 
      src_file = os.path.normpath(src + "/" + file) 
      dest_file = os.path.normpath(dir + "/" + file) 
      if not os.path.isfile(dest_file) or os.path.getmtime(src_file) > os.path.getmtime(dest_file): 
       print "minifying %s..." % (dest_file) 
       command = "java -jar %s %s -o %s" % (compresser, src_file, dest_file) 
       RunCommand(command, True) 

Answer 8

C'è una soluzione ancora più leggero per entrambi (JS e CSS) in modo da poter "minify al volo". Dovresti essere in grado di portarlo facilmente in qualsiasi lingua (è attualmente in PHP). È davvero un frammento e parte integrante del PHP Fat-Free Framework. Segui questo link e dai un'occhiata al mio codice. È solo una singola funzione. Non cercare campane e fischi come combinare file, codifica in base-X, accorciamento di variabili o persino codifica gzip (anche se può essere aggiunto facilmente).

Fat-Free Minify