sass — Gulp-webapp работает с BrowserSync и переполнением стека

Моя главная цель здесь состоит в том, чтобы адаптировать Глоток-WebApp рабочий процесс разработки для запуска PHP.

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

Я могу запустить PHP с Gulp, используя проглатывать-подключения-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'
});
});

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

7

Решение

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

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

9

Другие решения

Кстати, у меня есть довольно простое и справедливое решение для этого, поместив скомпилированный файл .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}}";'
}
}
},
-2