Adding other files into assets pipeline

sage
1

Hi guys,

I just has finished watch the new sage screencast a couple times and read asset-builder help, but I can’t figured out how to adding others css and js files into the asset pipeline.

I would like to minify and concatenate within main.js and main.css and dont use wp_enqueue_script and wp_enqueue_style functions.

The files I want to is FlexSlider by WooThemes. But they dont have a “official” package in bower. There is others outdated forked packages that I dont want to use.

So I downloaded and created a folder assets/vendor/woothemes-flexslider to put files and I tried add vendor property in manifest.json.

"main.js": {
      "files": [
        "scripts/main.js"
      ],
      "vendor": [
        "vendor/woothemes-flexslider/jquery.flexslider.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.less"
      ],
      "vendor": [
        "vendor/woothemes-flexslider/flexslider.css"
      ],
      "main": true
    },

I tried this but did not worked.

In benword screencast example “Dequeuing WordPress plugin assets and adding them to the pipeline” works fine, differently that the folder is WP plugins, I dont know if it has something to do with it.

I wouldn’t like to enqueue the files with wp_enqueue_script and wp_enqueue_style like showed by benword on screencast section “Adding and enqueueing your own additional CSS and JS files”.

Any thoughts would be appreciated. Thanks a lot!

2 Likes
2

Hey - just before I go and write how I would do it can you clarify that you want separate stylesheets and script files to enqueue on specific pages? What I mean is, do you want to have files like this?

All pages:

  • main.js
  • main.css

Some pages (or maybe the whole site, idk):

  • flex-slider.js
  • flex-slider.css

Or do you want to have everything put in main.js and main.css?

3

Hi Julien, thanks for you help.

I wanted to have everything in main.js and main.css.

I forgot to mention that besides trying vendor property I also tried put the new files in files array but there was occurred an error that I dont remember, anyway, I try again now and it worked!

"main.js": {
      "files": [
        "scripts/main.js",
        "scripts/flexslider.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.less",
        "styles/flexslider.css"
      ],
      "main": true
    },

Thanks for your patience Julien, I’m having a bit of work in this transition from roots to the sage but it has pushing my boundaries foward.

1 Like
4

Ok, not that new entry. But same issue here. Some idea anyone?
I’d like to concatenate plugin.css with my main.css
tried like asset-builder advice (=@marlonlamancio) -> no success

5

ok. Found: How to correctly add a custom less file in sage? - #2 by mikespainhower
So, the plugin.css is concatenated and minified with main.css, but

any CSS files (literal .css files) will be prepended in your main.css

ooooh, “Make Relative” option also not working for ordering
https://github.com/austinpray/asset-builder/issues/49

Suggestions? @JulienMelissas Can you help?

6

@ElaHo, I’m sorry I’m just seeing this but I’m not exactly sure what you’re asking help on. Can you be more specific as to what you need done, with filepaths, errors you’re getting, you’re manifest.json, etc?