Question

我是新来的人，希望我能清楚地说明自己。

我正在使用gulp的浏览器与MAMP同步来创建WordPress主题。当通过gulp任务执行浏览器同步时，我的WordPress网站在localhost：3000 / mytheme下打开，但没有图像，因为图像在localhost：8888内部...我在做什么错了？

gulpfile.js位于我的主题文件夹中： htdocs / wordpress / wp-content / themes / mytheme / gulpfile.js

MAMP设置

Apache端口：8888 / Nginx端口：8888 / MySQL端口：8889

gulpfile.js

var gulp = require('gulp'),
watch = require('gulp-watch'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import'),
browserSync = require('browser-sync').create();

gulp.task('style', function(){
  return gulp.src('./modules/style/style.css')
    .pipe(postcss([cssImport, cssvars, nested, autoprefixer]))
    .pipe(gulp.dest('./'));
});

gulp.task('browser-sync', function () {
    var files = [
         './*.php',
         './style.css'
    ];

    browserSync.init(files, {
        proxy: "localhost:8888/my-theme",
    });
});

gulp.task('watch', function(){

    watch('./modules/style/**/*.css', function(){
        gulp.start('style');
    });

});

gulp.task('default', ['style', 'browser-sync', 'watch'], function(){
    gulp.watch('./modules/style/**//**.css', ['watch']);
});

Answer 1

现在我可以使用Gulp运行Mamp / Wordpress，这是我的工作方式...

首先，我用Mamp设置了一个虚拟主机。这些教程很好地解释了步骤。

http://www.dennisdeacon.com/web-design/virtual-hosts-for-mamp-based-local-web-development-on-macos-sierra/

https://www.taniarascia.com/setting-up-virtual-hosts/

设置虚拟主机后，我可以通过http://localhost/your-theme/和http://my-theme.test/访问本地站点。

接下来，我在问题中提到了将npm和gulp安装在WP主题文件夹（Node.js已全局安装）中的问题。但是我不确定将这些工具安装在htdocs文件夹中还是WP主题文件夹中是否更好。我在主题文件夹中进行操作，因为它对我来说似乎更容易。

要运行浏览器同步，我使用vhost url作为代理。

完成此步骤后，我可以使用浏览器同步通过http://localhost:3000/访问我的网站。

要设置虚拟主机，我必须使用Mamp内的新数据库准备一个新的WP环境。通过localhost：8888打开站点后，无法通过vhost url重新打开。该站点被重定向到localhost：8888 url。

现在，我可以通过http://localhost:3000/访问我的网站（首页），但是一旦我转到其他页面，我的网站将重定向到http://localhost/your-theme/another-page而不是http://localhost:3000/another-page。这意味着我无法在首页之外运行浏览器同步任务，而且我不知道解决方案...

Gulp的浏览器与MAMP同步，未加载图像

1 个答案: