Break Boostrap into multiple files

sage
1

Does anyone feel like explaining how to set bower.json and assets/mainfest.json to break various elements of bootstrap (or any other component) into multiple files. I have:

assets/mainfest.json:

{
  "dependencies": {
    "main.js": {
      "files": [
        "scripts/main.js"
      ],
      "main": true
    },
    "mz_filtertable.js": {
    "files": [
        "scripts/jquery.filtertable.mz.js"
      ],
      "main": true
    },
    "ajax-mbo-add-to-classes.js": {
    "files": [
        "scripts/ajax-mbo-add-to-classes.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss"
      ],
      "main": true
    },
    "admin-style.css": {
      "files": [
        "styles/admin-style.scss"
      ]
    },
    "modernizr.js": {
      "bower": ["modernizr"]
    },
  "config": {
    "devUrl": "http://some.localhost"
      }
  }
}

bower.json:

{
  "name": "mz-mindbody-api",
  "version": "2.0",
  "authors": [
    "Mike iLL Kilmer <mike@mzoo.org>"
  ],
  "description": "Wordpress MBO API Integration Plugin.",
  "keywords": [
    "mindbody",
    "wordpress",
    "api"
  ],
  "license": "MIT",
  "homepage": "www.mZoo.org",
  "dependencies": {
    "bootstrap-sass-official": "~3.3.4",
    "modernizr": "~2.8.3",
    "font-awesome": "~4.3.0"
  },
  "ignore": [
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "overrides": {
    "modernizr": {
      "main": "./modernizr.js"
    },
    "bootstrap-sass-official": {
      "main": [
            "./assets/stylesheets/bootstrap/mixins/_clearfix.scss",
            "./assets/stylesheets/bootstrap/mixins/_grid-framework.scss",
            "./assets/stylesheets/bootstrap/mixins/_vendor-prefixes.scss",
            "./assets/stylesheets/bootstrap/_variables.scss",
        "./assets/stylesheets/bootstrap/mixins/_grid.scss",
        "./assets/stylesheets/bootstrap/mixins/_image.scss",
          "./assets/stylesheets/bootstrap/_grid.scss",
          "./assets/stylesheets/bootstrap/_thumbnails.scss",
            "./assets/stylesheets/bootstrap/mixins/_buttons.scss",
            "./assets/stylesheets/bootstrap/mixins/_clearfix.scss",
            "./assets/stylesheets/bootstrap/mixins/_opacity.scss",
        "./assets/stylesheets/bootstrap/_close.scss",
            "./assets/stylesheets/bootstrap/mixins/_tab-focus.scss",
            "./assets/stylesheets/bootstrap/mixins/_table-row.scss",
            "./assets/stylesheets/bootstrap/mixins/_vendor-prefixes.scss",
            "./assets/stylesheets/bootstrap/_buttons.scss",
            "./assets/stylesheets/bootstrap/_modals.scss",
            "./assets/stylesheets/bootstrap/_tables.scss",
        "./assets/javascripts/bootstrap/button.js",
        "./assets/javascripts/bootstrap/modal.js"
      ]
    },
    "font-awesome": {
      "main": [
        "scss/_variables.scss",
        "scss/_icons.scss",
        "scss/font-awesome.scss",
        "fonts/FontAwesome.otf",
        "fonts/fontawesome-webfont.eot",
        "fonts/fontawesome-webfont.svg",
        "fonts/fontawesome-webfont.ttf",
        "fonts/fontawesome-webfont.woff",
        "fonts/fontawesome-webfont.woff2"
      ]
    },
    "jQuery.FilterTable": {
      "main": "./jquery.filtertable.js"
    }
  }
}

And I want to just load half of the bootstrap into main files and half into separate js and css to load on specific page templates. If there’s already an answer somewhere of course please point it out and if noone else answers, I’ll report my own findings later.

Thanks, Rootsies.

1 Like
2

Why?

Post must be 20 characters

3

To be completely honest, @benword - and I hope I’m not being unethical here - I’m using the Sage workflow for a plugin (github) and I just added a new shortcode which uses a bootstrap-based gallery, but it’s creating conflicts with some (mostly bloated, premium) themes.

So I’d to only add those components if specified by shortcode.

That being said, I think there might be cases where a Sage theme would be released in a way that certain templates could contain framework elements that, if conflicting with a plugin, could simply not be used.

I know it’s fairly simple to achieve this between the awesomeness of Asset Builder and Bower, I just still (obviously) haven’t quite assimilated the process.

4

This whole issue you’re having isn’t an issue with Sage or asset builder. It’s really an issue with how WP allows front end assets to be loaded. You basically have to check if something is loaded via wp_enqueue_script or wp_enqueue_style and have only a name. And obviously everybody is going to name things differently, they may name it simply bootstrap or they may prefix it with their theme/plugin name.

So I’m not really sure the best way to solve this problem, since it’s such a global one. Best you can do is check for compatibility with specific themes/plugins you think might have a conflict and check if they are enqueueing what you need before enqueueing it yourself.

5

I guess one option would be to see if there are CSS or JS styles or scripts enqueued that include the name bootstrap, or check to see if certain jQuery functions are available, but in the meantime all I’m trying to do is add some of the Bootstrap components to main.css and main.js and the others to two different files, which would only be enqueued by a specific shortcode (or one of it’s attributes).

That way if there’s a conflict for a specific component, the rest of the features can be used without it.

6

@austin and other experts.

I’m still trying to understand the way to remove a script or component from the files compiled by gulp/bower/assets builder. Is the following true?

To include that component/script as it’s own script in assets/manifest.json. For example (within the Sage framework), if I want to render a certain asset as it’s own file and simply add it like this:

"a-cool-script.js": {
    "files": [
        "scripts/asset-cool-script.js"
      ],
      "main": true
    },

Then the file compiled to dist/scripts/a-cool-script.js will contain the content of assets/scripts/asset-cool-script.js as well jQuery2, etc from our assets/scripts directory. But if we add to the manifest:

"jquery.js": {
      "bower": ["jquery"]
    },

Then jQuery will not be included in the script compiled to assets/scripts/asset-cool-script.js, and will instead be compiled (from the content of bower_components/jquery to dist/scripts/jquery.

1 Like