Custom JavaScript in manifest.json and building out into a single file

sage
1

OK, so I’ve been trying to compile custom JS included in my main.js. After pulling my hair out a little, I found this thread: Sage Gulp Jshint - Trouble passing plugins.

Long story short, I’ve got my custom scripts getting pulled in via the vendor attribute under main.js in manifest.json. It does get compiled out into the main.js file but it’s right at the bottom of the file. My intended setup was the all the vendor scripts would be included first (basically as dependencies) and then the functions that fire these scripts (which are written into the scripts/main.js file) would then come afterwards.

Ultimately, I’m trying to keep everything in one file rather than have a separate dependencies/scripts file. Is this against the intended workflow?

2

The way you are envisioning is correct. The ordering is definitely supposed to be

  1. Bower packages
  2. Vendor packages
  3. First-party code

If it is getting compiled like:

  1. Bower packages
  2. First-party code
  3. Vendor packages

Something is not working properly.

What does your main.js dependency in manifest.json look like?

Open up an interactive node console (type node in project directory in CLI) and then run:

require('asset-builder')('./assets/manifest.json').globs.js

And lemme know what it spits out.

I added more tests to confirm https://github.com/austinpray/asset-builder/pull/30

3

Thanks for the reply.

My manifest file looks like this currently (I tried vendor before and after files in manifest.json):

{
  "dependencies": {
    "main.js": {
      "vendor": [
        "assets/scripts/vendor/slick.js"
      ],
      "files": [
        "scripts/main.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss"
      ],
      "main": true
    },
    "editor-style.css": {
      "files": [
        "styles/editor-style.scss"
      ]
    },
    "jquery.js": {
      "bower": ["jquery"]
    },
    "modernizr.js": {
      "bower": ["modernizr"]
    }
  },
  "config": {
    "devUrl": "http://xxxxxxx:8888"
  }
}

The output from node is:

[ { type: 'js',
    name: 'main.js',
    globs: 
     [ '/Bitbucket/ckd-2015/wp-content/themes/sage/bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/transition.js',
       '/Bitbucket/ckd-2015/wp-content/themes/sage/bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/alert.js',
       '/Bitbucket/ckd-2015/wp-content/themes/sage/bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/button.js',
       '/Bitbucket/ckd-2015/wp-content/themes/sage/bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/carousel.js',
       '/Bitbucket/ckd-2015/wp-content/themes/sage/bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/collapse.js',
       '/Bitbucket/ckd-2015/wp-content/themes/sage/bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/dropdown.js',
       '/Bitbucket/ckd-2015/wp-content/themes/sage/bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/modal.js',
       '/Bitbucket/ckd-2015/wp-content/themes/sage/bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/tooltip.js',
       '/Bitbucket/ckd-2015/wp-content/themes/sage/bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/popover.js',
       '/Bitbucket/ckd-2015/wp-content/themes/sage/bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/scrollspy.js',
       '/Bitbucket/ckd-2015/wp-content/themes/sage/bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/tab.js',
       '/Bitbucket/ckd-2015/wp-content/themes/sage/bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/affix.js',
       'assets/scripts/vendor/slick.js',
       'assets/scripts/main.js' ] },
  { type: 'js',
    name: 'jquery.js',
    globs: [ '/Bitbucket/ckd-2015/wp-content/themes/sage/bower_components/jquery/dist/jquery.js' ] },
  { type: 'js',
    name: 'modernizr.js',
    globs: [ '/Bitbucket/ckd-2015/wp-content/themes/sage/bower_components/modernizr/modernizr.js' ] } ]

You’ll see there’s slick.js which I’ve added in manifest.json between the bootstrap and main.js files, which is the correct order.

I’ve just double checked my main.js file that gets output and it’s definitely in the order I described in my OP i.e. wrong. This obviously wont mean too much but the final main.js file is here: http://pastebin.com/yRVSqkmX. The main thing is you can see the Slick (slick.js) references all towards the end of the file if you do a find for slick.

Thanks.

4

I recognize the bottom of that pastebin as the UTIL object at the bottom of the stock main.js file. I don’t think it’s out of order.

Why don’t you comment out uglify in the gulpfile.jsand verify that anything is out of order.

5

I just ran this through a beautifier and it looks fine: https://gist.github.com/a1a570c49c679744fd5b

1 Like
6

OK, totally my bad.

I’ve included some additional JS files and everything worked as intended. Running it through the beautifier or commenting out uglify would certainly have been clever things to do!

Thanks for the help guys, big fan of Sage. This is actually a project I’m porting over from Roots to Sage to keep up with ongoing development. Learning a lot :smile:

1 Like
7

:sunglasses:

post must be 20 characters

8

Possibly related: https://github.com/roots/sage/pull/1485