Gulp браузер-синхронизация с MAMP, изображения не загружаются - PullRequest
0 голосов
/ 23 ноября 2018

Я новичок в gulp и надеюсь, что объясню все ясно.

Я использую браузерную синхронизацию gulp с MAMP для создания темы WordPress.Когда синхронизация через браузер выполняется с помощью задачи gulp, мой сайт WordPress открывается под localhost: 3000 / mytheme, но без изображений, поскольку изображения находятся внутри localhost: 8888 ... Что я делаю не так? *

gulpfile.js isвнутри моей темы: 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']);
});

1 Ответ

0 голосов
/ 08 декабря 2018

Теперь я могу запустить Mamp / Wordpress с Gulp, и вот как я это сделал ...

Во-первых, я создал Vhost с 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/ с синхронизацией с браузером.

Чтобы настроить vhost, мне пришлось подготовить новую среду WP с новой базой данных внутри Mamp.Когда сайт открыт через localhost: 8888, я не могу открыть его через vhost url.Сайт перенаправлен на localhost: 8888 URL.

Теперь я могу получить доступ к своему сайту (первой странице) через http://localhost:3000/,, но как только я перехожу на другие страницы, мой сайт перенаправляется на http://localhost/your-theme/another-page, а не http://localhost:3000/another-page. Это означает, что я не могу запустить задачу синхронизации браузера за пределами главной страницы, и я не знаю, каково решение ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...