Gulp-веб-приложение с BrowserSync и PHP

Моя главная цель здесь — адаптировать рабочий процесс разработки gulp-webapp Йомана для запуска PHP.

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

Я могу запустить PHP с Gulp, используя плагин 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'
  });
});

Тем не менее, я хотел бы воспользоваться отличной, но довольно запутанной архитектурой рабочего процесса разработки gulp-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/. Я бы предпочел иметь его во временной папке, потому что мне не нужен этот скомпилированный файл .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, но я не знаю, возможно ли это.


php sass gulp workflow browser-sync
person zok    schedule 16.01.2015    source источник
comment
Возможно ли это с помощью сценария маршрутизатора? php.net/manual/en/   -  person Leevi Graham    schedule 29.01.2015

Ответы (2)


arrow_upward
9
arrow_downward

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

Установите пакет http-proxy...

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

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

person TobyG    schedule 27.02.2015
comment
Можете ли вы заставить эту задачу Gulp работать с текущими версиями gulp-connect-php, BrowserSync и http-proxy? - person user1795832; 25.08.2015
comment
Мне также пришлось npm install gulp-connect --save-dev. Однако у меня это не работает, когда я просматриваю :9000 или 9001, я просто вижу индекс каталога корня (не app). Как вы определяете URL прокси? - person Richard; 14.09.2016

arrow_upward
-2
arrow_downward

FWIW, у меня есть довольно простое и справедливое решение для этого, поместив скомпилированный файл .css в папку app/root и переместив папку /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}}";'
      }
    }
  },
person zok    schedule 30.01.2015