Plugin following Sage Structure

I’m using the Sage structure to filter the bootstrap components I’m using in a plugin that features modal pop-ups.

This is the basic structure:

    ├── assets
    │   ├── manifest.json
    │   ├── scripts
    │   └── styles
    ├── bootstrap
    │   ├── css
    │   └── js
    ├── bower.json
    ├── bower_components
    │   ├── bootstrap-sass-official
    │   └── jquery
    ├── dist
    │   ├── fonts
    │   ├── scripts
    │   └── styles
    ├── gulpfile.js
    ├── images
    ├── inc
    │   ├── modal_descriptions.php
    │   ├── modal_registration.php
    │   ├── modal_teachers.php
    │   ├── mz_events.php
    │   ├── mz_mbo_init.inc
    ├── js
    ├── mZ-mindbody-api.php
    ├── mindbody-php-api
    │   ├── MB_API.php
    │   └── php_variants
    ├── node_modules
    │   ├── asset-builder
    │   ├── bower
    │   ├── browser-sync
    │   ├── del
    │   ├── gulp
    │   ├── gulp-autoprefixer
    │   ├── gulp-changed
    │   ├── gulp-concat
    │   ├── gulp-flatten
    │   ├── gulp-if
    │   ├── gulp-imagemin
    │   ├── gulp-jshint
    │   ├── gulp-less
    │   ├── gulp-minify-css
    │   ├── gulp-plumber
    │   ├── gulp-rename
    │   ├── gulp-rev
    │   ├── gulp-sass
    │   ├── gulp-sourcemaps
    │   ├── gulp-uglify
    │   ├── imagemin-pngcrush
    │   ├── jshint-stylish
    │   ├── lazypipe
    │   ├── merge-stream
    │   ├── minimist
    │   ├── run-sequence
    │   ├── traverse
    │   └── wiredep
    ├── package.json
    └── readme.txt

The problem I’m having is that none of the bootstrap CSS is being compiled, nor is the dist/assets.json file being created, although the dist directories and files are being generated.

The following are the main gulp/bower/assets-manager files.

bower.json:

  {
      "name": "mz-mindbody-api",
      "version": "1.8",
      "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"
      },
      "ignore": [
        "**/.*",
        "node_modules",
        "bower_components",
        "test",
        "tests"
      ]
    }

assets/manifest.json:

  {
  "dependencies": {
    "main.js": {
      "files": [
        "scripts/main.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss"
      ],
      "main": true
    },
    "admin-style.css": {
      "files": [
        "styles/admin-style.scss"
      ]
    }
  }
}

gulpfile.js matches the Sage one.

Can you see what is missing in my config/process?

It’s compiling everything from the assets directory, and the bower javascript and fonts, but not the scss.

One thing that was missing was the small library to load the assets, mostly what’s located in lib/assets.php, to which I also added some of the config functions. Man, is Namespacing cool!

Still not sure why the bower styles aren’t being rendered.

OK. I’m fairly new to SASS (and never used LESS) so not sure if this is related the SASS syntax or something else, but discovered that when I add:

// bower:scss
// endbower

to assets/styles/main.css, the bower styles get loaded. Ahhhh.

That’s actually wiredep working…

1 Like

@Johnny_Bit So is it wiredep syntax which specifies:

// bower:scss
// endbower

I’m having trouble finding it in the code or google. Ah (again) - there it is in the wiredep readme, but with css and js, not scss.

Look @ readme in https://github.com/taptapship/wiredep - you’ll see bits for sass/scss and for configuration. I really love wiredep, however You’ll sometimes have to use overrides despite theoretically proper main section in bower.json,

I noticed that with SlickCarousel, which I never got working 'cause was only installing as per @ben’s tutorial video anyway. I think it might be mentioned in his upcoming book (but not sure).