Gulp-Webapp läuft BrowserSync und PHP

Question

Mein Hauptziel hier ist, Yeoman gulp-webapp Entwicklungs-Workflow für die Ausführung von PHP anzupassen.

Insbesondere möchte ich in der Lage sein zu verwenden gulp-php-connect mit mehrere Basisverzeichnisse (für die kompilierte CSS von Sass) und Routen (für Bower Abhängigkeiten), wenn das überhaupt möglich ist.

Ich bin in der Lage PHP mit Gulp mit der gulp-connect-php Plugin, wie dies auszuführen:

gulp.task('connect-php', function() { 
    connectPHP.server({ 
    hostname: '0.0.0.0', 
    bin: '/Applications/MAMP/bin/php/php5.5.3/bin/php', 
    ini: '/Applications/MAMP/bin/php/php5.5.3/conf/php.ini', 
    port: 8000, 
    base: 'dev' 
    }); 
}); 

Allerdings würde ich den Vorteil von großem Schluck-Webapp ausgezeichneter nehmen mag, aber ganz verstrickte Architektur Entwicklung Workflow, der setzt auf BrowserSync, Sass-Compiler (kompiliert zu einer .css-Datei in einen .tmp-Ordner, für die Entwicklung), Auto-Präfix, und verwendet eine Reihe anderer nützlicher Plugins.

Hier ist der Teil davon, dass ich gulp-connect-php oder andere PHP anpassen verwenden möchte:

gulp.task('serve', ['styles'],function() { 
    browserSync({ 
    notify: false, 
    port: 9000, 
    server: { 
     baseDir: ['.tmp', 'app'], 
     routes: { 
     '/bower_components': 'bower_components' 
     } 
    } 
    }); 

    // watch for changes 
    gulp.watch([ 
    'app/*.html', 
    '.tmp/styles/**/*.css', 
    'app/scripts/**/*.js', 
    'app/images/**/*' 
    ]).on('change', reload); 

    gulp.watch('app/styles/**/*.scss', ['styles', reload]); 
    gulp.watch('bower.json', ['wiredep', 'fonts', reload]); 
}); 

BrowserSync hat eine Proxy-Option, die ich mit gulp-connect-php Server laufen zu lassen, das ist ziemlich erstaunlich ist, . Aber ich brauche gulp-connect-php es mehrere Basisverzeichnisse und Routen zu verwenden, wie BrowserSync tut.

Bisher habe ich mit diesem kommen:

gulp.task('serve-php', ['styles','connect-php'],function() { 
    browserSync({ 
    proxy: "localhost:8000" 
    }); 

    // watch for changes 
    gulp.watch([ 
    'app/*.php', 
    'app/styles/**/*.css', 
    'app/scripts/**/*.js', 
    'app/images/**/*' 
    ]).on('change', reload); 

    gulp.watch('app/styles/**/*.scss', ['styles, reload]); 
    gulp.watch('bower.json', ['wiredep', 'fonts', reload]); 
}); 

vorübergehend zu beheben, um das mehrere Basisverzeichnisse Problem, ich gezwickt die styles Aufgabe, so dass es die kompilierte .css- zu /app statt .tmp/ speichert. Ich würde es aber lieber in einem temporären Ordner haben, da ich diese kompilierte .css-Datei nicht mit meinen Sass-Dateien herumhängen muss.

Für die Routen Problem, ich versuche wiredep Plugin zu sagen, einen Weg zu ändern, sagen wir, von bower_components/jquery/dist/jquery.js zu ../bower_components/jquery/dist/jquery.js, ohne Erfolg.

Alles, was ich tun konnte, war manuell die Pfade in index.php umzubenennen, und es funktioniert immer noch nicht. Wenn gulp serve läuft ich:

/bower_components/jquery/dist/modernizr.js - No such file or directory

... obwohl ich den Weg in index.html zu ../bower_components/jquery/dist/jquery.js geändert.

Ich glaube, das funktioniert nicht, weil der gulp-connect-php Server nicht sehen kann, was außerhalb des Basisordners ist.

Ich versuche verschiedene Dinge, und obwohl ich ziemlich vage über den Titel dieses Threads gewesen bin, denke ich, dass die sauberste Lösung wäre, mehrere Basisverzeichnisse und Routen mit gulp-connect-php auszuführen, aber ich weiß nicht, ob das ist möglich.

Answer 1

FWIW, ich habe eine recht einfache und faire Lösung dafür, indem ich die kompilierte .css-Datei in den app/root- und moving/bower_dependencies-Ordner im app/folder platziere.

Für Sass, ich musste nur den Pfad im Platzhalter auf <!-- build:css styles/main.css --> ändern und ändern Sie die dest in der styles Aufgabe.

{ 
    "directory": "app/bower_components" 
} 

und fügte hinzu, dies den wiredep Strom in gulpfile.js:

fileTypes: { 
    scss: { 
     replace: { 
     scss: '@import "app/{{filePath}}";' 
     } 
    } 
    }, 

Answer 2

ich eine Weile lang versucht, diese Arbeit

Für die bower_components, ich bower_components in .bowerrc gerade bearbeitet eins raus, aber jetzt eine funktionierende Lösung. So wie ich das gelöst war BrowserSync als Server zu verwenden, und fügte hinzu, eine Middleware, die Anfragen Proxys, wenn sie ... nicht mit einem Muster übereinstimmen

Installieren Sie den http-Proxy-Paket ...

$ npm install --save-dev http-proxy 

Fügen Sie die Proxy-Paket an die Spitze des gulpfile.js ...

var httpProxy = require('http-proxy'); 

einen separaten pHP-Server hinzufügen und einen Proxy-Server vor dem BrowserSync ...

gulp.task('php-serve', ['styles', 'fonts'], function() { 
    connect.server({ 
     port: 9001, 
     base: 'app', 
     open: false 
    }); 

    var proxy = httpProxy.createProxyServer({}); 

    // ... 

Dann die Middleware für den Server hinzufügen, um zu sehen, ob die Anforderung proxied werden muss ...

 // ... 

     server: { 
      baseDir : ['.tmp', 'app'], 
      routes : { 
       '/bower_components': 'bower_components' 
      }, 

      // THIS IS THE ADDED MIDDLEWARE 
      middleware: function (req, res, next) { 
       var url = req.url; 

       if (!url.match(/^\/(styles|fonts|bower_components)\//)) { 
        proxy.web(req, res, { target: 'http://127.0.0.1:9001' }); 
       } else { 
        next(); 
       } 
      } 
     } 

     // ... 

Und hier ist die volle Aufgaben der Vollständigkeit halber ...

gulp.task('php-serve', ['styles', 'fonts'], function() { 
    connect.server({ 
     port: 9001, 
     base: 'app', 
     open: false 
    }); 

    var proxy = httpProxy.createProxyServer({}); 

    browserSync({ 
     notify: false, 
     port : 9000, 
     server: { 
      baseDir : ['.tmp', 'app'], 
      routes : { 
       '/bower_components': 'bower_components' 
      }, 
      middleware: function (req, res, next) { 
       var url = req.url; 

       if (!url.match(/^\/(styles|fonts|bower_components)\//)) { 
        proxy.web(req, res, { target: 'http://127.0.0.1:9001' }); 
       } else { 
        next(); 
       } 
      } 
     } 
    }); 

    // watch for changes 
    gulp.watch([ 
     'app/*.html', 
     'app/*.php', 
     'app/scripts/**/*.js', 
     'app/images/**/*', 
     '.tmp/fonts/**/*' 
    ]).on('change', reload); 

    gulp.watch('app/styles/**/*.scss', ['styles']); 
    gulp.watch('app/fonts/**/*', ['fonts']); 
    gulp.watch('bower.json', ['wiredep', 'fonts']); 
}); 

Hope this spart Ich habe die ganze Zeit damit verbracht, das auszuarbeiten! : o)