#Live reload mamp wordpress how to
#Live reload mamp wordpress install
#Live reload mamp wordpress software

First, we’ll create the tasks for Grunt to perform when the BrowserSync task runs. Just a few more lines of code to add into our Gruntfile.js. Pretty painless so far, and we’re almost done. In my case I’m also using grunt-contrib-sass to compile my SASS, and grunt-contrib-uglify to minify my JS, and grunt-contrib-watch to watch my SCSS files for changes and run the SASS compiling task. The next step will be to open your Gruntfile.js file and load the BrowserSync tasks using: grunt.loadNpmTasks('grunt-browser-sync') So once that runs you’ll have BrowserSync installed in your theme’s directory.

#Live reload mamp wordpress install

Not only will this install locally, but it will automatically be added to the devDependencies section, using a tilde version range. Why –save-dev at the end? Let’s let Grunt explain. So within a terminal window you’ll need to navigate to your theme folder and run the command: npm install grunt-browser-sync -save-dev Then we’ll want to install BrowserSync in our theme directory.

First you’ll need to get node.js and Grunt setup on your project if you don’t have it already.

No refresh necessary. Best of all the lovely folks over at JH maintain it and offer it up for free. Using Grunt and BrowserSync together you can make a change to an SCSS file, have your new CSS compiled, and see that change instantly across multiple devices. To install WordPress as quickly as possible, look for a web hosting provider that can perform the installation for.

#Live reload mamp wordpress how to

Enter BrowserSyncīrowserSync is a tool that allows you to sync websites across multiple devices and view changes made in real-time. How to Install WordPress With Auto Installer. I’d recommend checking out Grunt’s Getting Started guide.

#Live reload mamp wordpress software

If you’re not familiar with Grunt, you’ll need some basic knowledge for this walkthrough. However, Its really good to build a website locally for speedy development using software like XAMPP, WAMP (for Windows) or MAMP (for Mac). As mentioned earlier I’m running a Vagrant dev environment and using Grunt to compile my SASS, minify my JS, and concatenate files. And the network throttling sounded like a nice addition.įirst a little about my current dev setup. The bit about BrowserSync got me itching to fix my own automated reloading with the bonus of browser syncing. Download the existing WordPress site files from the LIVE site (either FTP or SSH) to a local folder on OSX (e.g. In my constant search of increasing productivity I came across Totally Tooling Tips video on Productivity Apps. I also checked out the Live Reload Chrome extension, but that did a complete page refresh for a minor CSS change. It was buggy and called for extra scripts being added into the site. Whatever, I was never that impressed with my old setup. So we’ll head into our functions.php in WordPress (or wherever you queue up your js) and add the script. This JS file comes with the watch package we installed earlier. One of the fallbacks of this switch, however, was my grunt live reload quit working. Queueing up the Livereload JS File Our final step is to call the livereload js file in order to kick things off. I recently switched my dev environment from using MAMP to Vagrant.