How to include custom/vendor scripts on gulp --production and avoid jshint errors

sage
1

Hi Sage Community

Whilst developing my latest website using Sage I stumbled upon the following challenge:

I needed to add a custom/vendor .js script that was not available using bower. After dumping the file in assets/scripts/ and running gulp --production I realised that this file was not being written to dist/scripts/.

After searching online I finally found the solution and thought I would post it here incase anyone else was experiencing the same issue.

Copy and paste your script in assets/scripts/

Example: assets/scripts/custom.js

Open up assets/manifest.json in your favourite text editor and add the following:

{
  "dependencies": {
    "main.js": {
      "files": [
        "scripts/main.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.less"
      ],
      "main": true
    },
    "editor-style.css": {
      "files": [
        "styles/editor-style.less"
      ]
    },
    "jquery.js": {
      "bower": ["jquery"]
    },
    "modernizr.js": {
      "bower": ["modernizr"]
    },
    "custom.js": {
      "vendor": ["assets/scripts/custom.js"]
    },
    "config": {
      "devUrl": "http://localhost/www.generositypays.org/cms/"
    }
  }
}

For clarity, I added these lines:

    "custom.js": {
      "vendor": ["assets/scripts/custom.js"]
    },

Include your custom script by adding the following code to lib/assets.php around line 125 after wp_enqueue_script(‘sage_js’, asset_path(‘scripts/main.js’), [], null, true);

wp_enqueue_script('custom', asset_path('scripts/custom.js'), [], null, true);

Now build by running the command gulp --production

You should now see you script in the dist/scripts/ directory.

Good luck! :smile:

10 Likes
2

For more detail on adding custom styles/scripts please see this post too:

3

I tried the same thing and i cannot see my custom script in “assets/scripts/jquery.flexslider.js” being included in head or footer. Am i missing something?

I added the following to assets/mainfest.json file :

    "jquery.flexslider.js": {
  "vendor": ["assets/scripts/jquery.flexslider.js"]
}

And added it in lib/assets.php as well like this:

  wp_enqueue_script('sage_js', asset_path('scripts/jquery.flexslider.js'), [], null, true);

After this i tried building the project with both gulp and gulp --production. I can get the file created in dist/scripts/jquery.flexslider.js. But why is it not being included in html? Please help…

4

You should name it something other than sage_js

5

Also some good help here:

Examples:

1 Like
6

Sorry to hijack this thread but I’m curious to see examples of how people are using this to concat plugin js and css into the main stylesheet and js file.

Is anyone using the asset-builder specifically to solve problems associated with the use of plugins and the tendency for plugins to load many css and js files in the head and footer? How do you handle plugin updates where these files may change? How are you preventing plugins from enqueuing their own scripts?

8

Hi @aitor, these instructions apply to Roots, not Sage as you are referring too. Sage has changed the way many things are done.

1 Like
9

This was really helpful. Thank you!

10

Reminder:
It works at lib/setup.php line 105 (in current Sage version)

wp_enqueue_script('custom', Assets\asset_path('scripts/custom.js'), [], null, true);

1 Like
11

I followed this advice but now it seems my live reload has broken and I think it has something to do with this. Has anyone else experience this problem?

12

Do you mean BrowserSync? LiveReload hasn’t been used since Roots 7.