vue.js - Brunch.io Configuration For VueJS Components -
i have vuejs component contains js, css, , template. i’m working inside phoenix/elixir skeleton.
i need configure brunch concatenate js vendor.js, css vendor.css , template templates/template_name/template_name.html.eex.
can done? if so, how?
sample vuejs component:
<style> .test_component h2 { } </style> <template> <div class="test_component"> </div> </template> <script> module.exports = { data: function () { return { } } } </script>
current brunch-config.js:
exports.config = { // see http://brunch.io/#documentation docs. files: { javascripts: { // jointo: "js/app.js" // use separate vendor.js bundle, specify 2 files path // https://github.com/brunch/brunch/blob/stable/docs/config.md#files jointo: { "js/app.js": /^(web\/static\/js)/, "js/vendor.js": /^(web\/static\/vendor)|(deps)/ } // // change order of concatenation of files, explicitly mention here // https://github.com/brunch/brunch/tree/master/docs#concatenation // order: { // before: [ // "web/static/vendor/js/jquery-2.1.1.js", // "web/static/vendor/js/bootstrap.min.js" // ] // } }, stylesheets: { jointo: "css/app.css" }, templates: { jointo: "js/app.js" } }, conventions: { // option sets should place non-css , non-js assets in. // default, set "/web/static/assets". files in directory // copied `paths.public`, "priv/static" default. assets: /^(web\/static\/assets)/ }, // phoenix paths configuration paths: { // dependencies , current project directories watch watched: [ "deps/phoenix/web/static", "deps/phoenix_html/web/static", "web/static", "test/static" ], // compile files public: "priv/static" }, // configure plugins plugins: { babel: { // not use es6 compiler in vendor code ignore: [/web\/static\/vendor/] } }, modules: { autorequire: { "js/app.js": ["web/static/js/app"] } }, npm: { enabled: true, // whitelist npm deps pulled in front-end assets. // other deps in package.json excluded bundle. whitelist: ["phoenix", "phoenix_html", "vue"] } };
Comments
Post a Comment