Gulp-webapp работает под управлением BrowserSync и PHP

моя главная цель здесь-адаптировать Йомена залпом-веб-приложение рабочий процесс разработки для запуска 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 compiler (компилируется в a .css файл в .папка tmp, для развития), авто-prefixer, и использует кучу других полезных плагинов.

вот часть его, которую я хотел бы адаптировать к использованию 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 сервер, который является довольно удивительный. Но мне нужно ... --4--> это использовать несколько базовых каталогов и маршрутов, как 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 to /app вместо .tmp/. Я бы предпочел иметь его в папке temp, потому что мне не нужно это компилировать .css-файл висит там с моей Sass файлы.

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

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

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

...несмотря на то, что я изменил путь в индексе.HTML-код ../bower_components/jquery/dist/jquery.js.

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

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

7
browser-sync gulp php sass workflow

2 ответов

Я потратил некоторое время, пытаясь разобраться в этом, но теперь у меня есть рабочее решение. Я решил использовать 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']);
});

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

9

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

для 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}}";'
      }
    }
  },
-2