如何在Brunch Build工具中配置构建顺序

时间:2018-08-07 18:35:12

标签: javascript css build brunch

我正在使用Brunch作为构建工具。 而且我在js和css中配置构建顺序时遇到麻烦 这是我的目录结构

-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...

这是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"]
  }
};

所以我要加载它,然后在before选项中说。

js

jquery.min.js",
bootstrap.min.js",
materialize.min.js",
material-dashboard.js

css

bootstrap.min.css",
materialize.css",
material-dashboard.css",

但是没有用。所以我查了app.js.map和app.css.map

在app.css.map中

sources":["css/vendor/bootstrap.min.css","css/vendor/material-dashboard.css","css/vendor/materialize.css","css/dashboard.css","css/menu.css"]

在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

我希望供应商文件夹应该先编译,然后再编译其他CSS或JS 但这告诉我订单不正确

我想念什么?

0 个答案:

没有答案