← Blog

Com actualitzar l'explorador automàticament mentre treballes


[2019-04-12]

Aquest petit truc fa que pugui treballar molt ràpidament.

Cada cop que modifico un arxiu web (html/php/js/css) (cosa que faig moltes vegades durant el dia) vull que es refresqui automàticament el Google Chrome per no haver de fer-ho manualment.

Primer de tot, necessitem un script que refresqui l'explorador. Es pot fer a Mac OS X fent servir osascript o a Linux, amb xdotool. Anomenem el nou arxiu reload-chrome.sh fent servir el nostre editor preferit. Jo faig servir l'editor vim directament al terminal:

  
  $ vim reload-chrome.sh
  
  
  #!/bin/bash
  #reload-chrome.sh per Mac OS X
  osascript -e 'tell application "Google Chrome" to tell the active tab \
    of its first window to reload'
  
  
  #!/bin/bash
  #reload-chrome.sh per Linux
  echo "$(date --rfc-3339=seconds) Refresh: $FILE"
  CUR_WID=$(xdotool getwindowfocus)
  #gets the first $BROWSER window, if you have more than one
  #$BROWSER window open, it might not refresh the right one,
  #as an alternative you can search by the window/html title
  WID=$(xdotool search --onlyvisible --class chromium|head -1)
  #TITLE="window/html file title"
  #WID=$(xdotool search --title "$TITLE"|head -1)
  xdotool windowactivate $WID
  xdotool key 'ctrl+r'
  xdotool windowactivate $CUR_WID
  

Nota: si treballem en Firefox, podem fer-ho igualment canviant "Google Chrome" per "Firefox".

Ara guardem el nou arxiu a la nostra carpeta personal, així hi podrem accedir fàcilment fent ~/reload-chrome.sh. Ara necessitem que aquest script que acabem de crear sigui executable. En un terminal fem:

  
  $ chmod +x ~/reload-chrome.sh
  

Ara executem l'script reload-chrome.sh per comprovar si funciona:

  
  $ ~/reload-chrome.sh
  

Fantàstic! Ja tenim mig camí fet. Ara que hem comprovat que Google Chrome es refresca quan executem reload-chrome.sh, necessitem instal·lar la comanda entr, que ens permetrà executar l'script reload-chrome.sh cada cop que detecti que els fitxers de la carpeta on estem treballant han canviat. Per instal·lar la comanda entr des del terminal, fem:

  
  $ brew install entr     # mac os x
  $ sudo apt install entr # linux (debian, ubuntu...)
  

Ara naveguem fins la carpeta on estem treballant i executem entr de la següent manera:

  
  $ find . -name "*.php" -or -name "*.css" | entr ~/reload-chrome.sh
  

Fet! La comanda find és una comanda molt potent que llista recursivament els fitxers de la carpeta actual i també les subcarpetes. Li hem posat un filtre -name "*.php -o -name "*.css"" perquè només volem vigilar els arxius .php i els .css. Com que l'hem connectat a la comanda entr, aquesta executarà la comanda que se li ha especificat com a paràmetre, en aquest cas, el fitxer que hem creat reload-chrome.sh.

Ara ja podem modificar qualsevol arxiu dins la carpeta i veurem que automàticament es refresca l'explorador.

Aquest petit truc demostra la potència de la comanda entr. Imagina't ara totes les tasques que pots automatitzar, ja que pots cridar qualsevol comanda enlloc de reload-chrome.sh.

Jo sempre executo la comanda anterior dins una sessió de tmux, per tenir el procés al 'background', i no haver de tenir una pestanya oberta amb la comanda entr.

Salut!

Lluís