Plugin following Sage Structure

sage
#1

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?

#2

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

#3

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.

#4

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.

#5

That’s actually wiredep working…

1 Like
#6

@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.

#7

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,

#8

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).