I am using Brunch for build tool. And I am having trouble with configuring build order in js and also css Here is my directory structure
-assets/
---css/
----dashboard.css
----menu.css
----vendor/
-----bootstrap.min.css
-----material-dashboard.css
-----materialize.css
----- etc...
---js/
----app.js
----vendor/
-----bootstrap-datetimepicker.js
-----jquery.min.js
-----materialize.min.js
-----material-dashboard.js
-----etc...
And this is brunch-config.js
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: [
"/js/vendor/jquery.min.js",
"/js/vendor/bootstrap.min.js",
"/js/vendor/materialize.min.js",
"/js/vendor/material-dashboard.js
]
}
},
stylesheets: {
joinTo: "css/app.css",
order: {
before: [
"/css/vendor/bootstrap.min.css",
"/css/vendor/materialize.css",
"/css/vendor/material-dashboard.css"
]
}
},
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", "dashboard-react"],
// Where to compile files to
public: "../priv/static"
},
// Configure your plugins
plugins: {
babel: {
presets: ["es2015", "react", "env", "stage-2"],
// Do not use ES6 compiler in vendor code
ignore: [/vendor/]
}
},
modules: {
autoRequire: {
"js/app.js": ["js/app"]
}
},
npm: {
enabled: true,
whitelist: ["react", "react-dom"]
}
};
And I want to load this order
js
jquery.min.js",
bootstrap.min.js",
materialize.min.js",
material-dashboard.js
css
bootstrap.min.css",
materialize.css",
material-dashboard.css",
but it didn’t work. So I looked up app.js.map and app.css.map
in app.css.map
sources":["css/vendor/bootstrap.min.css","css/vendor/material-dashboard.css","css/vendor/materialize.css","css/dashboard.css","css/menu.css"]
in app.js.map
"js/analytics-chart.js","js/app.js","js/custom.js","js/dashboard-chart.js","js/socket.js","js/split-sms.min.js","js/vendor/arrive.min.js","js/vendor/bootstrap-datetimepicker.js","js/vendor/bootstrap-notify.js","js/vendor/bootstrap.min.js","js/vendor/chartist.min.js","js/vendor/demo.js","js/vendor/fullcalendar.min.js","js/vendor/jasny-bootstrap.min.js","js/vendor/jquery-jvectormap.js","js/vendor/jquery.bootstrap-wizard.js","js/vendor/jquery.datatables.js","js/vendor/jquery.min.js","js/vendor/jquery.select-bootstrap.js","js/vendor/jquery.tagsinput.js","js/vendor/jquery.validate.min.js","js/vendor/material-dashboard.js","js/vendor/material.min.js","js/vendor/materialize.min.js","js/vendor/moment.min.js","js/vendor/nouislider.min.js","js/vendor/perfect-scrollbar.jquery.min.js","js/vendor/sweetalert2.js
I expected vendor folder should compile first, before other css or js but it shows me incorrect order
What am I missing?
