Since JointsWP added Gulp, two of the most requested features have been the integration of Browsersync and Source Maps – I’m happy to say these have been added to the newest version of JointsWP that was released today.
For those unfamiliar with these two tools, here’s a brief overview.
If you’re familiar with Gulp, you’re probably familiar with
watch tasks – Browsersync takes
watch tasks to the next level.
The GIF below shows a change being made to the settings.scss file, which is then compiled and automatically injected into Chrome (left) and Firefox (right).
Getting started with Browsersync is extremely easy. Simply open up your
gulpefile.js and look for the Browsersync task (it’s near the bottom). Update the “proxy” URL so it matches the URL of your local development enviroment. Now run
gulp browsersync from your terminal and enjoy!
Concatenating and minifying files is great for performance, however, it becomes a real headache when trying to debug issues as it’s no longer easy to tell which file is causing the issue – this is where Source Maps come into play. Source maps allow you to “map” your minified files back to their original, pre-minified state. So when you open up Developer Tools, instead of seeing the minified files, you will see the original source files.
Note: Source maps are only created for minified JS and CSS files. Be sure you’re enqueuing the minified files if you want to use source maps.
Questions, comments or concerns? Let’s chat in the comments.