CODEWITHSUNDEEP
wordpressgulpmampbrowser-sync
user4406203
user4406203

Reputation: 33

Gulp's browser-sync with MAMP, images are not loaded

I'm new with gulp and I hope I explain myself clearly.

I'm using gulp's browser-sync with MAMP to create a WordPress theme. When browser-sync is executed through gulp task, my WordPress site opens under localhost:3000/mytheme but without images because images are inside localhost:8888... What I'm doing wrong?

gulpfile.js is inside my theme folder: htdocs/wordpress/wp-content/themes/mytheme/gulpfile.js

MAMP settings,

Apache port: 8888 / Nginx port: 8888 / MySQL port: 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']);
});

Upvotes: 0

Views: 691

Answers (1)

user4406203
user4406203

Reputation: 33

Now I can run Mamp/Wordpress with Gulp and here is how I've done...

Firstly I setted up a vhost with Mamp. These tutorials explain well the steps.

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/

After setting up a virtual host, I could access to my local site via http://localhost/your-theme/ and http://my-theme.test/.

Next, I installed npm and gulp inside a WP theme folder (Node.js is installed globally) as I mentioned in my question. But I'm not sure if it's better to install these tools inside the htdocs folder or inside a WP theme folder. I did inside a theme folder because it seems easier for me.

To run the browser-sync, I used vhost url for proxy.

After this step, I could access to my site via http://localhost:3000/ with browser-sync.

To set up a vhost, I had to prepare a new WP environment with a new database inside Mamp. Once a site is opend via localhost:8888, I could not reopen via vhost url. The site is redirected to the localhost:8888 url.

Now I can access to my site (front page) via http://localhost:3000/, but once I go to another pages, my site is redirected to http://localhost/your-theme/another-page and not http://localhost:3000/another-page. That means I can't run browser-sync task outside the front page and I don't know what is the solution...

Upvotes: 0

Related Questions