0

After following this tutorial on CSS-Tricks https://css-tricks.com/gulp-for-wordpress-creating-the-tasks/, everything worked like a charm excepted the browser reload when I change a file:

Reloading Browsers... stuck

It seems stuck at Reloading Browsers. I'm aware of all the different responses about this problem, but none of them solved my issue. So I'm thinking that it might be related to MAMP and its local server configuration?

Here is the code of my Gulp configuration. For information I also tried to set up a stream as explained in the tutorial but the problem is the same.

import webpack from 'webpack-stream';
import named from 'vinyl-named';
import browserSync from "browser-sync";
import {src, dest, watch, series, parallel} from 'gulp';
import del from 'del';
import postcss from 'gulp-postcss';
import sourcemaps from 'gulp-sourcemaps';
import autoprefixer from 'autoprefixer';
import yargs from 'yargs';
import sass from 'gulp-sass';
import cleanCss from 'gulp-clean-css';
import gulpif from 'gulp-if';
import imagemin from 'gulp-imagemin';

const PRODUCTION = yargs.argv.prod;

export const serve = done => {
    server.init({
        port: 8181,
        proxy: "https://verbier:8890/",
        reloadOnRestart: true

    });
    done();
};

export const reload = done => {
    server.reload()
    done();
};


export const clean = () => del(['dist']);


export const styles = () => {
    return src(['assets/scss/bundle.scss', 'assets/scss/admin-style.scss'])
        .pipe(gulpif(!PRODUCTION, sourcemaps.init()))
        .pipe(sass().on('error', sass.logError))
        .pipe(gulpif(PRODUCTION, postcss([ autoprefixer ])))
        .pipe(gulpif(PRODUCTION, cleanCss({compatibility:'ie8'})))
        .pipe(gulpif(!PRODUCTION, sourcemaps.write()))
        .pipe(dest('dist/css'))
}





export const watchForChanges = () => {
    watch('assets/scss/**/*.scss',  series(styles, reload));
    watch('assets/images/!**!/!*.{jpg,jpeg,png,svg,gif}', series(images, reload));
    watch(['assets/!**!/!*','!src/{images,js,scss}','!src/{images,js,scss}/!**!/!*'], series(copy, reload));
    watch('assets/js/!**!/!*.js', series(scripts, reload));
    watch("**/*.php", reload);
}

export const images = () => {
    return src('assets/images/!**!/!*.{jpg,jpeg,png,svg,gif}')
        .pipe(gulpif(PRODUCTION, imagemin()))
        .pipe(dest('dist/images'));
}

export const copy = () => {
    return src(['assets/!**!/!*', '!assets/{images,js,scss}', '!assets/{images,js,scss}/!**/!*'])
        .pipe(dest('dist'));
}


export const scripts = () => {
    return src(['assets/js/bundle.js', 'assets/js/admin-style.js'])
        .pipe(named())
        .pipe(webpack({
            module: {
                rules: [
                    {
                        test: /\.js$/,
                        use: {
                            loader: 'babel-loader',
                            options: {
                                presets: ['@babel/preset-env']
                            }
                        }
                    }
                ]
            },
            mode: PRODUCTION ? 'production' : 'development',
            devtool: !PRODUCTION ? 'inline-source-map' : false,
            output: {
                filename: '[name].js'
            },
            externals: {
                jquery: 'jQuery'
            },
        }))
        .pipe(dest('dist/js'));
}

const server = browserSync.create();

export const dev = series(clean, parallel(styles, images, copy, scripts), serve, watchForChanges);

export const build = series(clean, parallel(styles, images, copy, scripts));

export default dev;


Thanks you for reading!

1 Answer 1

0

If someone else has this issue, I switched to Local instead of Mamp Pro and the problem was "solved".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.