austinpray/asset-builder

Manifest.json can't deal with filename start with underscore

66beta opened this issue · 2 comments

Excuse for my poor english. Good job! Thank you, Austin.

this wont work

"slick.css": {
  "files": [
    "../bower_components/slick.js/slick/_slick.scss",
    "../bower_components/slick.js/slick/_slick-theme.scss"
  ]
}

this works

"slick.css": {
  "files": [
    "../bower_components/slick.js/slick/slick.scss",
    "../bower_components/slick.js/slick/slick-theme.scss"
  ]
}

So, when I want to build a alternative bootstrap.css, this wont work

"bootstrap.css": {
  "vendor": ["../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss"]
}

My bower.json

{
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Ben Word <ben@benword.com>"
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "modernizr": "2.8.2",
    "jquery": "1.11.2",
    "bootstrap-sass-official": "~3.3.3",
    "jquery-waypoints": "~3.1.1",
    "slick.js": "~1.4.1"
  },
  "overrides": {
    "slick.js": {
      "main": [
        "./slick/slick.js"
      ]
    },
    "bootstrap-sass-official": {
      "main": [
        "./assets/javascripts/bootstrap/transition.js",
        "./assets/javascripts/bootstrap/alert.js",
        "./assets/javascripts/bootstrap/button.js",
        "./assets/javascripts/bootstrap/carousel.js",
        "./assets/javascripts/bootstrap/collapse.js",
        "./assets/javascripts/bootstrap/dropdown.js",
        "./assets/javascripts/bootstrap/modal.js",
        "./assets/javascripts/bootstrap/tooltip.js",
        "./assets/javascripts/bootstrap/popover.js",
        "./assets/javascripts/bootstrap/scrollspy.js",
        "./assets/javascripts/bootstrap/tab.js",
        "./assets/javascripts/bootstrap/affix.js",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff2"
      ]
    }
  }
}

My manifest.json

{
  "dependencies": {
    "main.js": {
      "files": ["scripts/main.js"],
      "main": true
    },
    "main.css": {
      "files": ["styles/main.scss"],
      "main": true
    },
    "slick.css": {
      "files": [
        "../bower_components/slick.js/slick/slick.scss",
        "../bower_components/slick.js/slick/slick-theme.scss"
      ]
    },
    "bootstrap.css": {
      "files": ["../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss"]
    },
    "jquery.js": {
      "bower": ["jquery"]
    },
    "modernizr.js": {
      "bower": ["modernizr"]
    },
    "jquery-waypoints.js": {
      "bower": ["jquery-waypoints"]
    },
    "bootstrap.js": {
      "bower": ["bootstrap-sass-official"]
    },
    "slick.js": {
      "bower": ["slick.js"]
    }
  },
  "config": {
    "devUrl": "http://wp.dev"
  }
}

I was out of town last week, I apologize for the slow response. Let me look into this.

I was having this same issue, its not assets-builder that is the issue, its the set up of slick.js:
I did find a bug with slick.js thought, the gif would not save to images,fonts worked just fine.

This is the work around:

The bower.json stayed default

"dependencies": {
    "modernizr": "2.8.2",
    "jquery": "1.11.2",
    "bootstrap-sass-official": "3.3.4",
    "slick.js": "~1.5.5"
  },

manifest.json added this

"slick-theme.css": {
      "files": [
        "../bower_components/slick.js/slick/slick-theme.scss"
      ]
    },
"images": {
      "files": [ "../bower_components/slick.js/slick/ajax-loader.gif"]
    },

What was wrong

In slick-theme.scsss, there is a couple functions that look for custom routes for the fonts and the images.
Since this is scss and it is precompiled, it cant and wont change unless its recompiled.

$slick-font-path: "./fonts/" !default;
$slick-loader-path: "./" !default;
@function slick-image-url($url) {
    @if function-exists(image-url) {
        @return image-url($url);
    }
    @else {
        @return url($slick-loader-path + $url);
    }
}

@function slick-font-url($url) {
    @if function-exists(font-url) {
        @return font-url($url);
    }
    @else {
        @return url($slick-font-path + $url);
    }
}

#So I added this slick-theme.scss that is now under styles in assets to the main.scss, also created a _homepage.scss
@import "layouts/_homepage";
@import "slick-theme";

#In the _homepage.scss I added this to fix the function above in slick-theme.scss
$slick-font-path: '../fonts/';

@function font-url($url) {
    @return url($slick-font-path + $url);
}
$slick-image-url: '../images/';

@function image-url($url) {
    @return url($slick-image-url + $url);
}

That worked, and works. It looks like we have to figure this out as all packages are not created equal.
That being said, the .gif detection is an issue.