wlminimal

wlminimal

How to configure build order in Brunch Build tool

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?

Where Next?

Popular in Questions Top

baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
shahryarjb
Hello, I get Persian date from my client and convert it to normal calendar like this: def jalali_string_to_miladi_english_number(persi...
New
fireproofsocks
I’m working on defining a simple Ecto schema for a table (in PostGres), but I don’t see where I can define a column as NOT NULL. Conside...
New
johnnyicon
Hi all, I’ve just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I’m trying to use Postgres...
New
pmjoe
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New
JulienCorb
I am trying to implement my new.html.eex file to create new posts on my website. new.html.eex: <h1>Create Post</h1> <%= ...
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
aalberti333
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
New
PeterCarter
There are pre-rolled solutions for other frameworks that do work. However, Phoenix does not seem to have these. Have people had good expe...
New

Other popular topics Top

aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
New
vertexbuffer
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
New
marius95
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
New
baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
pmjoe
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? Ecto.Repo — Ecto v3.14.0 has exampl...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
aesmail
Hello guys, I have finally made it. I created an admin interface for a framework. It’s been on my todo list for years and with the curre...
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New

Latest on Elixir Forum

Elixir Forum

We're in Beta

About us Mission Statement