Browser-sync sur Mac OSX El Capitan 10.11.1

hatfab
Javascript NodeJS

Bonjour,
Est-ce que quelqu'un a réussi à faire fonctionner BrowserSync sur Mac OSX El Capitan 10.11.1 ?
Chez moi quand je lance la commande browser-sync start --server une page s'ouvre sur mon navigateur avec Cannot GET / et c'est tout.
Si quelqu'un a un tuyau…
Merci

19 réponses

Defy
Réponse acceptée

il faut se créer un fichier externe un peut dans se genre la

"use strict";

var bs = require("browser-sync");

bs.init({
    server: "./",
    ghostMode: {
        clicks: true,
        forms: true,
        scroll: true
    },
    logLevel: "debug"
});

bs.watch("index.html").on("change", bs.reload);
bs.watch("dist/css/bundle.css").on("change", bs.reload);
bs.watch("dist/js/bundle.js").on("change",bs.reload);

j'ai appelé mon fichier browserSync.js et pour l'appeler je fait juste un coup de node browserSync.js

edit: un peut de doc ici et la pour l'utilisation de l'API

Defy

cette erreur est du au faite que browser-sync ne trouve pas le dossier racine ou ton index.html est situé.

tu peut créer un fichier de configuration qui permet de choisir les dossier a watcher

hatfab
Auteur

Oui, j'ai compris après mon erreur. En fait j'utilise MAMP, et mon fichier index est un .PHP, du coup, il cherche un .HTML qu'il ne trouve pas. Finalement j'ai lancé Browsersync en proxy et là ça marche.
Mon soucis maintenant c'est de lui dire où écouter. Par exemple, dans le cas d'une structure Wordpress, il y a beaucoup de dossiers imbriqués avant de d'arriver aux thèmes dans lesquels se trouvent les fichiers à watcher. Comment on résout ce problème ? Avec le fichier de configuration ? Comment on fait ?
J'ai essayé ça de façon empirique mais ça ne fonctionne pas :

browser-sync start --proxy "localhost:80/primavera" --files="/Users/newimac/Google\ Drive/dev/primavera/wp-content/themes/*/*.css, /Users/newimac/Google\ Drive/dev/primavera/wp-content/themes/*/*.php"

Merci à toi

hatfab
Auteur

Super, merci beaucoup, je vais regarder ça :)

hatfab
Auteur

Juste un truc, à quel moment il faut appeler le fichier externe .js ? Il faut ouvrir une 2e fenêtre du terminal après avoir lancé Browsersync ?

Defy

non tu n'as pas besoin de lancer la commande browsersync, le fichier de configuration la remplace, il suffit de faire node file_name.js et op le tour est joué

hatfab
Auteur

Ah ok, compris !
Merci !

Defy

de rien :-)

hatfab
Auteur

Salut Defy,
Je continue de me dépatouiller avec tout ça et ça n'est pas très concluant. J'appelle mon js avec ça : <code>node /Users/newimac/Google\ Drive/dev/bs-morceau.js</code> et je reçois une dizaine de ligne d'erreur :

iMac-de-New:dev newimac$ node /Users/newimac/Google\ Drive/dev/bs-morceau.js
module.js:328
    throw err;
    ^

Error: Cannot find module 'browser-sync'
    at Function.Module._resolveFilename (module.js:326:15)
    at Function.Module._load (module.js:277:25)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/Users/newimac/Google Drive/dev/bs-morceau.js:3:10)
    at Module._compile (module.js:398:26)
    at Object.Module._extensions..js (module.js:405:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Function.Module.runMain (module.js:430:10)

Je ne sais pas trop d'où tout ça peut venir. Voilà à quoi,ressemble mon fichier .js :

"use strict";

var bs = require("browser-sync");

bs.init({
    server: "localhost:80/morceau",
    ghostMode: {
        clicks: true,
        forms: true,
        scroll: true
    },
    logLevel: "debug"
});

bs.watch("index.php").on("change", bs.reload);
bs.watch("assets/css/*.css").on("change", bs.reload);

Peux-tu m'aider à trouver ce qui cloche ?

Defy

il faut faire un npm install browser-sync

hatfab
Auteur

je l'ai reinstallé mais je ne comprends pas pourquoi, puisqu'il l'était déjà. Bref, on avance, ça fonctione. Le serveur se lance et je peux voir ma page <code>index.php</code>. En revanche, il n'écoute rien du tout, pourtant je lui dis bien de le faire…

"use strict";

var bs = require("browser-sync");

bs.init({
    proxy: "localhost:80/morceau",
    ghostMode: {
        clicks: true,
        forms: true,
        scroll: true
    },
    logLevel: "debug"
});

bs.watch("*/index.php").on("change", bs.reload);
bs.watch("assets/css/*.css").on("change", bs.reload);

Sur le terminal j'ai ça

[BS] Proxying: http://localhost:80
[BS] Access URLs:
 --------------------------------------------
       Local: http://localhost:3000/morceau
    External: http://192.168.0.2:3000/morceau
 --------------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.0.2:3001
 --------------------------------------------

Mais il n'y a pas la petite ligne magique à la fin <code>[BS] Watching files...</code>

Defy

j'ai jamais utilisé avec php donc je ne sais pas comment faire, je bosse majoritairement avec javascript. parcontre j'ai trouvé ceci je pense que cela pourrait t'aider un peut sur ta recherche

hatfab
Auteur

Merci Defy, je vais continuer d'avancer avec ça…

hatfab
Auteur

Bon, je n'y arrive pas :(
Le serveur se lance bien mais rien n'est synchronisé si jouvre plusieurs navigateur et aucun fichier n'est écouté.
Voilà le script que je lance via le terminal avec <code>node bs-morceau.js</code>:

"use strict";

var bs = require("browser-sync");

bs.init({
    proxy: "localhost:80/morceau",
    ghostMode: {
        clicks: true,
        forms: true,
        scroll: true
    },
    logLevel: "debug"
});

bs.watch("./index.php").on("change", bs.reload);
bs.watch("./assets/css/*.css").on("change", bs.reload);

Et voilà ce qui s'affiche dans le terminal (oui c'est super long mais bon…):

iMac-de-New:dev newimac$ node bs-morceau.js
[BS] [debug] -> Starting Step: Finding an empty port
[BS] [debug] Found a free port: 3000
[BS] [debug] Setting Option: port - 3000
[BS] [debug] +  Step Complete: Finding an empty port
[BS] [debug] -> Starting Step: Getting an extra port for Proxy
[BS] [debug] +  Step Complete: Getting an extra port for Proxy
[BS] [debug] -> Starting Step: Checking online status
[BS] [debug] Resolved www.google.com, setting online: true
[BS] [debug] Setting Option: online - true
[BS] [debug] +  Step Complete: Checking online status
[BS] [debug] -> Starting Step: Resolve user plugins from options
[BS] [debug] +  Step Complete: Resolve user plugins from options
[BS] [debug] -> Starting Step: Set Urls and other options that rely on port/online status
[BS] [debug] Setting multiple Options
[BS] [debug] +  Step Complete: Set Urls and other options that rely on port/online status
[BS] [debug] -> Starting Step: Setting Internal Events
[BS] [debug] +  Step Complete: Setting Internal Events
[BS] [debug] -> Starting Step: Setting file watchers
[BS] [debug] +  Step Complete: Setting file watchers
[BS] [debug] -> Starting Step: Merging middlewares from core + plugins
[BS] [debug] Setting Option: middleware - List []
[BS] [debug] +  Step Complete: Merging middlewares from core + plugins
[BS] [debug] -> Starting Step: Setting the rewrite rules given in initial options
[BS] [debug] +  Step Complete: Setting the rewrite rules given in initial options
[BS] [debug] -> Starting Step: Setting the rewrite rules middleware for snippet
[BS] [debug] +  Step Complete: Setting the rewrite rules middleware for snippet
[BS] [debug] -> Starting Step: Starting the Server
[BS] [debug] Proxy running, proxing: http://localhost:80
[BS] [debug] Running mode: PROXY
[BS] [debug] +  Step Complete: Starting the Server
[BS] [debug] -> Starting Step: Adding serve static middlewares
[BS] [debug] +  Step Complete: Adding serve static middlewares
[BS] [debug] -> Starting Step: Starting the HTTPS Tunnel
[BS] [debug] +  Step Complete: Starting the HTTPS Tunnel
[BS] [debug] -> Starting Step: Starting the web-socket server
[BS] [debug] Setting Option: clientEvents - List [ "scroll", "scroll:element", "input:text", "input:toggles", "form:submit", "form:reset", "click" ]
[BS] [debug] +  Step Complete: Starting the web-socket server
[BS] [debug] -> Starting Step: Adding the HTTP protocol
[BS] [debug] +  Step Complete: Adding the HTTP protocol
[BS] [debug] -> Starting Step: Starting the UI
[BS] [debug] Setting Option: session - 1450780185298
[BS] [UI] Starting Step: Setting default plugins
[BS] [UI] Step Complete: Setting default plugins
[BS] [UI] Starting Step: Finding a free port
[BS] [UI] Step Complete: Finding a free port
[BS] [UI] Starting Step: Setting options also relevant to UI from BS
[BS] [UI] Step Complete: Setting options also relevant to UI from BS
[BS] [UI] Starting Step: Setting available URLS for UI
[BS] [debug] Getting option via path: urls
[BS] [UI] Step Complete: Setting available URLS for UI
[BS] [UI] Starting Step: Starting the Control Panel Server
[BS] [UI] Using port 3001
[BS] [UI] Step Complete: Starting the Control Panel Server
[BS] [UI] Starting Step: Add element events
[BS] [UI] Step Complete: Add element events
[BS] [UI] Starting Step: Registering default plugins
[BS] [debug] Getting option via path: urls,external
[BS] [UI] Step Complete: Registering default plugins
[BS] [UI] Starting Step: Add options setting event
[BS] [UI] Step Complete: Add options setting event
[BS] [debug] +  Step Complete: Starting the UI
[BS] [debug] -> Starting Step: Merge UI settings
[BS] [debug] Setting Option: urls - Map { "local": "http://localhost:3000/morceau", "external": "http://192.168.0.2:3000/morceau", "ui": "http://localhost:3001", "ui-external": "http://192.168.0.2:3001" }
[BS] [debug] +  Step Complete: Merge UI settings
[BS] [debug] -> Starting Step: Init user plugins
[BS] [debug] Setting Option: userPlugins - 
[BS] [debug] +  Step Complete: Init user plugins
[BS] Proxying: http://localhost:80
[BS] Access URLs:
 --------------------------------------------
       Local: http://localhost:3000/morceau
    External: http://192.168.0.2:3000/morceau
 --------------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.0.2:3001
 --------------------------------------------

Tout dépité je suis…

Defy

je suis dsl je peut pas t'aider plus sur ce coup, je l'utilise uniquement avec des fichier js - sass - html donc pas du tous de php ou autre, faut tester sur la doc a fond pour voir comment cela marche vraiment mais je sais pas si c'est possible

hatfab
Auteur

Oui oui, c'est possible, puisque j'y arrive avec ça :

browser-sync start --proxy "localhost:80/primavera" --files="/Users/newimac/Google\ Drive/dev/primavera/wp-content/themes/*/*.css, /Users/newimac/Google\ Drive/dev/primavera/wp-content/themes/*/*.php"

C'est juste que j'ai du mal à cibler les fichiers à écouter avec cette methode.

Defy

ayant vue que tu etait sous wordpress pour ton projet j'ai trouvé ceci ceci ou encore cela qui pourrais peut-être t'aider

hatfab
Auteur

Super ! Merci beaucoup, avec ça il y a moyen d'avancer pas mal je crois…

Defy

je pense aussi ^^