How and where to include custom JS only for specific pages

sage
1

Hi, im trying to understand where to put my custom JS in sage.
As far as i know there is the option to just edit the main.js after this line

})(jQuery); // Fully reference jQuery after this point.

And i read about how to compile different scripts with the asset-builder
like it is described here

But im still not sure what would be the best workflow to use own scripts and how to decide on what pages those scrips are running.

Maybe i don’t want to load my “onclick-foo” script on the template-A.php file but not on the template-B file.

How and where would i include my “cusomt.js” file which holds all my global scrips?

And a last one: Does this screencast also apply to the sage workflow?

Thank you!

2

To load different assets on different pages, you use conditional tags in lib/assets.php for enqueueing.

To create additional JS files, see https://github.com/austinpray/asset-builder/tree/master/help

(This is also covered in the screencast)

Yes, the screencast uses Sage

3 
// Fully reference jQuery after this point.

This means that from that point onwards you need to use the full reference for jQuery - jQuery('.selector') instead of using its shortcut - $('.selector').

4

Or do dis

(function ($) {
  $('.selector').text('you can use the `$` like normal in here');
  $('.button').on('click', function () { 
    alert('yee'); 
  });
})(jQuery);
1 Like
5

Hello I watched your screencast and it is very helpful! But I still have some questions.

  • What ist the difference between the gulp and the gulp --production
    command?
  • When I upload my theme – what are the necessary files? As far as i understood the /dist/ folder ist for distribution – does this imply that the assets folder is just for my developing setup? What about the /bower_components/ and the /node_modules/?
  • embedding custom scripts with conditional tags is working fine! But is it possible that the gulp watch command is not “watching” or updating those custom scripts? I had the impression that it started to take effect after running the gulp command.

Thank you!

6

The dist/ folder is what you need to upload. Do not upload node_modules or bower_components. Those combined with the assets folder are used to build the dist/ folder. The dist/ folder can be treated like a binary.

Not following, what do you mean custom scripts?

7

Hi!
So basically upload everything but bower_components/ and node_modules/ – if i get this right?! Thats what i thought.

I’m sorry that am being a little slow on that, but i still don’t understand the difference for the --production flag. When am i suppose to use it?

Regarding the custom scripts i was talking about scripts that i inserted in the manifest.json file and enqueue them in the assets.php (as shown in the screencast by benworld). They seem to be only compiled and updated to the /dist/ folder when i use the gulp not the gulp watch command. I was wondering if i could automate this as well.

8

–production disables sourcemaps so before you upload code to production server you should run this

9

@ben and I are out and about right now but I’ve made a note to circle back and verify this

1 Like
10

Should have been fixed with these commits by @kalenjohnson:

/cc @austin