Git Product home page Git Product logo

Comments (9)

isaacalves avatar isaacalves commented on August 31, 2024 1

Hey Micah, I was able to use gulp-connect-php with BrowserSync very easily:

gulp.task('connect', 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: 'app'
  });
});

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

Now, is it possible to use multiple base directories and routes?
With BrowserSync, it works like this:

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

from gulp-connect-php.

louisremi avatar louisremi commented on August 31, 2024 1

I've been able to use multiple root paths by running gulp-connect and gulp-connect-php side by side, with the help of moderewrite middleware:

var gulp = require('gulp');
var connect = require('gulp-connect');
var phpconnect = require('gulp-connect-php');
var modrewrite = require('connect-modrewrite');
var browserSync = require('browser-sync').create();

gulp.task('serve', function() {

    phpconnect.server({}, function() {
        // connect is required to serve static assets from multiple roots
        connect.server({
            port: 8001,
            root: ['.', '.tmp', 'node_modules'],
            middleware: function() {
                return [
                    // urls without extensions or with php extension should
                    // be proxied to php. This prevents dots in urls, though.
                    modrewrite([
                        '^([^.]*|.*?\.php)$ http://localhost:8000$1 [P,NC]'
                    ])
                ];
            }
        });
        browserSync.init({
            proxy: 'localhost:8001'
        });
    });

   // ad-hoc watches for my website  
    gulp.watch("./assets/css/**/*.scss", ['sass']);
    gulp.watch("./assets/js/*.js").on('change', browserSync.reload);
    gulp.watch("./site/**/*.php").on('change', browserSync.reload);
});

from gulp-connect-php.

micahblu avatar micahblu commented on August 31, 2024

Sorry for the delay Isaac, was not receiving emails on issues. Looking into this tonight, should have a patch out soon

from gulp-connect-php.

micahblu avatar micahblu commented on August 31, 2024

Hi Isaac, unfortunately gulp-connect-php doesn't currently support livereload. It is a feature I would like to implement but haven't yet had the time. There are also some other features from gulp-connect that aren't supported. gulp-connect is a very robust server module whereas this module only supports the most fundamental features.

from gulp-connect-php.

micahblu avatar micahblu commented on August 31, 2024

Thanks to inagaxiii and saacalves for pointing out the ease of integrating BrowserSync with gulp-connect-php. Below is a snippet of a working example using BrowserySync to live reload the browser while editing php files. Enjoy

var gulp = require('gulp'),
    connect = require('gulp-connect-php'),
    browserSync = require('browser-sync');

gulp.task('connect-sync', function() {
  connect.server({}, function (){
    browserSync({
      proxy: 'localhost:8000'
    });
  });

  gulp.watch('**/*.php').on('change', function () {
    browserSync.reload();
  });
});

from gulp-connect-php.

isaacalves avatar isaacalves commented on August 31, 2024

Hey Micah, you're welcome!

There are some issues though:

Sometimes BrowserSync doesn't work (it just doesn't refresh, I need to do it manually), for PHP, Sass and js files. I haven't been able to find out yet exactly when and why, it seems to occur randomly.

Also, each time I hit refresh in the browser, I get in the CLI a cluttering list of all the page assets, for example:

[BS] Reloading Browsers...
[Fri Jan 30 11:07:32 2015] 127.0.0.1:54464 [200]: /
[Fri Jan 30 11:07:33 2015] 127.0.0.1:54465 [200]: /bower_components/font-awesome/css/font-awesome.css
[Fri Jan 30 11:07:33 2015] 127.0.0.1:54468 [200]: /main.css
[Fri Jan 30 11:07:33 2015] 127.0.0.1:54469 [200]: /bower_components/modernizr/modernizr.js
[Fri Jan 30 11:07:33 2015] 127.0.0.1:54470 [200]: /bower_components/jquery/dist/jquery.js
[Fri Jan 30 11:07:33 2015] 127.0.0.1:54471 [200]: /bower_components/skrollr/src/skrollr.js
[Fri Jan 30 11:07:33 2015] 127.0.0.1:54472 [200]: /bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/affix.js
[Fri Jan 30 11:07:33 2015] 127.0.0.1:54475 [200]: /bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/alert.js
// etc...

from gulp-connect-php.

stefanKuijers avatar stefanKuijers commented on August 31, 2024

@louisremi Thank you so much for your suggestion. For the first time since I'm trying to make gulp-webapp work with php I get to see page with styles!

It's an awesome first step. I do notice that the moment the server starts gulp spits out the following error:

[21:39:46] Server started http://localhost:8001
[Wed Aug 26 21:39:55 2015] 127.0.0.1:55766 [200]: /
[BS] Proxying: http://localhost:8001
[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://25.31.227.202:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://25.31.227.202:3001
 --------------------------------------
[Wed Aug 26 21:39:56 2015] 127.0.0.1:55774 [200]: /
Error: Forbidden
    at createError (c:\Users\S\dev\gulp-php\node_modules\gulp-connect\node_modul
es\connect\node_modules\serve-index\index.js:188:13)
    at Object.directory [as handle] (c:\Users\S\dev\gulp-php\node_modules\gulp-c
onnect\node_modules\connect\node_modules\serve-index\index.js:100:46)
    at next (c:\Users\S\dev\gulp-php\node_modules\gulp-connect\node_modules\conn
ect\lib\proto.js:194:15)
    at SendStream.error (c:\Users\S\dev\gulp-php\node_modules\gulp-connect\node_
modules\connect\node_modules\serve-static\index.js:86:37)
    at SendStream.emit (events.js:107:17)
    at SendStream.error (c:\Users\S\dev\gulp-php\node_modules\gulp-connect\node_
modules\connect\node_modules\serve-static\node_modules\send\lib\send.js:172:51)
    at SendStream.onStatError (c:\Users\S\dev\gulp-php\node_modules\gulp-connect
\node_modules\connect\node_modules\serve-static\node_modules\send\lib\send.js:28
5:48)
    at c:\Users\S\dev\gulp-php\node_modules\gulp-connect\node_modules\connect\no
de_modules\serve-static\node_modules\send\lib\send.js:378:26
    at FSReqWrap.oncomplete (fs.js:95:15)

Do you know what is causing this?

PS: I did get browserSync to work but my console is full of errors like the one above

from gulp-connect-php.

stefanKuijers avatar stefanKuijers commented on August 31, 2024

I found out that it has something to do with settings the root property of gulp-connect.
See: avevlad/gulp-connect#38

This answers the question I asked before.

Once again thank you for the idea of using middleware!

from gulp-connect-php.

grmartin avatar grmartin commented on August 31, 2024

For now, the formal response to this will be @louisremi's response found here: #2 (comment)

We may consider it as an option in the future, and we welcome patches for it both in terms of adding the support to the library and as documentation in the readme or an example gulpfile... but for now, this seems reasonable.

from gulp-connect-php.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.