Separating out custom javascript in Sage

sage
2

You could do something like this:

{
  "dependencies": {
    "about.js": {
      "files": [
        "assets/scripts/filters.js",
        "bower_components/lib-for-about-only/dist/lib-for-about-only.js"
      ]
    },
    "main.js": {
      "files": [
        "scripts/main.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss"
      ],
      "main": true
    },
    "customizer.js": {
      "files": [
        "scripts/customizer.js"
      ]
    },
    "jquery.js": {
      "bower": ["jquery"]
    }
  },
  "config": {
    "devUrl": "http://example.dev"
  }
}

Couple things to note: the source dir of the new file is the theme root and not assets/ like the existing manifest, so you’ll need to account for that in your source paths. Also, libraries you install via Bower must be included manually (otherwise they won’t be built into your main.js).

Helpful debugging tip: Sage: Wiredep & SASS Framework

1 Like