Gulp-webapp con BrowserSync e PHP

Question

Il mio obiettivo principale qui è quello di adattare il flusso di lavoro di sviluppo gulp-webapp di Yeoman per eseguire PHP.

In particolare, voglio essere in grado di utilizzare gulp-php-connect con più directory di base (per il CSS compilato da Sass) e percorsi (per dipendenze Bower), se è ancora possibile.

Sono in grado di eseguire PHP con Gulp utilizzando il plugin gulp-connect-php, in questo modo:

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' 
    }); 
}); 

Tuttavia, vorrei approfittare di eccellente ma piuttosto intricata architettura del flusso di lavoro di sviluppo di gulp-webapp, che si affida a BrowserSync, al compilatore Sass (compila un file .css in una cartella .tmp, per lo sviluppo), al prefisso automatico e utilizza una serie di altri plugin utili.

Ecco la parte di esso che vorrei adattarsi a utilizzare gulp-connect-php o qualsiasi altro PHP:

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 ha un'opzione proxy, che mi permette di correre con gulp-connect-php server, che è piuttosto sorprendente . Ma ho bisogno di gulp-connect-php per usare più directory di base e percorsi, come fa BrowserSync.

Finora mi è venuta in mente questo:

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]); 
}); 

Per fissare temporaneamente il più directory di base problema, ho modificato il compito styles quindi memorizza il .css compilato per /app invece di .tmp/. Preferirei averlo su una cartella temporanea, perché non ho bisogno di quel file .css compilato che gira lì con i miei file Sass.

Per la percorsi problema, sto cercando di dire wiredep plugin per modificare un percorso, diciamo, da bower_components/jquery/dist/jquery.js a ../bower_components/jquery/dist/jquery.js, senza successo.

Tutto quello che potevo fare era rinominare manualmente i percorsi in index.php, e ancora non funziona. Quando si esegue gulp serve ottengo:

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

... anche se ho cambiato il percorso in index.html a ../bower_components/jquery/dist/jquery.js.

Credo che non funzioni perché il server gulp-connect-php non riesce a vedere cosa c'è fuori dalla cartella di base.

Sto provando cose diverse, e anche se sono stato piuttosto vago sul titolo di questo thread, penso che la soluzione più pulita sarebbe quella di eseguire più directory di base e percorsi con gulp-connect-php, ma non so se questo è possibile.

Answer 1

FWIW, ho una soluzione abbastanza semplice ed equa posizionando il file .css compilato nella cartella app/root e moving/bower_dependencies all'interno dell'app/cartella.

Per Sass, ho solo bisogno di modificare il percorso nel segnaposto su <!-- build:css styles/main.css --> e modificare il dest nell'attività styles.

Per i bower_components, ho appena modificato bower_components in .bowerrc:

{ 
    "directory": "app/bower_components" 
} 

e aggiunto questo al flusso wiredep in gulpfile.js:

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

Answer 2

ho trascorso un po 'cercando di lavorare questo uno fuori, ma avere una soluzione di lavoro ora. Il mio modo di risolvere è stato quello di utilizzare BrowserSync come server, e ha aggiunto un middleware che proxy richieste se non corrispondono a un modello ...

Installare il pacchetto http-proxy ...

$ npm install --save-dev http-proxy 

Aggiungere il pacchetto proxy per la parte superiore della gulpfile.js ...

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

aggiunge un server php separato e un server proxy prima che il BrowserSync ...

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

    var proxy = httpProxy.createProxyServer({}); 

    // ... 

Quindi aggiungere il middleware per il server per vedere se la richiesta deve essere proxy ...

 // ... 

     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(); 
       } 
      } 
     } 

     // ... 

Ed ecco i compiti complete per completezza ...

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']); 
}); 

Spero che questo consente di risparmiare tutto il tempo che ho dedicato a questo lavoro! : o)