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)