node - Gulp-webapp ejecutando BrowserSync y PHP

yo angular

Question

Mi objetivo principal aquí es adaptar el flujo de trabajo de desarrollo de gulp-webapp de Yeoman para ejecutar PHP.

Específicamente, quiero poder usar gulp-php-connect con múltiples directorios base (para el CSS compilado de Sass) y rutas (para dependencias de Bower), si eso es posible.

Puedo ejecutar PHP con Gulp usando el plugin gulp-connect-php , así:

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

Sin embargo, me gustaría aprovechar la excelente pero bastante enmarañada arquitectura de flujo de trabajo de desarrollo de gulp-webapp, que se basa en BrowserSync, el compilador Sass (compila en un archivo .css en una carpeta .tmp, para el desarrollo), el prefijo automático y usa muchos otros complementos útiles.

Esta es la parte que me gustaría adaptar para usar gulp-connect-php o cualquier otro 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 tiene una opción proxy, que me permite ejecutarlo con el servidor gulp-connect-php , que es bastante sorprendente. Pero necesito gulp-connect-php para usar múltiples directorios base y rutas, como lo hace BrowserSync .

Hasta ahora he llegado a esto:

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

Para solucionar temporalmente el problema de los directorios base múltiples , ajusté la tarea de styles para que almacene el .css compilado en /app lugar de .tmp/ . Sin embargo, preferiría tenerlo en una carpeta temporal, porque no necesito ese archivo compilado .css dando vueltas con mis archivos Sass.

Para el problema de las rutas , estoy tratando de decirle wiredep complemento wiredep que cambie una ruta, por ejemplo, de bower_components/jquery/dist/jquery.js a ../bower_components/jquery/dist/jquery.js , sin éxito.

Todo lo que pude hacer fue renombrar manualmente las rutas en index.php, y aún no funciona. Cuando gulp serve obtengo:

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

... aunque cambié la ruta en index.html a ../bower_components/jquery/dist/jquery.js .

Creo que eso no funciona porque el servidor gulp-connect-php no puede ver lo que está fuera de la carpeta base.

Estoy intentando cosas diferentes, y aunque he sido bastante vago en el título de este hilo, creo que la solución más limpia sería ejecutar múltiples directorios base y rutas con gulp-connect-php , pero no sé si eso es posible.

Answer 1

FWIW, tengo una solución bastante simple y justa al colocar el archivo compilado .css en la carpeta app / root y moving / bower_dependencies dentro de la aplicación / carpeta.

Para Sass, solo necesitaba cambiar la ruta en el marcador de posición a <!-- build:css styles/main.css --> y cambiar el dest en la tarea de styles .

Para bower_components, acabo de editar bower_components en .bowerrc:

{
  "directory": "app/bower_components"
} 

y agregué esto a la secuencia wiredep en gulpfile.js:

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

Answer 2

Pasé un tiempo tratando de resolverlo, pero ahora tengo una solución de trabajo. La forma en que resolví fue utilizar BrowserSync como servidor, y agregué un middleware que aprobaba las solicitudes si no coincidían con un patrón ...

Instale el paquete http-proxy ...

$ npm install --save-dev http-proxy

Agregue el paquete proxy a la parte superior de gulpfile.js ...

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

Agregue un servidor php separado y un servidor proxy antes de BrowserSync ...

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

    var proxy = httpProxy.createProxyServer({});

    // ...

Luego agregue el middleware para el servidor para ver si la solicitud necesita ser proxiada ...

        // ...

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

        // ...

Y aquí están las tareas completas para completar ...

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

Espero que esto te ahorre todo el tiempo que pasé trabajando en esto. : o)