Outil pour rafraichir automatiquement le navigateur lors d’une modification

Essaye Fb-Flo de Facebook
https://github.com/facebook/fb-flo#usage

Un Tutoriel :
http://www.grafikart.fr/tutoriels/html-css/fb-flo-reload-516

Exemple :

“Flo.js” à la racine du projet Rails.

var flo = require('fb-flo'),
    path = require('path'),
    fs = require('fs');

var server = flo(
    './',
    {
        port: 8888,
        host: 'localhost',
        verbose: false,
        glob: [
            // All JS files in `sourceDirToWatch` and subdirectories
            '**/*.js',
            // All CSS files in `sourceDirToWatch` and subdirectories
            '**/*.css',
            '**/*.html.erb'

        ]
    },
    function resolver(filepath, callback) {
        console.log(filepath+" a ete modifie");
        // 1. Call into your compiler / bundler.
        // 2. Assuming that `bundle.js` is your output file, update `bundle.js`
        //    and `bundle.css` when a JS or CSS file changes.
        callback({
            resourceURL: '/',
            // any string-ish value is acceptable. i.e. strings, Buffers etc.
            reload:true,
            contents: fs.readFileSync(filepath),
            update: function(_window, _resourceURL) {
                // this function is executed in the browser, immediately after the resource has been updated with new content
                // perform additional steps here to reinitialize your application so it would take advantage of the new resource
                console.log("Resource " + _resourceURL + " has just been updated with new content");
                //location.reload();
            }
        });
    }
);

et côté chrome la configuration que j’avais rentré si je me souviens bien c’est .

0.0.0.0
localhost
8888

Et voila. Je ne connais pas les autres solutions sauf guard que j’ai testé et fait fonctionné un temps juste pour compiler pour le coffee et le sass.

1 J'aime

Merci je vais essayer ça aussi.

J’ai profité du post précédent pour mettre à jour sublime et les plugins à l’intérieur.

Je suis en train de tester une solution avec la gem rack-livereload qui évite que chacun installe une extension chrome et le package LiveReload-sublimetext2 dans Sublime text 2/3. C’est l’éditeur qui envoi le signal.
Il y a aussi une solution avec Guard.

J’ai aussi vu Tin.cr, mais j’ai un probleme avec Chrome sous Ubuntu, aucun plugin ne veut s’installer.

1 J'aime

http://www.browsersync.io se charge de ça. Il permet aussi de propager une action (changer d’URL, remplir un formulaire, scroller…) sur plusieurs devices simultanément.

Je viens de voir ta réponse. Ça a l’air pas mal ! Je n’ai pas vu dans la doc, est-ce que ça marche pour les fichiers less/coffee/haml ? Ils ne parlent que des formats par défaut.

Depuis mon post, je fonctionne avec Livereload. Il y a un petit problème de configuration avec Sublime 3 sous linux, le plugin ne reste pas activé quand on relance l’éditeur, mais sinon ça fait quand même gagner quelques refresh.
Si c’est uniquement du CSS qui est changé, il est directement injecté dans le navigateur sans recharger la page. Si on touche aux vues, il y a un rechargement complet.

La dernière version de CodeKit le fait très bien. Avantage, pas d’extension de navigateur à installer, pas d’éditeur de texte particulier à utiliser.

Autre avantage, il ne recharge pas seulement lors d’un changement de less/sass/css et javascript mais aussi de language backend comme le PHP. Assez malin.

Human Coders - Le centre de formation recommandé par les développeur·se·s pour les développeur·se·s