I've moved my front-end workflow over to Gulp and am having a wicked time when developing static sites. I currently use BrowserSync, which spins up a server and reloads my page every time a change is detected – it's wonderful.
I was wondering if there is way to do this with WordPress when using MAMP? With MAMP PRO obviously using its own servers, is there a way I can tell my gulpfile.js to use BrowserSync while I'm running a WordPress site locally?
Hope that makes sense. Any help is appreciated. Thanks in advance!
I had to somewhat solve this issue for the company where I work.
The result of that work can be found here: https://github.com/MozaikAgency/wp-theme-bootstrap Feel free to browse, use and contribute :)
Note: The following does not specifically refer to MAMP because if you have node and gulp installed on your system it will work irrespective of where the site itself is being hosted/running from. The server running WordPress and the server that browser-sync will spin up are separate and unrelated. For reference we use this alongside XAMP at work to develop our WP themes
Specifically we wanted to have a development environment with all the bells and whistles (and that definitely includes browser-sync), but have a built theme that was clean from development cruft (browser-sync snippets, gulpfile.js etc).
The idea is, you would write only in the dev theme, let's say wp-contents/themes/example-theme_dev, and gulp would handle everything it needs to do, to generate the built theme, into let's say wp-content/themes/example-theme.
Note: This is not a tutorial, just an overview of some things that should be happening to get browser-sync to work with a WordPress setup. You can check out the repo itself to see the full way we tied everything together.
Browser-Sync Implementation
Since we are anyway moving files over from the "dev theme" to the "built theme" we get a chance to transform those files before shifting them over.
During dev mode (default gulp task), one of the transformations will specifically inject the following snippet into the bottom of your theme's functions.php
/**
* DEVELOPMENT MODE ONLY
*
* Browser-sync script loader
* to enable script/style injection
*
*/
add_action( 'wp_head', function () { ?>
<script type="text/javascript" id="__bs_script__">//<![CDATA[
document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js'><\/script>".replace("HOST", location.hostname));
//]]></script>
<?php }, 999);
This action will print out a script into your theme's head to link up to the browser-sync server and will handle all page refresh/injections your build process throws at it.
The actual server that this script points to is booted when you run the following gulp task (also called with the default gulp task):
var browserSync = require('browser-sync');
/**
* Spin up the browser-sync
* socket server to listen for
* and push code changes to the
* browser
*
*/
module.exports = function (done) {
browserSync({
logSnippet: false,
server: false,
open: false,
reloadDelay: 100,
reloadDebounce: 100
});
done();
};
So, you have your browser-sync server up and running and your theme can now update automatically using the script snippet, now all that is left is telling browser-sync what it should update and when.
For this, I found that the best way to approach it was to explicitly tell browser-sync to update right after any transforming gulp tasks, like sass to css processing, were done running. Mostly you just need to add the following to the end of your gulp tasks:
.on('end', browserSync.reload);
where browserSync is simply:
var browserSync = require('browser-sync');
Wrap up
This answer covers the basics you'll need to get browser-sync into your WP workflow. You can check out the wp-theme-bootstrap repo where we put all of this together to see the entire picture of how it works and try it out for yourselves, if you are interested.
We've been using this successfully now at the company for a while now. Hope you find it useful and if you have any suggestions feel free to chime in.
Related
I am relatively new to Wordpress.
I have two instances of Wordpress - one running on a server in prod, and the other the same exact copy that I've downloaded from the server, but running locally.
A problem I'm trying to figure out is - the one on the server is loading all the necessary JS files within the theme. However, my local running instance is only loading JS files outside the theme.
In addition, I've noticed in my local running instance - there's a no-js class added to the <html> tag, whereas this is missing in the prod instance. This leads me to believe there must be some sort of switch on the theme itself, or somewhere in the wordpress admin panel that enables or disables JS.
For some context, I'm using the minimal minimum theme: https://wordpress.org/themes/minimum-minimal/
I found out what was preventing the JS from loading - I forgot to include <?php wp_footer(); ?>
within the footer - which loads in all the remaining necessary JS, in particular if they've been imported with via wp_enqueue_script with in_footer arg set to true
The plugin I'm unit testing with phpunit has a dependency on another plugin, using is_plugin_active().
When testing the dependency in my unit test that function always returns false/inactive, when the it is definitely active, because it's working properly in the plugin itself. It seems to be accessible, so there must be some logic error when it comes to this wordpress core function.
This is my code:
function test_requirementsMet_true() {
$this->assertTrue(is_plugin_active('pluginFolder/plugin.php'));
}
Does anyone know of a work-around?
Assuming you scaffolded your tests with WP-CLI, you should know the plugin is loaded as an mu-plugin rather than a vanilla plugin, which means:
Only plugins installed in the plugins/ folder can be active.
Plugins in the mu-plugins/ folder can’t be "activated," so this
function will return false for those plugins.
I'm a backend developer messing with a f/e app for a short while and I'm using grunt to watch-livereload my changes.
What is confusing to me is that, to make the livereload work, I have added a script tag to my index.html
<script src="//localhost:35729/livereload.js"></script>
But I don't really want that script to go into my production, I'm guessing no one want's that either.. how are people dealing with this?
Should I remove the tag from the page manually before I build every time?
It doesn't look like a great way to go about it, seeing as how grunt is all about automating tasks.. is there a way to automate this task too?
All I want is to remove the script before publishing for release.
I'm using a simple angular.js app if that matters.
thank you
You can use grunt-dom-munger to process the index.html on the build grunt task that you use for deployment.
Your script include in index.html will look like this:
<script src="http://localhost:35729/livereload.js" data-remove="true"></script>
and in the grunt file you will have (in the dom_munger section):
update: {
options: {
remove: ['script[data-remove!="false"]', 'link[data-remove!="false"]']
}
}
This way you will have full control over your index.html before deploying it, just read the docs on don-munger.
Im trying to adopt JSPM as my package manager for Wordpress development but im failing at loading the main app file.
This is usually done with
<script>
System.import('./app');
</script>
The problem im running into is that jspm fails to load this file, trying to load in context of the current browser path http://localhost:3000/shop/app.js instead of the file system context.
I've tried to adjust some of the jspm's configuration options but couldn't get it to work.
Can you point in the right direction here?
When running on file:/// URLs, you need to set your baseURL to the current path. This can be done with:
System.config({ baseURL: '.' });
Either in your configuration file or in the page itself. Note that when you load pages on different path levels, this baseURL path needs to be adjusted so it may be advisable to specify it in the page itself.
I am using Meteor 1.0.2.1 and iron:router 1.0.7. I have managed to set up a route for '/' which works fine locally however when I deploy on meteor I get the iron:router splash.
Here is my route:
Router.route('/', {name: 'landing.index'});
and I have a controller called LandingIndex and a template called LandingIndex as well.
Any help is greatly appreciated.
edit:
The controllers looks as follows:
LandingIndexController = RouteController.extend({
waitOn: function () {
},
data: function () {
},
action: function () {
this.render();
}
});
In my case I had duplicate templates. A quick look at the console pointed out the problem.
Are you by any chance using Twitter Bootstrap? I ran into this same problem today, non-reproducible on localhost as well. After way too many hours of trying to reproduce this on a remote env with meteor deploy xxxxx.meteor.com, I figured out that it was because of a file contained within Twitter Bootstrap. If you straight up download the .zip file of bootstrap and indiscriminately copy its 3 directories into your project (css/ fonts/ js/), js/npm.js will be copied along with it.
I think js/npm.js is only needed during the build process with Grunt, so I just deleted it. It solved the issue for me, although I'm not sure why...
For me the problem was some files that came from another branch and stayed "untracked" in Git, so I overlook them.
But it looks like mup deploys everything, so it deployed this incorrect files too. In addition to that, Iron Router must be catching exceptions from other stuff, so it showed its splash page.
Just removed the untracked files and the problem was solved with another deploy!