Gulp-webapp running BrowserSync и PHP

Question

Моя основная цель здесь - адаптировать рабочий процесс Yeoman's gulp-webapp для запуска PHP.

В частности, я хочу, чтобы иметь возможность использовать gulp-php-connect с нескольких базовых каталогов (для скомпилированного CSS от Sass) и маршрутов (для Бауэр зависимостей), если это вообще возможно.

Я могу запустить PHP с Глотком помощью gulp-connect-php плагина, как это:

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

Однако я хотел бы воспользоваться отличной, но довольно запутанной архитектурой рабочего процесса развития Глотка-WebAPP, который полагается на BrowserSync, компилятор Sass (компилируется в .css-файл в .tmp-папку для разработки), авто-префикс и использует кучу других полезных плагинов.

Вот часть этого, что я хотел бы адаптировать для использования gulp-connect-php или любой другой 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 имеет опцию прокси, что позволяет запускать его с gulp-connect-php сервера, который является довольно удивительным , Но мне нужно gulp-connect-php использовать несколько базовых каталогов и маршрутов, например BrowserSync.

До сих пор я придумал это:

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

Чтобы временно зафиксировать несколько базовых каталогов вопроса, я подправил styles задачи так он хранит скомпилированный .css в /app вместо .tmp/. Я предпочел бы иметь его в папке temp, хотя, потому что мне не нужен этот скомпилированный файл .css, висящий там с моими файлами Sass.

Для маршрутов вопроса, я пытаюсь сказать wiredep плагину, чтобы изменить путь, скажем, от bower_components/jquery/dist/jquery.js до ../bower_components/jquery/dist/jquery.js, без успеха.

Все, что я мог сделать, это вручную переименовать пути в index.php, и он по-прежнему не работает. При запуске gulp serve я получаю:

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

... хотя я изменил путь в index.html к ../bower_components/jquery/dist/jquery.js.

Я считаю, что это не работает, потому что сервер gulp-connect-php не может видеть, что находится за пределами базовой папки.

Я пробую разные вещи, и хотя я был довольно расплывчатым в заголовке этой нити, я считаю, что самым чистым решением будет запуск нескольких базовых каталогов и маршрутов с помощью gulp-connect-php, но я не знаю, возможное.

Answer 1

FWIW У меня есть довольно простое и справедливое решение для этого, поместив скомпилированный файл .css в папку app/root и moving/bower_dependencies внутри папки app /.

Для Sass мне нужно изменить путь в заполнителе до <!-- build:css styles/main.css --> и изменить dest в задаче styles.

Для bower_components, я только что отредактировали bower_components в .bowerrc:

{ 
    "directory": "app/bower_components" 
} 

и добавил это к wiredep потока в gulpfile.js:

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

Answer 2

Я провел некоторое время, пытаясь решить эту проблему один из них, но теперь есть рабочее решение. То, как я решаемой должен был использовать BrowserSync в качестве сервера, и добавил, что промежуточное программное обеспечение прокси запросы, если они не совпадают узор ...

Установите пакет HTTP-прокси ...

$ npm install --save-dev http-proxy 

Добавьте пакет прокси в верхней части gulpfile.js ...

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

Добавить отдельный сервер PHP и прокси-сервер перед BrowserSync ...

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

    var proxy = httpProxy.createProxyServer({}); 

    // ... 

Затем добавьте к промежуточному для сервера, чтобы увидеть, если необходим проксированном запрос ...

 // ... 

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

     // ... 

А вот полные задачи для полноты ...

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

Надеются, что это спасает вас все время я проводил это! : o)