0

I'm just starting with learning wordpress and wondering if there's a way if I can have my page in the browser (on a localhost using WAMP) automatically update after I make updates to the theme's code and save them using a text editor or if I will have to re-zip and re-upload every time I want to view the changes I'm making.

Any help would be awesome, thanks!

2
  • 1
    How are you making the changes? If you have an install on WAMP, just edit the code in place and refresh the page.
    – s_ha_dum
    Dec 29, 2015 at 0:44
  • Uploading the files will only replace the files with themselves, it's a none-operation
    – Tom J Nowell
    Dec 29, 2015 at 1:49

1 Answer 1

2

Use Gulp + Gulp-Watch + BrowserSync.

The goal is to run an extra process that monitors any changes in your files. When a change occurs the page is automatically reloaded including CSS injection / Scrolls / Browser clicks and all concurrently across multiple devices and browsers. Because it also generates an ip:port you can access the link from other devices in your network.

This gulpfile.js task is based on the roots.io - Sage theme.


var $           = require('gulp-load-plugins')();
var gulp        = require('gulp');
var browserSync = require('browser-sync');

gulp.task('watch-local.dev', function() { 
  init_watch ( false, 3001, { target: 'http://local.dev' } ); 
});

This breakout function allows you to create tasks per environment including; MAMP, WAMP, Docker and Vagrant & toggle http / https individually. Note: local.dev is a byproduct of Vagrant Host Manager.

function init_watch (https, port, proxy) {

    var defaults = {
        port: 3001,
        https: true,
        proxy: config.devUrl // { target: 'http://your-expected-site-name.com' }
    };

    if( typeof https !== 'boolean') { https = defaults.https; }
    if( typeof port !== 'number') { port = defaults.port; }
    if( typeof proxy === 'string') { proxy = { target: proxy }; } // fix the format if only target is passed
    if( typeof proxy !== 'object') { proxy = defaults.proxy; }

    browserSync({
        proxy: proxy,
        https: https,
        port: port,
        snippetOptions: {
            whitelist: ['/wp-admin/admin-ajax.php'],
            blacklist: ['/wp-admin/**']
        }
    });

    gulp.watch([path.source + 'styles/**/*'], ['styles']);
    gulp.watch([path.source + 'scripts/**/*'], ['jshint', 'scripts']);
    gulp.watch([path.source + 'fonts/**/*'], ['fonts']);
    gulp.watch([path.source + 'images/**/*'], ['images']);
    gulp.watch(['bower.json', 'assets/manifest.json'], ['build']);
    gulp.watch('**/*.php', function() {
        browserSync.reload();
    });
}

To execute this task you'll need to run the following command. There are also ways to initiate the gulp task from an IDE including; PHPStorm / WebStorm, Atom.io and Sublime.

gulp watch-local.dev

It's worth mentioning that the proxy generally works well unless you're browsing the admin portion of your site.

You'll also need Node.js and the npm command-line tool is bundled with it.

If you need to deploy the content you can add a task to FTP files on change.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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