运行 BrowserSync 和 PHP 的 Gulp-webapp

2022-01-12 00:00:00 workflow php sass gulp browser-sync

我的主要目标是调整 Yeoman 的 gulp-webapp 开发工作流程来运行 PHP.

My main goal here is to adapt Yeoman's gulp-webapp development workflow to run PHP.

具体来说，我希望能够将 gulp-php-connect 与 多个基本目录(用于从 Sass 编译的 CSS)和 路由 一起使用strong>(对于 Bower 依赖项)，如果可能的话.

Specifically, I want to be able to use gulp-php-connect with multiple base directories (for the compiled CSS from Sass) and routes (for Bower dependencies), if that's even possible.

我可以使用 gulp-connect-php 插件通过 Gulp 运行 PHP，例如这个:

I'm able to run PHP with Gulp using the gulp-connect-php plugin, like this:

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 文件夹中，用于开发)、自动前缀，并使用了许多其他有用的插件.

However, I'd like to take advantage of gulp-webapp's excellent but quite entangled development workflow architecture, which relies on BrowserSync, Sass compiler (compiles to a .css file into a .tmp folder, for development), auto-prefixer, and uses a bunch of other useful plugins.

这是我想适应使用 gulp-connect-php 或任何其他 PHP 的部分:

Here's the part of it that I would like to adapt to use gulp-connect-php or any other 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 会.

BrowserSync has a proxy option, that allows me to run it with gulp-connect-php server, which is pretty amazing. But I need gulp-connect-php it to use multiple base directories and routes, like BrowserSync does.

到目前为止，我想出了这个:

So far I've come up with this:

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 文件一起挂在那里.

To temporarily fix the multiple base directories issue, I tweaked the styles task so it stores the compiled .css to /app instead of .tmp/. I'd prefer to have it on a temp folder though, because I don't need that compiled .css file hanging around there with my Sass files.

对于 routes 问题，我试图告诉 wiredep 插件更改路径，例如，从 bower_components/jquery/dist/jquery.js 到 ../bower_components/jquery/dist/jquery.js，没有成功.

For the routes issue, I'm trying to tell wiredep plugin to change a path, say, from bower_components/jquery/dist/jquery.js to ../bower_components/jquery/dist/jquery.js, with no success.

我所能做的就是手动重命名 index.php 中的路径，但它仍然不起作用.当运行 gulp serve 我得到:

All I could do was manually rename the paths in index.php, and it still doesn't work. When running gulp serve I get:

/bower_components/jquery/dist/modernizr.js - 没有这样的文件或目录

...即使我将 index.html 中的路径更改为 ../bower_components/jquery/dist/jquery.js.

...even though I changed the path in index.html to ../bower_components/jquery/dist/jquery.js.

我认为这不起作用，因为 gulp-connect-php 服务器无法看到基本文件夹之外的内容.

I believe that doesn't work because the gulp-connect-php server can't see what's outside the base folder.

我正在尝试不同的事情，虽然我对这个线程的标题非常模糊，但我认为最干净的解决方案是使用 gulp-connect-php，但我不知道这是否可能.

I'm trying different things, and though I've been pretty vague on this thread's title, I think that the cleanest solution would be to run multiple base directories and routes with gulp-connect-php, but I don't know if that's possible.

推荐答案

FWIW，我有一个非常简单和公平的解决方案，将编译后的 .css 文件放在 app/根目录中，并将/bower_dependencies 文件夹移动到应用程序/文件夹.

FWIW, I've got a quite simple and fair solution for that by placing the compiled .css file in the app/ root and moving /bower_dependencies folder inside the app/ folder.

对于 Sass，我只需要将占位符中的路径更改为 并更改 deststyles 任务中的 code>.

For Sass, I only needed to change the path in the placeholder to <!-- build:css styles/main.css --> and change the dest in the styles task.

对于 bower_components，我只是在 .bowerrc 中编辑了 bower_components:

For the bower_components, I just edited bower_components in .bowerrc:

{
  "directory": "app/bower_components"
}

并将其添加到 gulpfile.js 中的 wiredep 流中:

and added this to the wiredep stream in gulpfile.js:

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

相关文章