Visualizzazione dei risultati da 1 a 2 su 2
  1. #1
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,973

    [Ruby][Pillola] Batch per aggiungere dinamicamente width e height nel markup

    Scenario:

    Avete una certo numero di template (~120) e a lavoro ultimato vi viene richiesto di apportare una modifica alla struttura del markup di tutti i file html.

    Ad esempio, per ottimizzare i tempi di repaint (http://stackoverflow.com/questions/1...y-imgs-in-html)
    si richiede l'inserimento esplicito degli attributi width e height di tutte le immagini <img /> che avete inserito nel markup

    Nel mio caso specifico le immagini utilizzate erano complessivamente un migliaio.

    Alternativa 1
    - Aprire ogni singolo file html
    - per ciascun elemento immagine trovare la risorsa nel percorso indicato dall'attributo src
    - trovare l'immagine nel filesystem e ricavare le informazioni sulla dimensione (larghezza e altezza) del file
    - modificare il markup e salvare il file

    Supponendo di impiegare mediamente un minuto per compiere questi passaggi su ciascuna immagine, il tempo necessario per eseguirle 1000 volte sarebbe pari a poco meno di 17 ore di lavoro. (senza contare errori nella digitazione, distrazioni, interruzioni...)


    Alternativa 2
    Avendo ruby installato è possibile automatizzare tutta la procedura mediante alcune rubygems :
    nokogiri, fastimage e colorize.

    Per installarle (nel caso non lo fossero già) è sufficiente digitare su terminale *nix
    codice:
    $> sudo gem install nokogiri fastimage colorize
    e scrivere un rakefile - nella cartella contenente i templates - con il seguente codice (opportunamente commentato)

    codice:
    require "fastimage"
    require "nokogiri"
    require "colorize"
    
    task :default do
    
      glob_replace = 0
      replace = 0;
    
      # per ciascun template .html nella cartella
      Dir.glob("*.html") do |tpl|
    
        puts "=> #{tpl.yellow}"
        
        # leggo il contenuto del file
        html = File.open(tpl, "r").read
    
        # creo una rappresentazione dei nodi del documento con Nokogiri
        document = Nokogiri::HTML(html);
        
        # per ciascuna immagine contenente nel file...   
        document.css('img').map{ |element|
    
          # ...trova l'attributo src...
          url = element['src']
    
          # ...e se l'immagine esiste nel percorso specificato...
          if File.exist?(url)
     
            # ...computo width e height con Fastimage...
            size = FastImage.size(url)
            puts "\t#{url} (width: #{size[0]}px, height: #{size[1]}px)"
           
            # aggiungo attributi width e height nel markup
            element['width'] = size[0]
            element['height'] = size[1]
            replace += 1
          end
        }
    
        # poi salvo il file (sovrascrivo)
        File.open(tpl, 'w') {|f|
          f.write(document)
          puts "\n\tSuccessfully updated #{tpl} - #{replace} replacements".green
          glob_replace += replace
          replace = 0
        }
    
      end
    
      puts "\n\tTotal replacements done: #{glob_replace}".green
    
    end
    (lo stesso codice si trova versionato su Github: https://gist.github.com/fcalderan/5160536)

    Per eseguire il rakefile è sufficiente scrivere "rake" nel terminale e confermare con invio.

    Sicuramente esisteranno soluzioni che richiedono meno codice in altri linguaggi o in ruby stesso, oppure che siano più efficienti ma volevo condividere questa in ruby. Ho volutamente omesso la gestione degli errori in quanto volevo focalizzarmi sull'uso delle gemme sopra menzionate.

    Ho scritto la mia prima riga di ruby meno di un mese fa per cui se ci sono errori evidenti fatemi sapere così posso imparare anche io. Ad esempio non so quale sia l'output prodotto da nokogiri nel caso in cui il documento non sia well-formed in partenza.

    Nota: La gemma colorize non è essenziale. E' per rendere il tutto esteticamente più glamour sul terminale, altrimenti che gusto c'è a scriverci dentro?
    ISSlive , un bot per Telegram per trovare tutti i passaggi visibili della Stazione Spaziale Internazionale.

  2. #2
    Aggiunto alle pillole.
    Amaro C++, il gusto pieno dell'undefined behavior.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.