gulp.js + browserSync + gulp-connect-php

Dustin84

Erfahrenes Mitglied
Hallo!

Für meinen FrontEnd Workflow benutze ich Gulp.js mit diversen Tasks, wie z.B. SASS kompilieren oder JS Dateien zusammen fügen.

Für das Templating der einzelnen Projektseiten wäre es praktisch, wenn ich meine Datei aufteilen könnte (header,content,navi,footer etc.).

Ebenso benutze ich browserSync, was aber nur mit HTML Dateien funktioniert. Ich muss also einen Server aufsetzen, so wie hier im Beispiel von gulp-connect-php. Ich möchte mit php und nicht mit html Dateien arbeiten.

Javascript:
var gulp = require('gulp'),
    connect = require('gulp-connect-php'),
    browserSync = require('browser-sync');
gulp.task('connect-sync', function() {
  connect.server({}, function (){
    browserSync({
      proxy: '127.0.0.1:8000'
    });
  });
  gulp.watch('**/*.php').on('change', function () {
    browserSync.reload();
  });
});

Wenn ich die Task starte, öffnet sich zwar ein Browserfenster mit der Adresse "http://localhost:3000/" aber es läd nix.
Hier mein Terminal Log:
Code:
C:\Users\Jan\websites\default-project>gulp connect-sync
[10:35:21] Using gulpfile ~\websites\default-project\gulpfile.js
[10:35:21] Starting 'connect-sync'...
[10:35:25] Finished 'connect-sync' after 4.44 s
[BS] Proxying: http://127.0.0.1:8000
[BS] Access URLs:
-------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.28:3000
-------------------------------------
          UI: http://localhost:3001
UI External: http://192.168.1.28:3001
-------------------------------------


Ich hatte auch schon viele andere Task probiert aber ich bekomme es einfach nicht zum laufen!
Muss ich noch irgendwas auf meinen Windows 7 System installiert haben? PHP? XAMPP? Von dem Servergedöns verstehe ich leider gar nix...

Gruß
Jan
 
Hey Jan,

Ich habe mich viel mit dem selben Problem die Tage beschäftigt und habe eine Lösung gefunden :)
Mein Projekt liegt auf auf ~/www/projekt/ und ich habe mittels httpd-vhost einen Virtual Host eingerichtet, damit ich meine Site über Site.dev erreichen kann

Mein Server-Task sieht dementsprechend wie folgt aus:

Javascript:
// Serve task
gulp.task('serve', ['styles', 'scripts'],  function() {
  plugins.connect.server({}, function (){
    browserSync({
      proxy: 'Site.dev',
      notify: false
    });
  });

  gulp.watch('**/*.php').on('change', browserSync.reload);
  gulp.watch(src + 'styles/**/*.scss', ['styles']);
  gulp.watch(src + 'scripts/**/*.js', ['scripts']);
});

Mein browserSync holt sich die Information meiner Site mittels proxy, in dem ich sage wo die Site zu finden ist.
In deinem Fall müsste das eher so aussehen:

Javascript:
// Serve task
gulp.task('serve', ['styles', 'scripts'],  function() {
  plugins.connect.server({}, function (){
    browserSync({
      baseDir: "./",
      notify: false
    });
  });

  gulp.watch('**/*.php').on('change', browserSync.reload);
  gulp.watch(src + 'styles/**/*.scss', ['styles']);
  gulp.watch(src + 'scripts/**/*.js', ['scripts']);
});


Versuch das mal, vielleicht ist das ja das Problem :)
Viel Erfolg noch
 
Zurück