Hi everyone!
I’m a long-time Rails programmer and have been dabbling in Elixir/Phoenix. Loving it!
I just downloaded the Argon dashboard by Creative Tim and am trying to get it hooked up a new Phoenix application. Here’s where I’m stuck… following the Quick Start docs, I’ve moved a bunch of their files into my assets directory. Here’s the structure:
assets
-> css
-> theme
-> bootstrap
-> core
-> custom
-> argon.scss
-> app.scss
-> phoenix.scss
-> js
-> theme
-> argon.min.js
-> app.js
-> socket.js
-> node_modules
-> static
-> vendor
-> @fortawesome
-> anchor-js
... etc ...
In the assets/vendor folder, I’ve put everything from the dashboard’s own vendor folder, and removed anything wasn’t a compiled/bundled/minified js/css file.
I’m trying to use brunch’s config to specify the order of some files, but it’s not working properly. Here’s my config:
exports.config = {
// See http://brunch.io/#documentation for docs.
files: {
javascripts: {
joinTo: "js/app.js",
// To use a separate vendor.js bundle, specify two files path
// http://brunch.io/docs/config#-files-
// joinTo: {
// "js/app.js": /^js/,
// "js/vendor.js": /^(?!js)/
// }
//
// To change the order of concatenation of files, explicitly mention here
order: {
before: [
"vendor/jquery/dist/jquery.min.js",
"vendor/bootstrap/dist/js/bootstrap.bundle.min.js",
"js/theme/argon.min.js",
],
after: [
"js/app.js",
],
}
},
stylesheets: {
joinTo: "css/app.css",
order: {
before: [
"vendor/nucleo/css/nucleo.min.css",
"vendor/@fortawesome/fontawesome-free/css/all.min.css",
"css/theme/argon.scss",
],
after: [
"css/app.scss",
],
}
},
templates: {
joinTo: "js/app.js"
}
},
conventions: {
// This option sets where we should place non-css and non-js assets in.
// By default, we set this to "/assets/static". Files in this directory
// will be copied to `paths.public`, which is "priv/static" by default.
assets: /^(static)/
},
// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: ["static", "css", "js", "vendor"],
// Where to compile files to
public: "../priv/static"
},
// Configure your plugins
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/vendor/]
},
sass: {
mode: "native", // set to 'native' to force libsass
options: {
precision: 8 // Minimum precision required by bootstrap
}
}
},
modules: {
autoRequire: {
"js/app.js": ["js/app"]
}
},
npm: {
enabled: true
}
};
The problem is, the js before/after options don’t seem to be working, or at least vendor files are ALWAYS after everything. If I look at the app.js.map that’s bundled by brunch, here’s the sources array:
"sources":["js/theme/argon.min.js","node_modules/phoenix/priv/static/phoenix.js","node_modules/phoenix_html/priv/static/phoenix_html.js","js/socket.js","js/app.js","vendor/jquery/dist/jquery.min.js","vendor/bootstrap/dist/js/bootstrap.bundle.min.js","vendor/@fortawesome/fontawesome-free/js/all.min.js","vendor/@fortawesome/fontawesome-free/js/brands.min.js","vendor/@fortawesome/fontawesome-free/js/fontawesome.min.js","vendor/@fortawesome/fontawesome-free/js/regular.min.js","vendor/@fortawesome/fontawesome-free/js/solid.min.js","vendor/@fortawesome/fontawesome-free/js/v4-shims.min.js","vendor/anchor-js/anchor.min.js","vendor/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js","vendor/chart.js/dist/Chart.bundle.min.js","vendor/clipboard/dist/clipboard.min.js","vendor/headroom.js/dist/jQuery.headroom.min.js","vendor/holderjs/holder.min.js","vendor/jquery-scroll-lock/dist/jquery-scrollLock.min.js","vendor/jquery.scrollbar/jquery.scrollbar.min.js","vendor/nouislider/distribute/nouislider.min.js","vendor/onscreen/dist/on-screen.umd.min.js"]
As you can see, js/app.js is NOT after everything else (at least not after vendor files).
Any ideas what’s going on here? I’ve already checked out this template porting discussion.
Thanks for any help!
